10 fonctionnalités de l'outil de développement Chrome que vous avez peut-être manquées

Voulez-vous devenir un expert des outils de développement Google Chrome? Jetez un coup d’œil à ces fonctionnalités utiles que vous avez peut-être manquées.

Google Chrome est un navigateur très apprécié des développeurs front-end. Grâce à ses outils de développement robustes, il n’est pas difficile de comprendre pourquoi. Mais avec une telle sélection de fonctionnalités, les développeurs peuvent facilement se tourner vers leurs favoris habituels et passer à côté d’outils moins connus qui accélèrent et simplifient le débogage. En travaillant sur un projet récent, je me suis rendu compte que j'étais dans cette position et j'ai passé un peu de temps à fouiller dans Chrome DevTools. Voici quelques-uns des conseils et des fonctionnalités les plus utiles que j'ai trouvés pour vous aider à tirer le meilleur parti de ce puissant outil.

Il existe plusieurs façons d'accéder à DevTools. La première consiste à ouvrir le menu Chrome dans la fenêtre du navigateur, puis à cliquer sur "Autres outils", puis sur "Outils de développement". Un moyen plus rapide consiste à cliquer n'importe où sur la page avec le bouton droit de la souris (ou à cliquer sur Commande sur un Mac), puis à sélectionner «Inspecter», ce qui fera apparaître l'élément sur lequel vous avez cliqué dans l'onglet Éléments de l'outil de développement. Le moyen le plus rapide consiste toutefois à utiliser un raccourci clavier: Contrôle + Shift + I sur un PC et de commande + . ] Option + I sur un Mac. Il existe également plusieurs autres raccourcis utiles à connaître:

Pour une liste complète des raccourcis, voir la documentation officielle .

2. Ajouter des points d'arrêt inversés dans l'onglet Eléments

Si vous êtes en train de déboguer une page et que vous suspectez qu'un élément spécifique en est la cause, votre premier instinct peut être d'accéder à l'onglet Sources. Mais il est également possible de créer un point d'arrêt à l'envers, en sélectionnant l'élément plutôt que la ligne de code. Cela peut être particulièrement utile si un élément disparaît ou apparaît lorsque vous ne vous y attendez pas et que votre code modifie plusieurs parties du DOM, ce qui vous empêche de voir exactement où quelque chose ne va pas. Un point d'arrêt DOM vous permet d'accéder directement à la source du problème.

Pour créer un point d'arrêt DOM, utilisez l'inspecteur d'élément (l'icône en forme de flèche située dans le coin supérieur gauche de l'outil DevTools) pour cliquer ou inspecter une pièce. de la page. Puis cliquez avec le bouton droit de la souris (ou cliquez en maintenant la touche Commande enfoncée sur un Mac) sur la ligne de code en surbrillance et sélectionnez «Interrompre…». Trois options s’offrent à vous:

• Les modifications de sous-arborescence sont déclenchées lorsqu’un enfant de l’élément sélectionné est supprimé ou ajouté, ou lorsque le contenu d’un enfant est modifié.
      
• Les modifications d'attribut se déclenchent lorsqu'un attribut de l'élément sélectionné est supprimé ou ajouté, ou lorsque sa valeur est modifiée.
      
• La suppression de nœud se déclenche lorsque l'élément sélectionné est supprimé.
      

3. Ouvrez un sélecteur de couleur ou modifiez le format de couleur dans l’onglet Styles des éléments

Si vous avez sélectionné un élément ayant un attribut color, cette couleur sera visible dans la barre située à droite de l’onglet Eléments. Vous pouvez activer ou désactiver les styles de votre élément inspecté à l'aide des cases à cocher, ou les éditer en double-cliquant dessus. Pour un attribut de couleur, il est également possible d’ouvrir un sélecteur de couleur en double-cliquant sur le carré coloré à côté de l’attribut. Si vous souhaitez utiliser une couleur de la palette de couleurs existante de la page, Chrome vous facilite la tâche. cliquez simplement sur les flèches à gauche de la palette de couleurs et utilisez les couleurs de la palette Couleurs de la page. Enfin, si vous souhaitez voir la couleur dans un format différent, en basculant entre hex et RGBA, par exemple, vous pouvez le faire en maintenant la touche Maj enfoncée en cliquant sur le carré de couleur.

4 . Accéder à un élément d'inspection dans la console à l'aide de la variable temporaire $ 0

Si vous souhaitez sélectionner un élément dans l'onglet de votre console, vous pouvez éviter les problèmes avec document.getElementByID . Utilisez l'inspecteur d'éléments de l'onglet Eléments pour sélectionner le nœud, puis cliquez sur l'onglet Console et utilisez l'élément temporaire $ 0 . Vous pouvez également sélectionner l'élément parent à l'aide de 1 $ et son élément parent à l'aide de 2 $ etc.

5. Surveiller les événements sur un élément spécifique à l'aide de monitorEvents () dans la console

