Comment déboguez-vous les programmes JavaScript? La méthode la plus primitive consiste à utiliser Alert () pour imprimer du contenu sur la page, et une méthode légèrement améliorée consiste à utiliser Console.log () pour sortir du contenu sur la console JavaScript. Eh bien, l'utilisation de ces deux méthodes a en effet résolu de nombreux problèmes de débogage des petits scripts JavaScript. Cependant, il serait dommage de ne pas utiliser d'outils de développement qui deviennent de plus en plus puissants en Chrome. Cet article présente principalement les fonctions de paramètre et de débogage JavaScript, c'est-à-dire le panneau Sources (anciennement appelé scripts). Si vous maîtrisez diverses techniques de débogage Java dans Eclipse, les concepts ici sont similaires. La version Chrome utilisée lors de la rédaction de cet article est de 25.0.1364.172.
Environnement de base
À gauche de SourcesPanel se trouve la source de contenu, y compris diverses ressources dans la page. Parmi eux, il est divisé en sources et scripts de contenu. Les sources sont diverses ressources contenues dans la page elle-même. Ils sont organisés selon les domaines qui apparaissent sur la page, à quoi nous devons faire attention. Les fichiers JS chargés de manière asynchrone apparaîtront également ici après le chargement. Les scripts de contenu sont une extension chromée qui est organisée en fonction de l'ID d'extension. Ce type d'extension est en fait une ressource intégrée dans la page, et ils peuvent également lire et écrire DOM. Seuls les développeurs qui écrivent et déboguent comme celui-ci devraient s'en soucier. Si votre navigateur n'a pas d'installation, les scripts de contenu ne verront rien.
La zone principale du panneau des sources est utilisée pour afficher le contenu du fichier de ressources à gauche.
Sur le côté droit du panneau Sources se trouve la zone fonctionnelle de débogage. La ligne supérieure de boutons est une pause / continue, étape par étape, étape par étape, sauter étape par étape, désactiver / activer tous les points d'arrêt. Vous trouverez ci-dessous divers domaines fonctionnels spécifiques. Cela sera introduit plus tard.
Notez que les zones des deux côtés peuvent rétrécir par défaut et non affichées des deux côtés. Cliquez sur les boutons télescopiques des deux côtés pour afficher. Lorsque la zone de gauche est affichée, la valeur par défaut est de rétrécir automatiquement. Cliquez sur le bouton Pin à côté de lui et il ne se rétractera pas.
Il existe également des boutons de fonctionnalité en bas qui sont très utiles.
Définir les points d'arrêt sur le code source
Grâce à la source de contenu à gauche, ouvrez le fichier JavaScript correspondant, cliquez sur le numéro de ligne de fichier et définissez et supprimez les points d'arrêt. Chaque point d'arrêt ajouté apparaîtra dans la liste des points d'arrêt dans la zone de débogage à droite. Cliquez sur le point d'arrêt de la liste localisera le point d'arrêt dans la zone de contenu. Si vous avez plusieurs fichiers et plusieurs points d'arrêt, il est très pratique de localiser rapidement les points d'arrêt dans la liste des points d'arrêt.
Il y a deux états pour chaque point d'arrêt supplémentaire: activer et désactiver. Les points d'arrêt qui viennent d'être ajoutés sont tous des états activés, et l'état désactivé est de conserver le point d'arrêt mais d'annuler temporairement la fonction de point d'arrêt. Il y a une case à cocher avant chaque point d'arrêt dans la liste des points d'arrêt, et la démontage désactivera le point d'arrêt. Les points d'arrêt peuvent également être désactivés dans le menu à clic droit de la position de point d'arrêt. Vous pouvez également désactiver temporairement tous les points d'arrêt ajoutés sur le bouton du ruban droit, et cliquez dessus pour restaurer l'état d'origine.
Point d'arrêt conditionnel : sélectionnez "Modifier le point d'arrêt ..." dans le menu de clic droit de la position de point d'arrêt pour définir la condition pour déclencher le point d'arrêt, c'est-à-dire, écrivez une expression, et le point d'arrêt ne sera déclenché que lorsque l'expression est vraie. Vérifiez la pile d'appels d'environnement des points d'arrêt (pile d'appels): Lorsque le point d'arrêt s'arrête, la pile d'appels dans la zone de débogage à droite affichera la pile d'appels de méthode où se trouve le point d'arrêt actuel. Par exemple, il existe une fonction g () dans laquelle la fonction f () est appelée, et je définis un point d'arrêt dans f (). Ensuite, lorsque j'exécute la fonction g () dans la console, le point d'arrêt sera déclenché et la pile d'appels sera affichée comme suit:
Le haut est f (), puis g (). Chaque couche de la pile d'appels est appelée un cadre. Cliquez sur chaque trame peut sauter au point d'appel de ce cadre.
De plus, vous pouvez redémarrer l'exécution de la trame actuelle sur le cadre à l'aide du menu de clic droit, c'est-à-dire à partir du début du cadre. Par exemple, sur le cadre de la fonction f (), le point d'arrêt passera au début de f () et réexécutera, et la valeur variable dans le contexte sera également restaurée. De cette façon, en combinant des fonctions telles que la modification des variables et l'édition de code, vous pouvez déboguer à plusieurs reprises dans le cadre actuel sans rafraîchir la page et déclencher à nouveau le point d'arrêt. Afficher les variables
Sous la liste de piles d'appels se trouve la liste des variables de portée, où vous pouvez afficher les valeurs des variables locales et globales pour le moment. Exécuter le code sélectionné
Pendant le débogage des points d'arrêt, vous pouvez utiliser la souris pour sélectionner la variable ou l'expression que vous souhaitez afficher, puis cliquez avec le bouton droit sur le menu pour exécuter "Évaluer dans Console" pour voir la valeur actuelle de l'expression. Le bouton "Interruption / Continuer" en haut de la zone de débogage sur le côté droit de l'instruction JavaScript à exécuter la prochaine fois aura une fonction. Lorsqu'il n'y a pas de point d'arrêt déclenché, en cliquant sur ce bouton, il entrera dans l'état d'interruption "de préparation". La prochaine fois que la page exécutera l'instruction JavaScript, elle interrompra automatiquement, comme le code qui sera exécuté lorsqu'une action de clic est déclenchée. Modification temporaire du code JavaScript. Nous nous habituons généralement à cette boucle lors du débogage du code: modifiez le code → actualiser la page → Revérifier. Mais en fait, le contenu du fichier JS peut être temporairement modifié dans Chrome. Enregistrer (Ctrl + S) peut prendre effet immédiatement et le refaire immédiatement avec la console et d'autres fonctions. Mais veuillez noter que cette modification est temporaire et que la modification de la page de rafraîchissement aura disparu.
Point de rupture dans l'exception
Vous pouvez voir le bouton sous l'interface. Il s'agit d'un commutateur qui définit si le programme est interrompu lorsqu'il rencontre une exception lorsqu'il s'exécute. Cliquez sur ce bouton basculer entre 3 états:
Par défaut, aucune interruption ne sera rencontrée
Toutes les exceptions seront interrompues, y compris les situations capturées
Uniquement interrompre si une exception non revêtue se produit
Expliquez principalement la différence entre l'état 2 et l'état 3
essayer{
lancer «une exception»;
} catch (e) {
console.log (e);
}
Le code dans l'essai ci-dessus rencontrera une exception, mais le code de capture derrière peut attraper l'exception. Si toutes les exceptions sont interrompues, le code interrompra automatiquement lorsqu'il sera exécuté dans l'instruction Throw qui produira une exception; Et s'il est interrompu uniquement lorsqu'il rencontre une exception non capturée, elle n'interrompra pas ici. Généralement, nous serons plus préoccupés par la rencontre des exceptions non prises.
Définir les points d'arrêt sur les éléments DOM
Parfois, nous devons écouter un certain DOM modifié sans nous soucier de la ligne de code modifiée (ou il peut y avoir de nombreux endroits qui seront modifiés). Ensuite, nous pouvons définir des points d'arrêt directement sur le DOM.
Comme le montre la figure, dans le panneau d'éléments de la révision des éléments, vous pouvez définir trois points d'arrêt dans le menu de clic droit sur un élément: une fois que le nœud enfant modifie ses propres attributs et modifie son propre nœud, le point de rupture DOM apparaît dans la liste des points d'arrêt DOM sur le côté droit du panneau Sources. Une fois exécuté pour apporter des modifications correspondantes au DOM, le code s'arrêtera là, comme indiqué dans la figure ci-dessous.
Point de rupture XHR
Il y a un point d'arrêt XHR dans la zone de débogage à droite. Cliquez sur + et entrez la chaîne contenue dans l'URL pour écouter la demande AJAX pour l'URL. Le contenu d'entrée est équivalent au filtre de l'URL. Si rien n'est rempli, écoutez toutes les demandes XHR. Une fois l'appel XHR déclenché, il se brisera à l'endroit où demande.Send () est demandé.
Déclencher le point d'arrêt par type d'événement
La liste des auditeurs d'événements dans la zone de débogage à droite, où divers types d'événements possibles sont répertoriés. Vérifiez le type d'événement correspondant et il interrompra automatiquement lorsque le code JavaScript qui déclenche l'événement de ce type.
Clées de raccourcis de débogage
Les touches de raccourci dans tous les outils de développement peuvent être trouvées dans les paramètres dans le coin inférieur droit de l'interface. F8, F10, F11 ou Shitf + F11 sont généralement utilisés lors du débogage des points d'arrêt, mais les touches de fonction telles que F10 peuvent entrer en conflit avec les touches de raccourci par défaut du système. Peu importe, ils peuvent être remplacés par CMD + /, CMD + ', CMD +; , Shift + cmd +; respectivement. // @ SourceUrl Nom du code produit par Ev. Parfois, un code très dynamique est créé dans le contexte JavaScript actuel sous la forme d'une chaîne via la fonction EVAL (), plutôt que de charger comme un fichier JS distinct. De cette façon, vous ne trouverez pas le fichier dans la zone de contenu de gauche, il est donc difficile de déboguer. En fait, nous ajoutons simplement une ligne "// @ sourceUrl = nom" à la fin du code créé par EVAL pour nommer ce code (le navigateur traitera cette forme spéciale de commentaires spécifiquement), afin qu'il apparaisse dans la zone de contenu à gauche, tout comme vous chargez un fichier JS avec un nom spécifié, vous pouvez définir des points de rupture et Debug. Dans la figure ci-dessous, nous exécutons un morceau de code via EVAL et utilisons SourceUrl pour le nommer dynamicscript.js. Après l'exécution, ce "fichier" apparaît dans la zone de contenu de gauche, et son contenu est le contenu de l'év. Vous pouvez également jeter un œil à cet exemple de nomment du code CoffeeScript compilé à compilation dynamique:
var café = coffeescript.compile (code.value) + "// @ sourceUrl =" + (evalusame.value || "Coffeeeeeeee!");
eval (café);
En fait, // @ SourceUrl peut non seulement être utilisé dans le code EVAL, mais tout fichier JS ou même le code entré par la console JavaScript peut être utilisé, avec le même effet! Le bouton de code de format (joli imprimé) est utilisé pour reformater le code désordonné en code magnifique, tels que certains fichiers JS compressés qui sont essentiellement illisibles ou débogués. Cliquez sur le format, puis sous-formez-le. Avant l'embellissement
Référence embellinée: Chrome Developer Tools Documentation officielle