Conseils de débogage JavaScript que vous ne connaissez peut-être pas

Si vous utilisez une sorte de code, vous devez d'abord comprendre votre outil. Une fois que vous le connaîtrez, il vous aidera grandement à accomplir la tâche. Cet article vous présente quelques techniques de débogage JavaScript que vous ne connaissez peut-être pas. Bien que le débogage JavaScript soit très fastidieux, vous pouvez toujours le résoudre en le moins de temps possible si vous maîtrisez les astuces. J'espère que vous pourrez maîtriser les compétences de débogage JavaScript que vous ne connaissez peut-être pas. Faites un pas de plus dans notre parcours d’accumulation de code.

Nous allons énumérer 14 Conseils de débogage que vous ne connaissez peut-être pas, mais une fois que vous le savez, vous aurez hâte de déboguer la prochaine fois. Utilisez-les quand écrire du code JavaScript !

Commencez maintenant.

La plupart des conseils concernent Chrome Inspector et Firefox, bien que de nombreuses techniques puissent également être utilisées avec d'autres outils d'inspection.

1. 'debugger;'

'debugger' est mon débogueur préféré en plus des outils console.log, simple violence. Écrivez-le simplement dans le code et Chrome s'arrêtera automatiquement là lors de son exécution. Vous pouvez même l'envelopper avec une instruction conditionnelle afin qu'elle ne soit exécutée qu'en cas de besoin.

if (thisThing) {
    debugger;
}

2. Sortir les objets dans un tableau

Oui Parfois, vous pouvez avoir un tas d’objets à regarder. Vous pouvez utiliser console.log pour afficher chaque objet, ou vous pouvez utiliser l'instruction console.table pour les afficher directement dans une table !

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];
 
console.table(animals);

Résultat de sortie :

3. Essayez toutes les tailles

Bien que cela ait l'air cool de mettre toutes sortes de téléphones portables sur la table, c'est très irréaliste. Pourquoi ne pas simplement redimensionner l'interface ? Chrome fournit tout ce dont vous avez besoin. Accédez à l'inspecteur et cliquez sur le bouton « Changer de mode de périphérique » pour pouvoir redimensionner la fenêtre !

4. Comment localiser rapidement les éléments du DOM

Marquez un élément DOM dans le panneau Éléments et utilisez-le dans la concole. L'historique de Chrome Inspector enregistre les cinq derniers éléments, le dernier élément marqué étant marqué comme 0 $, l'avant-dernier élément marqué comme étant marqué comme 1 $, et ainsi de suite.

Si vous marquez les éléments dans l'ordre comme 'item-4', 'item-3', 'item-2', 'item-1', 'item- 0', vous pouvez récupérer le nœud DOM dans la concole :

5 . Utilisez console.time() et console.timeEnd() pour tester le temps de boucle

Cet outil est utilisé lorsque vous souhaitez connaître le temps d'exécution de certains codes. très utile, surtout lorsque vous localisez des boucles qui prennent beaucoup de temps. Vous pouvez même définir plusieurs minuteries via des balises. La démo est la suivante :

console.time('Timer1');
 
var items = [];
 
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
 
