Console.log (); Comment et déboguer javascript
Ok, j’espère que cette question n’est pas trop élémentaire pour vous.
Je connais assez jQuery pour me créer des problèmes, ce qui signifie que je peux saisir des éléments et les manipuler, écrire mes propres petites fonctions d'interactivité et autres. Mais alors quelque chose ne se passe pas comme prévu, avant de poser des questions à stackoverflow et d'obtenir des réponses qui me font me gifler au front, j'aimerais le déboguer moi-même et j'en ai marre d'insérer alert(); dans mon code. En lisant sur le sujet, il est fait mention de console.log();, console.info(); et autres, mais je ne trouve aucune ressource qui explique comment les utiliser dans des scénarios réels pour le débogage.
Est-ce que l'un de vous connaît une bonne ressource ou un bon tutoriel (ne craignant pas la lecture d'un livre) pouvant expliquer comment utiliser ces fonctions pour le profane. Il semble que les tutoriels et ceux que je découvre sont soit avancés, soit simplement superficiels et ne vous montrent pas comment les utiliser. Je comprends que je peux insérer console.log(); et il va cracher des informations dans la console pour firebug ou element inspector. Mais que se passe-t-il si ma fonction main cuite fait quelque chose d’inattendu quelque part dans la hiérarchie, comment puis-je trouver le problème lorsque le navigateur analyse le javascript.
Toute aide serait grandement appréciée, car je pense que cela m'aidera à comprendre ce qui se passe dans mon code. Je peux donc arrêter de regarder l'écran qui passe "Pourquoi cela ne fonctionne-t-il pas, cela a fonctionné dans la jsfiddle!
console.log () prend simplement ce que vous lui transmettez et l'écrit dans la fenêtre de journal d'une console. Si vous passez dans un tableau, vous pourrez inspecter le contenu du tableau. Passer dans un objet, vous pouvez examiner les attributs/méthodes de l'objet. passer dans une chaîne, il va enregistrer la chaîne. Fondamentalement, il s'agit de "document.write" mais peut intelligemment séparer ses arguments et les écrire ailleurs.
Il est utile de générer des informations de débogage occasionnelles, mais pas particulièrement si vous avez une quantité énorme de sorties de débogage.
Pour regarder l'exécution d'un script, utilisez plutôt un débogueur, qui vous permet de parcourir le code ligne par ligne. console.log est utilisé lorsque vous devez afficher le contenu de certaines variables pour une inspection ultérieure, mais que vous ne souhaitez pas interrompre l'exécution.
J'aime ajouter ces fonctions dans la tête.
window.log=function(){if(this.console){console.log(Array.prototype.slice.call(arguments));}};
jQuery.fn.log=function (msg){console.log("%s: %o", msg,this);return this;};
Maintenant, le journal ne casse pas IE Je peux l'activer ou le désactiver à un endroit.
$(".classname").log(); //show an array of all elements with classname class
Apprenez à utiliser un débogueur javascript. Venkman (pour Firefox) ou Web Inspector (composant de Chome & Safari) sont d'excellents outils pour déboguer ce qui se passe.
Vous pouvez définir des points d'arrêt et interroger l'état de la machine lorsque vous interagissez avec votre script. Parcourez des parties de votre code pour vous assurer que tout fonctionne comme prévu, etc.
Voici une excellente écriture de WebMonkey sur le débogage JavaScript pour les débutants . C'est un bon endroit pour commencer.
console.log() vous permet essentiellement de générer des variables dans le débogueur javascript de votre choix au lieu de faire clignoter une alert() chaque fois que vous souhaitez inspecter quelque chose. convertir des éléments en chaînes comme un alert().
Les points d'arrêt et en particulier les points d'arrêt conditionnels sont vos amis.
Vous pouvez aussi écrire une petite fonction comme assert qui vérifie les valeurs et génère des exceptions si nécessaire dans la version debug du site (certaines variables sont définies sur true ou url contient des paramètres)