Comment puis-je déboguer mon code JavaScript? [fermé]

Lorsque 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 à cet effet.

Tous les navigateurs modernes sont livrés avec une forme d'application de débogage JavaScript intégrée. Les détails de ces derniers 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 que tout autre; cela dépend de vos préférences personnelles et vous devriez probablement tester votre site dans tous les navigateurs de toute façon (mon premier choix personnel est toujours Firebug).

Je vais couvrir 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 module complémentaire Firebug . Cela fournit plusieurs fonctionnalités supplémentaires basées sur la version de base qui sont pratiques. Je ne parlerai que de Firebug ici.

Une fois Firebug installé, vous pouvez y accéder comme ci-dessous:

Tout d'abord, si vous faites un clic droit sur n'importe quel élément, vous pouvez inspecter l'élément avec Firebug :

Cliquez dessus pour ouvrir le volet Firebug en bas du navigateur:

Firebug fournit plusieurs fonctionnalités mais celle qui nous intéresse est l'onglet script. Cliquez sur l'onglet de script pour ouvrir cette fenêtre:

Évidemment, pour déboguer, vous devez cliquer sur recharger :

Vous pouvez maintenant ajouter des points d' arrêt en cliquant sur la ligne à gauche du morceau de code JavaScript auquel vous souhaitez ajouter le point d'arrêt:

Lorsque votre point d'arrêt est atteint, il ressemblera à ci-dessous:

Vous pouvez également ajouter des 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 proposées dans Firebug, consultez la FAQ Firebug .

Chrome

Chrome a également sa propre dans l' option de débogage JavaScript intégré, qui fonctionne d'une manière très similaire, clic droit, élément inspecter, etc. . Jetez un œil aux outils de développement Chrome . Je trouve généralement que les traces de pile dans Chrome sont meilleures que Firebug.

Internet Explorer

Si vous développez dans .NET et en utilisant Visual Studio en utilisant l'environnement de développement web , vous pouvez directement déboguer le code JavaScript en plaçant des points d' arrêt, etc. Votre apparence de code JavaScript exactement le même que si vous déboguez votre C # ou VB.NET code.

Si vous ne l'avez pas, Internet Explorer fournit également tous les outils illustrés ci-dessus. Malheureusement, au lieu d'avoir le clic droit pour inspecter les fonctionnalités des éléments 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 land
• Firefox et Firebug . FrappéF12 pour afficher.
• Safari (Afficher la barre de menus, Préférences -> Avancé -> Afficher le développement barre de menus de )
• Console JavaScript Google Chrome ( F12ou ( Ctrl+ Shift+ J)). Surtout le même navigateur que Safari, mais Safari est meilleur à mon humble avis.
• Opera ( Outils -> Avancé -> Outils de développement )

Il existe un mot-clé de débogage dans JavaScript pour déboguer le code JavaScript. Mettez le débogueur; extrait de code dans votre code JavaScript. Il démarrera automatiquement le débogage du code JavaScript à ce stade.

Par exemple:

Supposons que ce 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 démarre automatiquement le débogage à partir du débogueur; point.
• Il devrait être ouvert la fenêtre du développeur du navigateur.

J'utilise du bon vieux printf approche (une technique ancienne qui fonctionnera bien à tout moment).

Regardez la magie %o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%ovider le contenu cliquable et explorable en profondeur, joliment imprimé de l'objet JS. %sa été montré juste pour un enregistrement.

Et ça:

console.log("%s", new Error().stack);

