Comment puis-je déboguer mon code JavaScript?

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

InformationsquelleAutor Canavar | 2009-06-12

debugging javascript

78

Firebug est l'un des outils les plus populaires pour ce but.
- Lien à suivre: getfirebug.com
- J'aime firebug, mais je n'aurais pas la prétention d'être la tête et les épaules au-dessus de webkit de l'inspecteur.
- Firebug était en avance sur son temps quand il est sorti, mais je ne pense pas que c'est le meilleur outil, compte tenu d'autres outils qui sont sortis récemment.
- Je suis à l'aide de Firebug depuis que je l'ai découvert, et cela m'aide beaucoup! console.debug, profiler, inspecteur...
- Maintenant, tous les navigateurs viennent avec des jetpacks par défaut !
InformationsquelleAutor Ryan Oberoi
74

Tous les navigateurs modernes viennent avec une certaine forme de JavaScript intégrés de débogage de l'application. 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 mieux que les autres; elle 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 Firebug.

Je vais couvrir certains de haut niveau des solutions ci-dessous, à l'aide de Firebug comme un exemple:

Firefox

Firefox vient avec son propre intégré JavaScript outil de débogage, mais je vous recommande d'installer le Firebug ajouter sur. 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 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:

Bien évidemment, de débogage, vous devez cliquer sur recharger:

Vous pouvez maintenant ajouter les points d'arrêt en cliquant sur la ligne à gauche de la pièce de code JavaScript que vous voulez ajouter le point d'arrêt:

Lorsque votre point d'arrêt est atteint, cela va ressembler à ci-dessous:

Vous pouvez également ajouter regarder des 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 la Firebug FAQ.

Chrome

Chrome dispose également de sa propre dans la construction de débogage JavaScript option, qui travaille dans une manière très semblable, clic droit, inspecter l'élément, etc.. Jetez un oeil à Outils De Développement Chrome. Je trouve en général que les les traces de pile en Chrome de mieux que de Firebug.

Internet Explorer

Si votre développement dans .NET et à l'aide de Visual Studio à l'aide d'un environnement de développement web vous pouvez déboguer du code JavaScript directement en plaçant des points d'arrêt, etc. Votre code JavaScript ressemble 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 à droite, 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.
- ... Vous doit ont eu qu'un copier-coller le tampon prêt à aller, non? 🙂
- href="http://meta.stackexchange.com/questions/132886/what-is-this-answer-your-own-question-jazz">répondre à votre propre question est parfaitement valide
- Désolé, j'ai totalement raté qu'il a été demandé et répondu par la même personne! Je pensais que vous aviez une sorte de Javascript Debug Copypasta vous mettez à chaque fois que quelqu'un a posé cette question.
InformationsquelleAutor Liam
54
- Internet Explorer 8 (Outils de développement - F12). Autre chose est le deuxième taux dans Internet Explorer des terres
- Firefox et Firebug. Appuyez sur F12 pour afficher.
- Safari (Afficher la Barre de Menus, Préférences -> Avancé -> Montrent Développer barre de menu)
- Google Chrome Console JavaScript (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)
- +1 opéra js débogueur donne un message d'erreur puis tout le reste
- Toutefois, en 2009 Safari pourrait avoir devancé les Chromes des outils de développement en 2014, je prendrais le débogage dans google Chrome Safari n'importe quel jour de la semaine. Chrome Developer tools et Firefox Firebug sont vraiment au top... et, bien que difficile à utiliser encore IE11 s outils de dev sont probablement à la 3ème place (à mon humble avis)
InformationsquelleAutor Chris Brandsma
28

Il y a un débogueur mot-clé dans le JavaScript pour le débogage du code JavaScript. Mettre débogueur; extrait de code dans votre code JavaScript. Il va automatiquement démarrer le débogage du code JavaScript à ce point.

Par exemple:

Suppose que c'est votre test.js fichier
```
function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();
```
- Lorsque le navigateur exécute la page web du développeur de l'option avec l'option de débogage, puis il démarre automatiquement le débogage de la débogueur; point.
- Il devrait être ouvert le développeur de la fenêtre du navigateur.
- Sur Safari ça fonctionne parfois et parfois ne l'est pas. Je suis sûr que c'est quelque chose sur ma fin. FWIW, j'ai activé Automatiquement Afficher l'Inspecteur Web pour JSContexts.
InformationsquelleAutor Suresh Mahawar
20

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é contenu de JS objet. %s a été montré que pour un enregistrement.

