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

'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;
}

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: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

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();

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 :

Recherchez la ligne spécifiée dans l'inspecteur, puis ajoutez un point d'arrêt
Ajouter un appel de débogueur dans le script
Cependant, il y a un petit problème avec les deux méthodes, c'est-à-dire qu'il faut aller dans le fichier de script correspondant puis trouvez la ligne correspondante, ce sera donc plus gênant. Voici une méthode relativement rapide, qui consiste à utiliser

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();

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’);

在console.log()中你可以使用%s来代表一个字符串 , %i 来代表数字， 以及 %c 来代表自定义的样式。

监测指定函数的调用与参数

在Chrome中可以监测指定函数的调用情况以及参数：

var func1 = function(x, y, z) {
};

这种方式能够让你实时监控到底啥参数被传入到了指定函数中。

Console中使用$进行元素查询

在Console中也可以使用来进行类似于querySelector那样基于CSS选择器的查询，(‘css-selector’) 会返回满足匹配的第一个元素，而$$(‘css-selector’) 会返回全部匹配元素。注意，如果你会多次使用到元素，那么别忘了将它们存入变量中。

Postman

很多人习惯用Postman进行API调试或者发起Ajax请求，不过别忘了你浏览器自带的也能做这个，并且你也不需要担心啥认证啊这些，因为Cookie都是自带帮你传送的，这些只要在network这个tab里就能进行，大概这样子：

DOM变化检测

DOM有时候还是很操蛋的，有时候压根不知道啥时候就变了，不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你，你可以监测属性变化等等：

 以上就是关于十几个 实用的 JavaScript 调试小技巧图文代码详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！