Explication détaillée de plus d'une douzaine de conseils pratiques de débogage JavaScript avec des codes graphiques-js tutoriel-php.cn

Explication détaillée de plus d'une douzaine de conseils pratiques de débogage JavaScript avec des codes graphiques

黄舟

Libérer： 2017-03-07 14:46:04

original

1132 Les gens l'ont consulté

'debugger;'

En plus de console.log, debugger est un autre outil que j'aime pour un débogage rapide. Après avoir ajouté le débogueur au code, Chrome l'insérera automatiquement. s'arrête quelque part, un peu comme les points d'arrêt en C ou Java. Vous pouvez également insérer cette instruction de débogage dans certains contrôles conditionnels, tels que :

if (thisThing) {
    debugger;
}

Copier après la connexion

Afficher les objets sous forme de tableau

Parfois, nous avons besoin de voir les informations détaillées de certains objets complexes. La méthode consiste à utiliser console.log et à l'afficher dans une liste, à faire défiler de haut en bas pour parcourir. Cependant, il semble qu'il serait préférable d'utiliser console.table pour l'afficher sous forme de liste. Cela ressemble probablement à ceci :

var animals = [
    { animal: &#39;Horse&#39;, name: &#39;Henry&#39;, age: 43 },
    { animal: &#39;Dog&#39;, name: &#39;Fred&#39;, age: 13 },
    { animal: &#39;Cat&#39;, name: &#39;Frodo&#39;, age: 18 }
];

console.table(animals);

Copier après la connexion

Test de plusieurs tailles d'écran<. 🎜>

Chrome a Une fonctionnalité très intéressante est la possibilité de simuler les tailles de différents appareils. Cliquez sur le bouton

dans l'inspecteur de Chrome, puis vous pouvez déboguer sous différentes tailles d'écran d'appareil : toggle device mode<. 🎜>

Sélectionner rapidement un élément DOM dans la console

Sélectionner un élément DOM dans le panneau de sélection des éléments, puis utiliser l'élément dans la console est également une opération très courante que l'inspecteur Chrome mettra en cache. les 5 derniers éléments DOM dans son historique, vous pouvez rapidement vous associer à l'élément en utilisant des méthodes similaires à

dans Shell. Par exemple, dans la liste ci-dessous, il y a les éléments 'item-4', 'item-3', 'item-2', 'item-1', 'item-0'. Vous pouvez l'utiliser comme ceci : <🎜. >

Récupérer l'historique de suivi des appels d'une certaine fonction

Le framework JavaScript facilite grandement notre développement, mais il apporte également un grand nombre de fonctions prédéfinies, comme la création View , événements de liaison, etc., de sorte qu'il ne nous est pas facile de suivre le processus d'appel de nos fonctions personnalisées. Bien que JavaScript ne soit pas un langage très rigoureux, il peut parfois être difficile de comprendre ce qui se passe, surtout lorsque vous devez réviser le code d'autres personnes. C'est à ce moment-là que

entre en jeu, il peut vous aider à suivre les appels de fonction. Par exemple, dans le code suivant, nous devons retracer le processus d'appel de funcZ dans l'objet car :

console.trace Ici, vous pouvez clairement voir que func1 appelle func2, puis appelle func4, et func4 crée Car L'instance appelle ensuite car.funcX.

var car;

var func1 = function() {
func2();
}

var func2 = function() {
func4();
}

var func3 = function() {

}

var func4 = function() {
car = new Car();
car.funcX();
}

var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;

this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}

this.funcZ = function() {
console.trace(‘trace car’)
}
}

func1();

Copier après la connexion

Formater le code compressé

Parfois, nous trouvons des problèmes inexplicables dans l'environnement de production, puis oublions de mettre les sourcesmaps sur ce serveur, ou de regarder ceux d'autres personnes. Quand j'ai regardé le code source de sur le site Web, j'ai vu un tas de code que je ne savais pas quoi dire, comme l'image ci-dessous. Chrome nous fournit un outil anti-compression très convivial pour améliorer la lisibilité du code. Il peut être utilisé comme ceci :

Localiser rapidement les fonctions de débogage.

Lorsque nous voulons ajouter un point d'arrêt dans une fonction, nous choisissons généralement de faire ceci :

dans la console et le script s'arrêtera automatiquement là où la fonction correspondante est spécifiée. Un défaut de cette méthode est qu'elle ne peut pas s'arrêter à une fonction privée ou à une fonction anonyme, elle doit donc quand même varier de temps en temps :

debug(funcName)

var func1 = function() {
func2();
};

var Car = function() {
this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}
}

var car = new Car();

Copier après la connexion

Interdire sans rapport scripts en cours d'exécution

Lorsque nous développerons des pages Web modernes, nous utiliserons des frameworks ou des bibliothèques tiers. Presque tous ont été testés et comportent relativement peu de bogues. Cependant, lorsque nous débogueons nos propres scripts, nous pouvons accidentellement accéder à ces fichiers, provoquant des tâches de débogage supplémentaires. La solution est d'interdire l'exécution de ces scripts qui ne nécessitent pas de débogage. Pour plus de détails, consultez cet article : javascript-debugging-with-black-box.

在较复杂的调试情况下发现关键元素

在一些复杂的调试环境下我们可能要输出很多行的内容，这时候我们习惯性的会用console.log, console.debug, console.warn, console.info, console.error这些来进行区分，然后就可以在Inspector中进行过滤。不过有时候我们还是希望能够自定义显示样式，你可以用CSS来定义个性化的信息样式：

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}

console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

Copier après la connexion