Comment puis-je déboguer mon code JavaScript?

Question

Quand je trouve que j’ai un extrait de code problématique, comment dois-je aller sur le débogage il ?

Answer 1

Firebug est l’un des outils plus populaires à cet effet.

Answer 2

Tous les navigateurs modernes viennent avec une certaine forme de construite en JavaScript application de débogage. Les détails de ces sera couvert sur les technologies pertinentes des pages web. Ma préférence personnelle pour le débogage JavaScript est FireBug dans FireFox. Je ne dis pas que Firebug est meilleure qu'une autre, cela dépend de votre préférence personnelle, et vous devriez probablement vérifier votre site sur tous les navigateurs de toute façon, mais ma première, personnelles, le premier choix est toujours de FireBug.

Je vais couvrir certains de haut niveau, des solutions ci-dessous, à l'aide de firebug par exemple:

Firefox

Firefox vient avec son propre intégré JavaScript outil de débogage, mais je vous recommande d'installer le FireBug (http://getfirebug.com/). Il offre plusieurs fonctionnalités supplémentaires basé sur la version de base qui sont à portée de main. Je vais parler seulement de FireBug ici.

Une fois que Firebug est 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 firebug volet en bas du navigateur:

Firebug offre plusieurs fonctionnalités, mais l'on s'intéresse à l'est de l'onglet script. En cliquant sur l'onglet script ouvre la fenêtre ci-dessous:

À l'évidence, à de débogage, vous devez cliquer sur recharger:

Vous pouvez maintenant Ajouter des points d'arrêt en cliquant sur la ligne à gauche de la pièce de JavaScript vous souhaitez ajouter un point d'arrêt:

Quand vous point d'arrêt est atteint, il va ressembler à ci-dessous:

Vous pouvez également ajouter de surveiller les variables et généralement faire tout ce que vous pouvez vous attendre dans un cadre moderne outil de débogage.

Pour plus d'informations sur les différentes options offertes dans firebug découvrez le firebug FAQ

Chrome

Chrome a également son propre construit dans l'option de débogage JavaScript, qui travaille dans une manière très semblable, clic droit, inspecter l'élément, etc..... Jetez un oeil à google Chrome Dev Tools. Je trouve en général que les traces de pile en Chrome de mieux que de Firebug.

Internet Explorer

Si votre développement .Net et à l'aide de Visual Studio à l'aide de l'environnement de Dev Web, vous pouvez débogage JavaScript directement en plaçant des points d'arrêt, etc. votre code JavaScript exactement le même que si vous étiez le débogage de votre C# ou Vb.Net code.

Si vous ne l'avez pas Internet Explorer fournit également tous les outils présentés ci-dessus. Fâcheusement, au lieu d'avoir le droit cliquez sur inspecter l'élément fonctionnalités de Chrome ou Firefox, vous avez accès aux outils de développement en appuyant sur F12. Cette question couvre la plupart des points.

Answer 3

• Internet Explorer 8 (Outils De Développement - F12). Autre chose est le deuxième taux dans Internet Explorer terre
• Firefox et Firebug. Frapper la touche F12 pour afficher.
• Safari (Afficher la Barre de Menu Préférences -> Avancé -> Show Développer barre de menu)
• Google Chrome JavaScript Console (F12 ou (Ctrl + Maj + J)). Pour la plupart le même navigateur que Safari, mais Safari est mieux à mon humble avis.
• Opéra (Outils -> Avancé -> Outils De Développement)

Answer 4

Je utiliser le bon vieux printf approche (une technique ancienne qui va bien travailler en tout temps).

Look à la magie, %o:

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

%o dump cliquables et la profondeur navigable, joli imprimé le contenu de la JS objet. %s a été montré que pour un enregistrement.

Et ceci:

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

vous donne Java-comme la trace de la pile à la pointe de la new Error() invocation (y compris le chemin d'accès au fichier et le numéro de ligne!!).

Les deux %o et new Error().stack disponible en Chrome et Firefox.

Avec ces puissants outils vous rendre hypothèse de ce qui se passe de mal dans votre JS, mettre la sortie de débogage (n'oubliez pas de les emballer dans if déclaration de réduire la quantité de données) et de vérifier votre hypothèse. Corrigé question ou faire de nouvelle hypothèse ou de mettre plus de sortie de débogage pour peu problème.

Aussi pour les traces de pile utilisation:

console.trace();

comme le disent les https://developer.mozilla.org/en-US/docs/Web/API/console.

Happy hacking!

Answer 5

Commencez avec Firebug et IE Débogueur.

Être prudent avec les débogueurs en JavaScript. Une fois de temps en temps, ils auront une incidence sur l'environnement, juste assez pour causer certaines des erreurs que vous essayez de déboguer.

Exemples:

Pour Internet Explorer, il est généralement un ralentissement graduel et est une sorte de fuite de mémoire type de transaction. Après une demi-heure ou alors j'ai besoin de redémarrer. Il semble être assez régulière.

Pour Firebug, c'est sans doute été plus d'un an, donc il peut avoir été une ancienne version. 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 déboguer un moment j'ai désactivé Firebug et le code a bien fonctionné.