vous donne une trace de pile de type Java jusqu'au point d' new Error()appel (y compris le chemin d'accès au fichier et le numéro de ligne !!).

Les deux %oetnew Error().stack disponibles dans Chrome et Firefox.

Avec des outils aussi puissants, vous supposez ce qui ne va pas dans votre JS, mettez la sortie de débogage (n'oubliez pas d'envelopper if instruction pour réduire la quantité de données) et vérifiez votre hypothèse. Résolvez le problème ou faites une nouvelle hypothèse ou mettez plus de sortie de débogage au problème de bit.

Aussi pour les traces de pile, utilisez:

console.trace();

comme dis Console

Bon piratage!

Commencez par Firebug et IE Debugger.

Soyez prudent avec les débogueurs en JavaScript. De temps en temps, ils affecteront l'environnement juste assez pour provoquer 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'accord 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 donc c'était 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 bien.

Bien que cela alert(msg);fonctionne dans ces scénarios "Je veux juste savoir ce qui se passe" ... chaque développeur a rencontré ce cas où vous vous retrouvez dans une boucle (très grande ou sans fin) dont vous ne pouvez pas sortir.

Je recommanderais que pendant le développement, si vous voulez une option de débogage très directe, utilisez une option de débogage qui vous permet de vous évader. (PS Opera, Safari? Et Chrome? Tous ont cela disponible dans leurs boîtes de dialogue natives)

//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 vous mettre dans une grande boucle de débogage contextuel, où appuyer sur Enter/ Okvous permet de parcourir chaque message, mais appuyer sur Escape/ Cancelvous permet de bien sortir.

J'utilise le menu / console développeur de WebKit (Safari 4). C'est presque identique à Firebug.

console.log()est le nouveau noir - bien meilleur que alert().

Ma première étape est toujours de valider le HTML et de vérifier la syntaxe avec JSLint . Si vous avez un balisage propre et un code JavaScript valide, il est temps d'utiliser Firebug ou un autre débogueur.

Visual Studio 2008 dispose de très bons outils de débogage JavaScript. Vous pouvez supprimer un point d'arrêt dans votre code JavaScript côté client et le parcourir en utilisant exactement les mêmes outils que vous le feriez pour le code côté serveur. Il n'est pas nécessaire de s'attacher à un processus ou de faire quoi que ce soit de délicat pour l'activer.

J'utilise quelques outils: Fiddler , Firebug et Visual Studio. J'entends qu'Internet Explorer 8 a un bon débogueur intégré.

J'utilisais 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 d'utiliser autre chose. Je dois lever mon chapeau à 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 est d'inclure quelques balises dans votre HTML. C'est un ajout utile à Firebug, qui est plus ou moins indispensable.

J'ai trouvé que la nouvelle version d'Internet Explorer 8 (presse F12) est très bonne pour déboguer le code JavaScript.

Bien sûr, Firebug est bon si vous utilisez Firefox.

En plus d'utiliser le débogueur JavaScript de Visual Studio, j'ai écrit mon propre panneau simple que j'inclus dans une page. C'est tout simplement comme la fenêtre Immédiat de Visual Studio. Je peux changer 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.

J'utilise Venkman , un débogueur JavaScript pour les applications XUL .

En plus de Firebug et des extensions de développement natives du navigateur, JetBrains WebStorm IDE est livré avec une prise en charge du débogage à distance pour Firefox et Chrome (extension requise) intégrée.

Prend également en charge:

• coffescript: comment déboguer coffeescript dans node.js avec les cartes source de Webstorm 6
• node.js

Les options pour tester cela gratuitement sont l'essai 30 ou l'utilisation d'une version à accès anticipé .

Si vous utilisez Visual Studio , placez simplement debugger;au-dessus du code que vous souhaitez déboguer. Pendant l'exécution, le contrôle s'arrêtera à cet endroit et vous pourrez déboguer étape par étape à partir de là.

Comme pour la plupart des réponses, cela dépend vraiment: qu'essayez-vous de réaliser 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. Être en mesure de profiler les méthodes les plus coûteuses en termes de temps a été inestimable 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 en général, ce type de débogage et de profilage ne deviendra que plus utile.

API de la console Firebug: http://getfirebug.com/console.html

En appuyant sur,F12 les développeurs Web peuvent déboguer rapidement 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, la surveillance et l'affichage des variables locales, ainsi qu'une console pour les messages et l'exécution immédiate du code.