Recommander 5 compétences de débogage JavaScript couramment utilisées_compétences Javascript

J'ai utilisé le débogage printf avant et depuis lors, il me semble toujours être capable de résoudre les bugs plus rapidement de cette façon.
Il existe des situations où de meilleurs outils sont nécessaires, et voici quelques-uns des meilleurs qui, j'en suis sûr, vous seront utiles :

1. débogueur ;

Vous pouvez utiliser l'instruction "debugger;" pour ajouter des points d'arrêt forcés à votre code.
Avez-vous besoin d'une condition de point d'arrêt ? Enveloppez-le simplement dans une clause IF :

Copier le code Le code est le suivant :

si (quelque chose arrive) {
débogueur ;
>

N'oubliez pas de supprimer avant de passer en direct.

2. Déconnectez-vous lorsque le nœud change

Parfois, le DOM semble avoir son propre esprit. Il peut être difficile de trouver la source du problème lorsque des changements incroyables se produisent.
Les développeurs Chrome disposent de compétences très utiles pour déboguer ce problème. C'est ce qu'on appelle "Pause sur..." et vous pouvez le trouver en cliquant avec le bouton droit sur le nœud DOM dans l'onglet Éléments.

Des points d'arrêt peuvent être définis après la suppression d'un nœud, lorsque les propriétés d'un nœud changent ou lorsque les nœuds de son sous-arbre changent.

3. Point d'arrêt Ajax

Les points d'arrêt XHR, ou points d'arrêt Ajax comme je les appelle, permettent également de rompre lorsqu'une requête Ajax attendue est effectuée.
Il s'agit d'un outil formidable pour déboguer le réseau de votre application Web.

4. Simulez différents appareils mobiles

Chrome ajoute des outils d'émulation d'appareils mobiles intégrés qui simplifieront votre travail quotidien.
Sélectionnez n’importe quel onglet non-console pour les trouver, appuyez sur la touche Échap de votre clavier et sélectionnez l’appareil mobile que vous souhaitez toucher.

Vous n'obtiendrez pas un vrai iPhone bien sûr, mais les dimensions, les événements tactiles et l'âge seront tous émulés pour vous.

5. Améliorez votre site grâce à des audits

YSlow est un excellent outil. Chrome inclut également un outil similaire appelé Audits sous Outils de développement.
Utilisez un audit rapide de votre site pour obtenir des conseils d’optimisation utiles et pratiques.

Quoi d'autre ?

Je ne peux pas imaginer développer sans ces outils. J'en publierai davantage au fur et à mesure que j'en découvrirai de nouveaux, alors restez à l'écoute.