1. débogueur ;
J'ai également dit auparavant que vous pouvez ajouter un debugger; au code JavaScript pour créer manuellement un effet de point d'arrêt.
Besoin de points d'arrêt conditionnels ? Il vous suffit de l'entourer d'instructions if :
Copiez le code Le code est le suivant : if (somethingHappens) {
débogueur ;
}
Mais n'oubliez pas de les supprimer avant la sortie du programme.
2. Définissez un point d'arrêt à déclencher lorsque le nœud DOM changeParfois, vous constaterez que le DOM n'est pas sous votre contrôle et subira des changements étranges, ce qui rendra difficile la recherche de la source du problème.
Il existe une fonction très utile dans les outils de développement de Google Chrome qui peut spécifiquement gérer cette situation, appelée "Break on..." . Vous pouvez voir cet élément de menu en cliquant avec le bouton droit sur le nœud DOM.
La condition de déclenchement du point d'arrêt peut être définie sur la suppression du nœud, toute modification des attributs du nœud ou une modification de l'un de ses nœuds enfants.
3. Points d'arrêt AjaxLes points d'arrêt XHR, ou points d'arrêt Ajax, comme leur nom l'indique, nous permettent de définir un point d'arrêt qui déclenche des appels Ajax spécifiques lorsqu'ils se produisent.
Cette astuce est très efficace lorsque vous déboguez le trafic réseau pour les applications Web.
4. Environnement de simulation d'appareil mobileGoogle Chrome dispose d'outils très intéressants pour simuler des appareils mobiles afin de nous aider à déboguer le fonctionnement des programmes sur les appareils mobiles.
La façon de le trouver est la suivante : appuyez sur F12 pour afficher les outils de développement, puis appuyez sur la touche ESC (l'onglet actuel ne peut pas être Console), vous verrez apparaître la deuxième couche de la fenêtre de débogage, et il y a divers dispositifs de simulation dans le Onglet Émulation Facultatif.
Bien sûr, cela ne se transforme pas en un véritable iPhone, il simule simplement les dimensions, les événements tactiles et les valeurs de l'agent utilisateur du navigateur.
5. Utilisez les audits pour améliorer votre site WebYSlow est un excellent outil. Les outils de développement de Google Chrome disposent également d'un outil très similaire appelé Audits .
Il peut rapidement auditer votre site Web et vous donner des suggestions et des méthodes très pratiques et efficaces pour optimiser votre site Web.
Y en a-t-il d'autres ?Je ne sais pas comment je évoluerais sans ces outils. J'écrirai également d'autres conseils à ce sujet - restez à l'écoute de mon dernier article une fois que je le saurai.