Comment déboguer un script JavaScript ?
Je trouve cette entrée de la FAQ est quelque peu survolée. Certes on ne peut pas couvrir tout le fonctionnement des différents outils développeur, mais on peut quand même donner quelques pistes. Si le contenu est trop important, on peut aussi subdiviser la question. Ci-joint mes propositions d'ajout en gras:
Citation:
Comment déboguer un script JavaScript ?
Tous les navigateurs récents possèdent des outils de développement intégrés comprenant une console JavaScript. Généralement, la touche F12 du clavier vous permet d'y accéder à partir d'une page web existante. Il existe également d'autres outils d'aide au développement sous la forme d'extensions, dont le populaire Firebug pour Firefox.
Cette console permet notamment un débogage rapide en capturant les erreurs de script et en indiquant la nature de l'erreur et l'emplacement de la ligne concernée dans le script.
Vous pouvez également vous en servir pour y écrire des messages (logs) vous aidant au débogage. Pour tester la valeur d'une variable dans votre script, plutôt que d'utiliser alert(maVariable), vous pouvez écrire console.log(maVariable). La valeur apparaîtra en console, souvent sous une forme plus lisible et moins gênante qu'une boîte d'alerte.
Néanmoins, ces outils de développementconsoles permettent d'aller beaucoup plus loin par exemple en exécutant le code en mode « pas à pas ».
Le fonctionnement complet de ces outils de développementconsoles dépasse largement le cadre d'une FAQ, renseignez-vous sur le site de votre navigateur favori pour en savoir plus.
Commentaires :
1) F12 ouvre les outils développeur sur Chrome, Firebug, IE, Safari, Maxthon et sûrement d'autres. Ca me paraît suffisamment répandu pour le mentionner
2) Firebug n'est pas le précurseur de la console JavaScript, c'est une surcouche à la console JS qui existait déjà avant. Le texte prêtait à confusion.
3) Parce que je n'en peux plus de voir tout le monde utiliser des alert() pour tester leur code. La dernière fois j'ai même vu un alert("test") sur un site de e-commerce en production :aie:
4) La console n'est qu'une sous-partie des outils de développement servant d'input/output
Dans les liens en bas, on peut ajouter les liens vers les pages des sites mentionnés juste au-dessus :
Chrome Developer Tools : https://developers.google.com/chrome...r-tools/?hl=fr
Firefox Developer Tools : https://developer.mozilla.org/en-US/docs/Tools
Internet Explorer Developer Tools : http://msdn.microsoft.com/library/gg589507(VS.85).aspx