Pour surveiller les événements sur un nœud ou un élément, vous pouvez utiliser votre console. La fonction monitorEvents () prend un ID HTML et peut également recevoir des types d'événements spécifiques. Par exemple, pour surveiller tous les événements survenant dans le corps du document, vous pouvez utiliser monitorEvents (document.body) ou pour surveiller uniquement les clics sur le corps, utilisez monitorEvents (document.body, ' cliquez ') ; la console enregistre l'objet événement afin que vous puissiez voir ses propriétés. Vous pouvez également combiner cela avec la dernière astuce en sélectionnant d'abord un élément à l'aide de l'inspecteur d'élément, puis en tapant monitorEvents ($ 0) . Utilisez unmonitorEvents (document.body) pour arrêter.

6. Définition d'un point d'arrêt au début d'une fonction à l'aide de la console

Si vous souhaitez déboguer une fonction spécifique, vous pouvez le faire dans la console elle-même. Cela peut vous faire gagner du temps si vous êtes pressé et que vous ne voulez pas rechercher une fonction spécifique dans le panneau Sources, ou si vous ne possédez pas les fichiers source (par exemple, si vous avez créé la fonction dans la console). la première place). Utilisez la fonction debug () en transmettant le nom de la fonction sélectionnée à debug () comme argument, comme ceci: debug (myFunctionName) . Pour supprimer le point d'arrêt, utilisez undebug (myFunctionName) .

7. Dans l’onglet Réseau, voir les initiateurs et les dépendances d’une demande en maintenant Shift

. Pour voir les initiateurs et les dépendances d’une demande spécifique, vous pouvez utiliser l’onglet Réseau. Dans l'onglet, cliquez sur une demande dans le tableau des demandes et maintenez Shift enfoncé. les initiateurs sont surlignés en vert et les dépendances en surbrillance rouge. Vous pouvez en lire plus dans la documentation officielle .

8. Ajouter des points d'arrêt conditionnels à l'aide d'un clic droit

Il est possible de créer des points d'arrêt conditionnels, qui ne se déclenchent que lorsqu'une condition donnée est remplie. Cela peut être très utile dans les situations de débogage dans lesquelles vous avez plusieurs points d'arrêt mais que vous ne souhaitez intégrer à une fonction que dans certaines conditions, comme lorsqu'une certaine variable est vraie. Pour ce faire, créez le point d'arrêt comme vous le feriez normalement, en cliquant sur le numéro de ligne sur lequel vous souhaitez insérer une rupture dans le panneau Sources. Cliquez ensuite avec le bouton droit de la souris sur le point d'arrêt (ou cliquez en maintenant la touche Commande enfoncée sur un Mac), puis sélectionnez "Modifier le point d'arrêt". Ecrivez une condition dans la boîte de dialogue qui apparaît, telle que myVar == true ; le point d'arrêt ne se déclenche que lorsque cette condition est remplie.

9. Ajouter une ligne médiane de point de rupture en entrant la ligne

Il est parfois utile de rompre une partie de la ligne plutôt que la ligne elle-même. Cela peut vous faire gagner du temps, en passant à chaque partie du code de cette ligne ou, plus important encore, à une interruption des fonctions de rappel sur une ligne, comme dans doSomething dans la fonction suivante: setTimeout (() => {doQuelque chose (a, b);}, 1000) .

Pour créer un point d'arrêt à la ligne médiane, accédez à la ligne de code de votre choix dans le panneau Sources. Cliquez sur la partie de la ligne que vous souhaitez interrompre, comme si vous souhaitiez modifier le texte. Ensuite, cliquez sur le numéro de ligne pour créer un point d'arrêt. Plusieurs flèches de point d'arrêt gris et plus petites apparaissent, chacune sur une partie différente de la ligne. Cliquez sur celui du point de la ligne où vous souhaitez effectuer une pause pour définir votre point d'arrêt au milieu de la ligne.

10. Evaluation des expressions et des variables lorsque la page est suspendue

Cette astuce est l'une des plus utiles que j'ai rencontrées pour le débogage. Lorsque votre page est bloquée sur un point d'arrêt, vous pouvez voir la valeur actuelle d'une expression ou d'une variable de la page en survolant celle-ci. Pour les expressions combinées, sélectionnez d'abord l'expression entière ou partielle, puis survolez-la.

Cela est particulièrement utile lorsqu'une de vos variables ne retourne pas comme elle le devrait, car vous pouvez effectuer le suivi à chaque étape d'une fonction. ou ligne de code, quelle est la valeur de la variable et quand elle change. Bien que cette astuce soit peut-être la plus simple à utiliser, elle est sans doute la plus utile pour frustrer les scénarios de débogage.

Ces astuces sont loin d’être les seules fonctionnalités offertes par Chrome DevTools. Si vous souhaitez en savoir plus sur les outils de développement et sur ce qu’ils peuvent faire, je vous encourage à lire la documentation Google officielle de Google Chrome ou à consulter l’atelier de Jon Kuperman intitulé Maîtriser les outils de développement de Chrome sur Frontend Masters. Bien sûr, le meilleur moyen de vous familiariser avec ces astuces, parmi les nombreuses autres, consiste à les utiliser au fur et à mesure que vous développez et corrigez. Je vous encourage à essayer ces astuces et à voir lesquelles d'entre elles rendront votre expérience de programmation plus facile et plus efficace.

Pour plus d'informations sur la création d'excellentes applications Web:

Vous voulez en savoir plus sur la création d'excellentes interfaces utilisateur? Découvrez Kendo UI – notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans.