9Techniques de débogage JavaScript avec les outils de débogage intégrés de Chrome et Firefox

Nous utilisons généralement Chrome ou Firefox pour déboguer JavaScript, cet article énumère quelques astuces pour déboguer JavaScript. En les maîtrisant, nous passerons moins de temps à résoudre les erreurs et les bugs, ce qui augmentera l'efficacité du développement.}

1. debugger

En plus de console.log, debugger est notre outil de débogage préféré et rapide. Après l'exécution du code, Chrome s'arrêtera automatiquement. Vous pouvez même le encapsuler dans une condition pour qu'il ne s'exécute que lorsque nécessaire.

if (thisThing) { 
 debugger; 
}

2. Afficher les objets en tableau

Parfois, il y a un ensemble d'objets complexes à consulter. Vous pouvez les afficher avec console.log et les faire défiler, ou utiliser console.table pour les étendre, ce qui rend plus facile de voir ce qui est traité !

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

3. Utiliser différentes tailles d'écran

Il est formidable d'installer différents simulateurs de périphériques mobiles sur le bureau, mais dans la réalité, cela n'est pas possible. Comment ajuster la taille de la fenêtre ? Chrome propose tout ce dont vous avez besoin. Allez dans la console et cliquez sur le bouton 'Changer de mode appareil'. Observnez les changements de la fenêtre !

　

4. Utiliser console.time() et console.timeEnd() pour tester les boucles

Il est très utile de connaître le temps d'exécution de certains codes, en particulier lors du débogage de boucles lentes. Vous pouvez même définir plusieurs timers en passant différents paramètres à la méthode. Voyons comment cela fonctionne :

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

Le résultat de l'exécution est le suivant :

　

5. Formater le code avant de déboguer JavaScript

Parfois, le code peut poser des problèmes dans l'environnement de production, mais vos source maps ne sont pas déployés dans l'environnement de production. Ne vous inquiétez pas. Chrome peut formater vos fichiers JavaScript. Bien que le code formaté ne soit pas aussi utile que le code réel, il permet au moins de voir ce qui s'est passé. Cliquez sur le bouton {} du visualiseur de code source dans le console de Chrome.

　

6. Observer l'appel de la fonction spécifique et ses paramètres
Dans la console de Chrome, vous pouvez observer une fonction spécifique. Chaque fois que cette fonction est appelée, les arguments passés sont affichés.

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

Sortie :

　

C'est une bonne méthode pour voir les paramètres passés à la fonction. Mais, si le console nous indique le nombre d'arguments formels, ce serait encore mieux. Dans l'exemple suivant, func1attentes3paramètre, mais seules les valeurs suivantes ont été transmises2paramètre. Si ce paramètre n'est pas traité dans le code, il est probable que des erreurs se produisent.

7Accès rapide aux éléments dans la console

La méthode la plus rapide que vous pouvez utiliser dans la console pour querySelector est d'utiliser le symbole dollar, $('css-selector') retourne le premier élément correspondant au sélecteur CSS. $$('css-selector') retourne toutes les correspondances. Si vous utilisez souvent un élément, vous pouvez le sauvegarder dans une variable.

　

8Postman est excellent (mais Firefox est plus rapide)

De nombreux développeurs utilisent Postman pour afficher les demandes AJAX. Postman est vraiment excellent. Mais ouvrir une nouvelle fenêtre, écrire l'objet de la demande, puis revenir pour les tester, semble être une tâche ennuyeuse.

Parfois, utiliser un navigateur est plus facile.

Lorsque vous utilisez un navigateur pour afficher, si vous demandez une page de vérification de mot de passe, ne vous inquiétez pas des cookies d'authentification. Voici comment éditer et réenvoyer une demande dans Firefox.

Ouvrez la console et passez à l'onglet Réseau. Faites un clic droit sur la demande requise, puis sélectionnez Éditer et réenvoyer. Vous pouvez maintenant modifier ce que vous voulez. Modifiez le titre et éditez les paramètres, puis cliquez sur Réenvoyer.

Voici deux demandes lancées avec des attributs différents :

　

9Interruption des modifications de nœuds

DOM est une chose amusante. Parfois, il change, et vous ne savez pas pourquoi. Mais, lorsque vous déboguez JavaScript, Chrome peut arrêter lorsque des éléments DOM changent. Vous pouvez même surveiller ses attributs. Dans le console de Chrome, faites un clic droit sur l'élément, puis sélectionnez Définir et choisir d'arrêter :

Les outils de débogage de page Web intégrés à Chrome et Firefox sont très puissants, de nombreuses fonctionnalités pratiques attendent encore à être découvertes par les utilisateurs.