Et ce:
```
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 du 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 Console

Happy hacking!
- +1 pour la console.trace(); réponse Différente du reste.
InformationsquelleAutor gavenkoa
12

Commencer avec Firebug et IE Débogueur.

Être prudent avec les débogueurs en JavaScript si. 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é.

InformationsquelleAutor Tom Hubbard
9

Bien que alert(msg); œuvres dans les "je veux juste savoir ce qui se passe sur les" scénarios... chaque développeur a rencontré de cas où vous vous retrouvez dans un (très grand ou sans fin) de la boucle que vous ne pouvez pas sortir de.

Que je recommande au cours du développement si vous voulez un très dans-votre-visage option de débogage, utilisez une option de débogage qui vous permet de sortir. (PS Opera, Safari? et google Chrome? tous ont ce disponible dans les boîtes de dialogue)
```
//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}
```
Ci-dessus, vous pouvez obtenir votre auto en une large boucle de la fenêtre de débogage, où appuyant sur Entrée/Ok vous permet de sauter à travers chaque message, mais en appuyant sur Escape/Annuler permet de sortir très bien.

InformationsquelleAutor scunliffe
6

- Je utiliser WebKit est menu développeur/console (Safari 4). Il est presque identique à Firebug.

console.log() est le nouveau noir, ce qui est bien mieux que alert().
- Si vous mettez la console.journal sur vous code, n'oubliez pas de les supprimer comme il le fera relâche.
InformationsquelleAutor Ryan Florence
4

Ma première étape est toujours de valider le HTML et vérifier la syntaxe avec JSLint. Si vous devez nettoyer le balisage et valide code JavaScript alors il est temps pour Firebug ou autre débogueur.
- +1 - Incroyablement utile lorsque vous ne pouvez pas utiliser un débogueur.
- href="http://www.jslint.com/lint.html" >Lien cassé 🙁
- Merci!!!! Lien fixe
InformationsquelleAutor Ken
3

Visual Studio 2008 a quelques très bons JavaScript, des outils de débogage. Vous pouvez supprimer un point d'arrêt dans votre code JavaScript côté client et pas à travers elle en utilisant exactement les mêmes outils que vous le code côté serveur. Il n'est pas nécessaire pour l'attacher à un processus ou faire quelque chose de difficile à activer.

InformationsquelleAutor JohnFx
3

- Je utiliser quelques outils: Fiddler, Firebug, et Visual Studio. J'entends Internet Explorer 8 a un bon débogueur intégré.
- Par "Fiddler" voulez-vous dire Fiddler Web Débogueur?
InformationsquelleAutor d34dIO
3

J'ai l'habitude d'utiliser Firebug, jusqu'Internet Explorer 8 est sorti. Je ne suis pas un grand fan d'Internet Explorer, mais après avoir passé quelques temps avec la fonction intégrée dans les outils de développement, qui comprend un très beau débogueur, il semble inutile d'utiliser autre chose. Je tire mon chapeau à Microsoft, ils ont fait un travail fantastique sur cet outil.
- Pour la base de débogage, la IE8 débogueur a adapté la plupart de mes besoins. Cependant, si vous faites une sorte de test de performances, vous allez rapidement trouver IE manque. J'avais un projet récemment qui fait appel lourds javascript, et nous avons vraiment besoin de couper les choses pour inférieure systèmes, comme nous l'avons été en cours d'exécution dans le redoutable "erreur de script ne répond pas". Firebug est inestimable dans ce cas, parce que j'ai été en mesure d'exécuter la console.profil() méthode pour comprendre où tout mon temps était consacré.
- La IE8 débogueur a également un profil caractéristique (mais pas aussi graphique que FireBug) qui fournit de l'arbre d'appel, nombre d'appels et le temps passé sur chaque méthode. J'ai trouvé ce suffisant pour l'isolement qui code JS est trop longue.
InformationsquelleAutor James
3

Vous pouvez également consulter YUI Enregistreur. Tout ce que vous avez à faire pour l'utiliser est d'inclure un couple de balises dans votre code HTML. C'est un complément utile à Firebug, qui est plus ou moins un doit.
- Ne pas jQuery ont des fonctionnalités similaires?
InformationsquelleAutor Rob Lund
2

J'ai trouvé la nouvelle version d'Internet Explorer 8 (appuyez sur F12) est très bon le débogage du code JavaScript.

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

InformationsquelleAutor J.W.
2

En plus de l'aide de Visual Studio débogueur JavaScript, j'ai écrit ma propre panneau simple que je inclure une page. C'est simplement comme le Fenêtre exécution de Visual Studio. Je peux changer mes valeurs des variables, appeler mes fonctions, et de voir les valeurs des variables. Simplement, il évalue le code écrit dans le champ de texte.

InformationsquelleAutor Canavar
2

Je suis en utilisant Venkman, un débogueur JavaScript pour XUL applications.

InformationsquelleAutor kuy
2

En plus de Firebug et un navigateur natif developer extensions JetBrains WebStorm l'IDE vient avec débogage à distance de soutien pour Firefox et Chrome (Extension nécessaire) construit en.

Prend également en charge:
- coffescript: comment déboguer coffeescript en node.js avec webstorm 6 source des cartes
- node.js
Options à tester cette gratuitement sont le 30 procès ou à l'aide d'un L'Accès Anticipé À La Version.

InformationsquelleAutor mxfh
2

Si vous utilisez Visual Studio, il suffit de mettre debugger; ci-dessus le code que vous souhaitez déboguer. Au cours de l'exécution de la commande pause à cet endroit, et vous pouvez déboguer étape par étape à partir de là.

InformationsquelleAutor Estefany Velez
1

Comme avec la plupart des réponses, ça dépend vraiment: Qu'essayez-vous d'atteindre avec votre débogage? Le développement de base, résolution de problèmes de performances? Pour le développement de base, toutes les réponses précédentes sont plus que suffisants.

Pour les tests de performances plus précisément, je vous recommande de Firebug. Être en mesure de profil de méthodes qui sont les plus coûteux en termes de temps a été d'une valeur inestimable pour un certain nombre de projets, j'ai travaillé sur. Côté client bibliothèques deviennent de plus en plus robuste, et de plus en plus la responsabilité est placé à côté client en général, ce type de débogage et profilage va le devenir encore plus utile.

Firebug Console API:
http://getfirebug.com/console.html

InformationsquelleAutor Gavin
0

En appuyant sur F12 les développeurs web peuvent rapidement débogage du code JavaScript sans quitter le navigateur. Il est intégré dans chaque installation de Windows.

Dans Internet Explorer 11, les outils F12 fournit des outils de débogage comme les points d'arrêt, de regarder et de variable locale de la visualisation, et une console
pour les messages et immédiate de l'exécution de code.
- s'il vous plaît voir ce lien: w3schools.com/js/js_debugging.asp trop
InformationsquelleAutor Reza

Vous devez vous connecter pour publier un commentaire.

Firefox

Chrome

Internet Explorer