Comment puis-je déboguer mon code JavaScript?
Quand je constate que j'ai un extrait de code problématique, comment dois-je procéder pour le déboguer?
Firebug est l’un des outils les plus populaires à cette fin.
Tous les navigateurs modernes sont livrés avec une forme d'application de débogage JavaScript intégrée. Les détails de ceux-ci seront couverts sur les pages Web des technologies pertinentes. Ma préférence personnelle pour le débogage de JavaScript est Firebug dans Firefox. Je ne dis pas que Firebug est meilleur qu'un autre; cela dépend de vos préférences personnelles et vous devriez probablement tester votre site dans tous les navigateurs, mais mon premier choix personnel est toujours Firebug.
Je couvrirai certaines des solutions de haut niveau ci-dessous, en utilisant Firebug comme exemple :
Firefox
Firefox est livré avec son propre outil de débogage JavaScript intégré, mais je vous recommande d'installer le complément Firebug . Cela fournit plusieurs fonctionnalités supplémentaires basées sur la version de base qui sont pratiques. Je vais seulement parler de Firebug ici.
Une fois que Firebug est installé, vous pouvez y accéder comme ci-dessous:
Premièrement, si vous faites un clic droit sur un élément, vous pouvez Inspecter un élément avec Firebug :
En cliquant dessus, vous ouvrirez le volet Firebug en bas du navigateur:
Firebug fournit plusieurs fonctionnalités, mais celle-ci s’intéresse à l’onglet Script. En cliquant sur l'onglet script ouvre la fenêtre ci-dessous:
Évidemment, pour déboguer, vous devez cliquer sur reload :
Vous pouvez maintenant ajouter points d'arrêt en cliquant sur la ligne à gauche du code JavaScript auquel vous souhaitez ajouter le point d'arrêt:
Lorsque votre point d'arrêt est atteint, il se présentera comme suit:
Vous pouvez également ajouter variables de surveillance et faire généralement tout ce que vous attendez d'un outil de débogage moderne.
Pour plus d'informations sur les différentes options offertes par Firebug, consultez le FAQ Firebug .
Chrome
Chrome possède également sa propre option de débogage JavaScript intégrée, qui fonctionne de manière très similaire: clic droit , élément à inspecter, etc. . Regardez Outils de développement Chrome . Je trouve généralement le traces de pile dans Chrome meilleur que Firebug.
Internet Explorer
Si vous développez .NET et utilisez Visual Studio dans un environnement de développement Web, vous pouvez déboguer le code JavaScript directement en plaçant des points d'arrêt, etc. Votre code JavaScript a exactement la même apparence que si vous déboguiez votre C # ou - VB.NET code.
Si vous n'en avez pas, Internet Explorer fournit également tous les outils présentés ci-dessus. Ennuyeux, au lieu d’avoir un clic droit inspecter l’élément des fonctionnalités de Chrome ou Firefox, vous accédez aux outils de développement en appuyant sur F12 . Cette question couvre la plupart des points.
- Internet Explorer 8 (Outils de développement - F12). Tout le reste est de second ordre dans Internet Explorer
- Firefox et Firebug . Frappé F12 afficher.
- Safari (Afficher la barre de menus, Préférences -> Avancé -> Afficher la barre de menus Développer )
- Google Chrome Console JavaScript (F12 ou (Ctrl + Shift + J)). Généralement le même navigateur que Safari, mais Safari est meilleur IMHO.
- Opera ( Outils -> Avancé -> Outils de développement )
Il existe un mot-clé débogueur en JavaScript pour déboguer le code JavaScript. Mettez debugger; extrait dans votre code JavaScript. Il débute automatiquement le débogage du code JavaScript à ce stade.
Par exemple:
Supposons que ceci soit votre fichier test.js
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
- Lorsque le navigateur exécute la page Web dans l'option développeur avec le débogueur activé, il lance automatiquement le débogage à partir du point débogueur;.
- Il devrait être ouvert la fenêtre de développement du navigateur.
J'utilise une bonne approche printf (une technique ancienne qui fonctionnera bien à tout moment).
Regardez vers la magie %o:
console.log("this is %o, event is %o, Host is %s", this, e, location.Host);
%o Dump contenu joliment imprimé cliquable et pouvant être parcouru en profondeur de l'objet JS. %s N'a été montré que pour un enregistrement.
Et ça:
console.log("%s", new Error().stack);
vous donne une trace de pile de type Java au point de new Error() invocation (y compris le chemin d'accès au fichier et le numéro de ligne !!).
%o Et new Error().stack disponibles dans Chrome et Firefox.
Avec de tels outils puissants, vous faites des suppositions sur ce qui ne va pas dans votre JS, mettez une sortie de débogage (n'oubliez pas d'insérer une instruction if pour réduire la quantité de données) et vérifiez votre hypothèse. Corrigez le problème ou faites de nouvelles hypothèses ou mettez plus de sorties de débogage en problème.
Également pour les traces de pile, utilisez:
console.trace();
comme par exemple Console
Joyeux piratage!
Commencez avec Firebug et IE Debugger.
Soyez prudent avec les débogueurs en JavaScript cependant. De temps en temps, ils affecteront l'environnement juste assez pour causer certaines des erreurs que vous essayez de déboguer.
Exemples:
Pour Internet Explorer, il s’agit généralement d’un ralentissement progressif et d’une sorte d’affaire de type fuite de mémoire. Après une demi-heure environ, je dois redémarrer. Cela semble être assez régulier.
Pour Firebug, cela fait probablement plus d’un an et c’est peut-être une version plus ancienne. En conséquence, je ne me souviens pas des détails, mais fondamentalement, le code ne fonctionnait pas correctement et après avoir essayé de le déboguer pendant un moment, j'ai désactivé Firebug et le code fonctionnait correctement.
Bien que alert(msg); fonctionne dans les scénarios "Je veux juste savoir ce qui se passe" ... every le développeur a rencontré ce cas où vous vous retrouvez dans une situation ) boucle que vous ne pouvez pas sortir.
Si vous souhaitez une option de débogage très intégrée, utilisez une option de débogage qui vous permet d’éclater. (PS Opera, Safari? Et Chrome? Sont tous disponibles dans leurs dialogues natifs)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}
Avec ce qui précède, vous pouvez entrer dans une grande boucle de débogage contextuel, où appuyer sur Enter/Ok vous permet de parcourir chaque message, mais en appuyant sur Escape/Cancel vous permet de bien sortir.
J'utilise WebKit menu/console de développement (Safari 4). C'est presque identique à Firebug.
console.log() est le nouveau noir - bien meilleur que alert().
Ma première étape consiste toujours à valider le code HTML et à vérifier la syntaxe avec JSLint . Si vous avez des balises propres et du code JavaScript valide, il est temps de lancer Firebug ou un autre débogueur.
J'utilise quelques outils: Fiddler , Firebug et Visual Studio. J'entends dire qu'Internet Explorer 8 a un bon débogueur intégré.
J'avais l'habitude d'utiliser Firebug , jusqu'à la sortie d'Internet Explorer 8. Je ne suis pas un grand fan d’Internet Explorer, mais après avoir passé du temps avec les outils de développement intégrés, qui incluent un très bon débogueur, il semble inutile de faire autre chose. Je dois saluer Microsoft, ils ont fait un travail fantastique sur cet outil.
Vous pouvez également consulter YUI Logger . Tout ce que vous avez à faire pour l'utiliser consiste à inclure quelques balises dans votre code HTML. C'est un ajout utile à Firebug, qui est plus ou moins indispensable.
Visual Studio 2008 possède de très bons outils de débogage JavaScript. Vous pouvez supprimer un point d'arrêt dans le code JavaScript de votre client et le parcourir en utilisant exactement les mêmes outils que le code côté serveur. Il n'est pas nécessaire de s'attacher à un processus ou de faire quelque chose de difficile pour l'activer.
Outre l’utilisation du débogueur JavaScript de Visual Studio, j’ai écrit mon propre panneau simple que j’inclus dans une page. C'est simplement comme le fenêtre immédiate de Visual Studio. Je peux modifier les valeurs de mes variables, appeler mes fonctions et voir les valeurs des variables. Il évalue simplement le code écrit dans le champ de texte.
Si vous utilisez Visual Studio , mettez simplement debugger; au-dessus du code que vous souhaitez déboguer. Pendant l'exécution, le contrôle s'interrompt à cet endroit et vous pouvez déboguer étape par étape à partir de là.
En plus des extensions de développement Firebug et du navigateur natif , JetBrains WebStorm IDE est fourni avec prise en charge du débogage distant pour Firefox et Chrome (Extension requise) intégré.
Soutient également:
Les options pour tester ceci gratuitement sont la version d'essai 30 ou l'utilisation de version à accès anticipé .
J'ai trouvé la nouvelle version d'Internet Explorer 8 (appuyez sur F12) est très bon pour déboguer le code JavaScript.
Bien sûr, Firebug est bon si vous utilisez Firefox.
Comme avec la plupart des réponses, cela dépend vraiment: Qu'est-ce que vous essayez d'atteindre avec votre débogage? Développement de base, résolution des problèmes de performances? Pour le développement de base, toutes les réponses précédentes sont plus que suffisantes.
Pour les tests de performances en particulier, je recommande Firebug. Pouvoir définir les méthodes les plus coûteuses en temps a été un atout précieux pour un certain nombre de projets sur lesquels j'ai travaillé. Au fur et à mesure que les bibliothèques côté client deviennent de plus en plus robustes et que de plus en plus de responsabilités sont placées côté client, ce type de débogage et de profilage deviendra de plus en plus utile.
API Firebug Console: http://getfirebug.com/console.html
En appuyant sur F12 les développeurs Web peuvent rapidement déboguer le code JavaScript sans quitter le navigateur. Il est intégré à chaque installation de Windows.
Dans Internet Explorer 11 , les outils F12 fournissent des outils de débogage tels que les points d'arrêt, l'affichage des variables de surveillance et locales, ainsi qu'une console pour les messages. et exécution immédiate du code.