console.timeEnd(&#39;Timer1&#39;);

Résultat d'exécution :

6. Obtenez les informations de trace de pile de la fonction

Vous savez peut-être que les frameworks JavaScript génèrent beaucoup de code - rapidement.

Cela crée des événements déclencheurs de vue et vous finissez par vous demander comment l'appel de fonction s'est produit.

JavaScript n'étant pas un langage très structuré, il est parfois difficile de bien comprendre ce qui se passe et quand. A ce moment, c'est au tour de console.trace (uniquement trace dans le terminal) de déboguer JavaScript.

Supposons que vous souhaitiez maintenant voir les informations complètes de trace de pile de l'instance de voiture appelant la fonction funcZ sur la ligne 33 :

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

La ligne 33 va sortie :

你可以看到func1调用了func2, func2又调用了func4。Func4 创建了Car的实例，然后调用了方法car.funcX，等等。

尽管你感觉你对自己的脚本代码非常了解，这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的，你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。

7. 格式化代码使调试 JavaScript 变得容易

有时候你发现产品有一个问题，而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。

8. 快速找到调试函数

来看看怎么在函数中设置断点。

通常情况下有两种方法：

1. 在查看器中找到某行代码并在此添加断点
2. 在脚本中添加 debugger

这两种方法都必须在文件中找到需要调试的那一行。

使用控制台是不太常见的方法。在控制台中使用 debug(funcName)，代码会在停止在进入这里指定的函数时。

这个操作很快，但它不能用于局部函数或匿名函数。不过如果不是这两种情况下，这可能是调试函数最快的方法。（注意：这里并不是在调用 console.debug 函数）。

var func1 = function() {
func2();
};
 
var Car = function() {
this.funcX = function() {
this.funcY();
}
 
this.funcY = function() {
this.funcZ();
}
}
 
var car = new Car();

在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候停止运行：

9.  屏蔽不相关代码

如今，经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此阅读更多关于调试不相关代码（http://raygun.com/blog/javascript-debugging-with-black-box/）。

10. 在复杂的调试过程中寻找重点

在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制台中快速浏览。但有时候，某些JavaScrip调试信息并不是你需要的。

现在，可以自己美化调试信息了。在调试JavaScript时，可以使用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设置自定义样式等等，还有很多更好的console.log()使用方法。 如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥你的想象力！

11. 查看具体的函数调用和它的参数

在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。

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

//....

};

然后输出：

C'est un excellent moyen de voir quels paramètres sont transmis à une fonction. Mais je dois dire que ce serait bien si la console pouvait nous dire de combien de paramètres nous avons besoin. Dans l'exemple ci-dessus, la fonction 1 attend 3 paramètres, mais seuls 2 paramètres sont transmis. Si le code n’est pas géré dans le code, cela peut provoquer un bug.

12. Accédez rapidement aux éléments dans la console

Exécutez querySelector dans la console Un moyen plus rapide est d'utiliser le dollar. signe. $('css-selector') renverra le premier sélecteur CSS correspondant. $$('css-selector') renverra tout. Si vous utilisez un élément plusieurs fois, il mérite d'être traité comme une variable.

13. Postman est génial (mais Firefox est plus rapide)

De nombreux développeurs utilisent Postman pour gérer les requêtes Ajax. Postman est vraiment bon, mais à chaque fois, vous devez ouvrir une nouvelle fenêtre de navigateur et écrire un nouvel objet de requête à tester. C'est en fait un peu ennuyeux.

Parfois, il est plus facile d'utiliser simplement le navigateur que vous utilisez.

De cette façon, si vous souhaitez demander une page sécurisée par mot de passe, vous n'avez plus à vous soucier de la vérification des cookies. C'est ainsi que vous modifiez et renvoyez une demande dans Firefox.

Ouvrez le profileur et accédez à la page réseau, faites un clic droit sur la demande que vous souhaitez traiter, sélectionnez Modifier et renvoyer. Vous pouvez désormais le modifier comme vous le souhaitez. Vous pouvez modifier les informations d'en-tête ou modifier les paramètres, puis cliquer sur Renvoyer.

Maintenant j'envoie deux fois la même demande mais avec des paramètres différents :

14. Interrompre lorsque le nœud change

DOM est une chose intéressante. Parfois, ça change et on ne sait pas pourquoi. Toutefois, si vous devez déboguer JavaScript, Chrome peut suspendre le traitement lorsque les éléments du DOM changent. Vous pouvez même surveiller ses propriétés. Sur le profileur Chrome, cliquez avec le bouton droit sur un élément et sélectionnez l'option Arrêter sur pour utiliser

Ci-dessus sont quelques conseils sur l'utilisation de JS, il y a des amis qui sont faire des recherches ensemble peut en discuter ensemble.

Lecture connexe :

La différence entre JavaScript et ECMAScript

JavaScript implémente la liste déroulante menu Exemples de

24 questions d'entretien JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!