Astuces et raccourcis de débogage DevTools (Chrome, Firefox, Edge)

De tous les outils disponibles à portée de main ces jours-ci, DevTools est probablement l'un des plus avancés. Au fil des ans, il est devenu un outil de débogage, de profilage, d'audit et même de prototypage - tous vivant dans la même interface, et toujours à un raccourci clavier. Pourtant, DevTools regorge de joyaux obscurs et de trésors non découverts, vivant en marge des onglets cachés et des paramètres expérimentaux. Réparons ça.

Dans cet article, plongeons dans certaines des fonctionnalités utiles et obscures de DevTools . Nous examinerons tous les navigateurs modernes (Chrome, Firefox, Edge, Safari) et examinerons les outils utiles qu'ils nous fournissent, nous les développeurs Web. Nous nous concentrerons sur celles que nous utilisons fréquemment sur SmashingMag, et sur certaines des petites techniques et stratégies qui nous aident à corriger les bugs embêtants et à écrire un meilleur code.

Création de profils de navigateur

Lorsqu'il s'agit de profiler un site Web pour ses performances ou de suivre un problème d'accessibilité particulier, nous créons depuis un certain temps des profils de navigateur distincts pour chaque tâche. Nous travaillons généralement avec au moins 5 profils d'utilisateurs, chacun avec ses propres extensions, signets, bookmarklets et fonctionnalités activés ou désactivés. Regardons-les de plus près.

• Profil d'accessibilité
  Un profil de navigateur propre qui comprend divers outils de vérification de l'accessibilité, par exemple Accessibility Insights, ax et a11y.css, ainsi que quelques autres linters d'accessibilité et un simulateur de vision des couleurs.

• Profil de débogage
  Un profil avec quelques paramètres expérimentaux pour le profilage activé, ainsi qu'une option pour ouvrir automatiquement DevTools pour chaque nouvelle fenêtre, ainsi qu'un CSS de diagnostic personnalisé pour un audit et un profilage rapides.

• Profil de performances
  Un profil propre sans extensions, avec quelques signets spéciaux pour l'audit avec Lighthouse, RequestMap, un CSS de diagnostic des performances et quelques liens liés aux performances à garder à l'esprit (par exemple la priorité des ressources au chargement). Va toujours bien avec 4 × CPU throttling et Network throttling (Slow 3G).

• Client satisfait
  Sur la base des données que nous avons de nos analyses, c'est un profil assez proche de celui que beaucoup de nos lecteurs (des gens merveilleux comme vous) auront. Il contiendra quelques extensions populaires, des extensions de développement Web courantes, des bloqueurs de publicités, la gestion des onglets, Google Docs hors ligne, LastPass, VPN, Browserstack, Grammarly, etc. Aucune limitation en cours d'utilisation.

• Client mécontent
  Un profil pour un lecteur sur une connexion lente et limitée (3G lente), une mémoire faible, un processeur médiocre, avec les 10 extensions de navigateur les plus populaires. Nous utilisons généralement ce profil pour tester nos pages les plus lourdes afin de vivre les pires expériences client possibles.

Selon la tâche à accomplir, nous pouvons passer à l'un des profils dédiés. La commodité réelle vient de la disposition simple selon laquelle chacun des profils a des extensions spécifiques , des bookmarklets et des paramètres de navigateur tous définis et prêts à l'emploi. Ainsi, si nécessaire, nous pouvons accéder directement au débogage des performances ou à l'audit de l'accessibilité sans aucun problème pour rechercher les bonnes extensions.

Il va probablement sans dire que nous faisons de notre mieux pour garder chaque profil propre et épuré - cela vaut pour les extensions de navigateur ainsi que pour les signets, les cookies et le cache du navigateur.

Raccourcis clavier globaux

Certes, avec la quantité de fonctionnalités disponibles dans DevTools, il n'est pas très surprenant que certaines d'entre elles soient assez difficiles à trouver entre les onglets, les panneaux, les icônes d'engrenage et les points. Cependant, il n'est pas nécessaire de mémoriser l'endroit où ils sont placés. Au lieu de cela, il vaut la peine de se souvenir de quelques raccourcis clavier globaux utiles - ils vous aideront à accéder plus rapidement à des fonctionnalités spécifiques.

• Ouverture du menu de commande (Chrome, Edge)
  Étant probablement l'une des plus connues, cette commande a en fait deux fonctionnalités. Cmd/Ctrl + Maj + P ouvre une recherche de saisie semi-automatique rapide pour les panneaux, les tiroirs et toutes les fonctionnalités de DevTools. Cmd/Ctrl + P ouvre un tiroir avec tous les fichiers disponibles utilisés sur la page en cours. Si vous avez besoin d'accéder rapidement à une fonctionnalité de DevTools, le menu de commande est un moyen rapide d'y accéder - pour les tiroirs généraux, les menus cachés ou des fonctionnalités spécifiques.

• Ouverture des paramètres DevTools (tous les navigateurs modernes)
  Habituellement, il existe de nombreux outils et fonctionnalités obscurs cachés dans le panneau "Paramètres" - des appareils émulés aux profils et expériences de limitation du réseau. Dans Chrome, vous pouvez cliquer sur l'icône d'engrenage dans le coin supérieur droit ou utiliser Shift + ? . Dans Firefox, vous pouvez accéder aux paramètres avec F1 .

• Basculer le mode d'inspection des éléments (tous les navigateurs modernes)
  Au lieu de cliquer sur une icône Inspecter puis de vous concentrer sur l'élément que vous souhaitez déboguer, vous pouvez activer le mode Inspecter l'élément avec Cmd/Ctrl + Maj + C .

• Basculer le mode HTML (tous les navigateurs modernes) Lors de l'inspection d'un élément, vous souhaiterez peut-être modifier ses attributs, par exemple les classes ou les états. Au lieu de cliquer avec le bouton droit sur l'élément et d'ajouter des valeurs une par une, vous pouvez basculer le mode HTML sur l'élément actuellement sélectionné avec Fn + F2 (ou simplement F2 sous Windows).

• Basculer le mode Appareil (tous les navigateurs modernes) Pour passer en mode barre d'outils de l'appareil, par exemple pour prévisualiser à quoi ressemble la maquette sur des écrans étroits, ou déclencher un débogueur de requête multimédia, vous pouvez utiliser Cmd/Ctrl + Maj + M dans Chrome, et Cmd/Ctrl + Opt/Alt + M dans Firefox.

Il existe également de nombreux autres raccourcis clavier utiles, par exemple pour suspendre et reprendre l'exécution du script, et accéder au crochet correspondant (pour les longues requêtes multimédias et les fonctions JS) dans l'éditeur de source.

Vous pouvez trouver un aperçu complet de tous les raccourcis clavier sur Raccourcis clavier Chrome DevTools et Raccourcis clavier Firefox DevTools - le plus souvent, ils sont assez cohérents dans les navigateurs modernes.

Activer les paramètres expérimentaux

DevTools est livré avec un ensemble de paramètres expérimentaux qui ne sont pas tout à fait recommandés pour un large public, mais peuvent en effet être très utiles pour le débogage. Un mot d'avertissement cependant : parfois, ces paramètres peuvent geler Chrome ou le rendre assez lent (c'est pourquoi ils sont expérimentaux en premier lieu).

Cependant, avec des profils distincts en place, vous pouvez activer en toute sécurité certains de ces paramètres pour chaque profil, puis les désactiver si nécessaire. Ainsi, alors que nous utilisons nos profils habituels sans expérimentation activée pour la navigation occasionnelle, en mode débogage, nous choisissons toujours un profil dédié en premier, pour écraser ces bogues un peu plus rapidement.

Avec DevTools ouvert dans Chrome, accédez à "Paramètres" ( Maj + ? avec DevTools ouvert) et recherchez "Expériences" dans la barre latérale. De toute évidence, de nombreux paramètres expérimentaux sont disponibles dans chaque DevTools, mais ceux mentionnés ci-dessous ne sont que ceux que nous trouvons très utiles dans notre travail.

Parmi les fonctionnalités répertoriées ici, il vaut la peine d'activer "Automatiquement jolie impression dans le panneau source" , ce qui embellirait les styles et les scripts compressés par défaut lors de l'affichage de la source. Vous pouvez également activer le débogueur CSS Grid et le débogage Flexbox pour traiter les problèmes de mise en page. Il existe également un diff source et un visualiseur d'ordre source qui peuvent être utiles.

Et pour les audits de performances, vous pouvez marquer "Chronologie : initiateurs d'événements" et "Chronologie : suivi de l'invalidation" qui s'afficheront dans le panneau Performances, en mettant en évidence les scripts qui ont causé des opérations coûteuses telles que les tâches longues et les recalculs de style. De plus, dans Edge, vous pouvez activer les couches composées en vue 3D.

Pour un profil donné, vous pouvez accéder à davantage de fonctionnalités cachées en vous rendant sur chrome://flags/ dans le profil de navigateur de votre choix. par exemple, c'est là que vous pouvez activer les fonctionnalités JavaScript les plus récentes et expérimentales , les fonctionnalités expérimentales de la plate-forme Web ou activer les conseils de chargement des ressources pour fournir un aperçu sur les connexions réseau lentes.

Dans Firefox, accédez aux paramètres avec F1 . Au bas du dock, vous pouvez demander au navigateur d'afficher les styles du navigateur, d'activer/désactiver le CSS de saisie semi-automatique, de modifier les préférences de l'éditeur, de basculer le clignotement de la peinture, d'ajuster le comportement de la capture d'écran et d'activer les cartes source (non activées par défaut). Dans Safari, vous pouvez trouver les paramètres expérimentaux sous "Développer → Paramètres expérimentaux".

Basculer entre les états du Dock (Chrome, Edge, Firefox)

Certes, la vue du volet dans DevTools n'est pas une révélation particulièrement importante. Dans l'onglet "Styles" du dock, les styles apparaissent de haut en bas, classés par leur spécificité CSS. Cependant, une petite chose que nous avons beaucoup négligée pendant des années est un petit bouton bascule :hov placé juste au-dessus des styles.

Il vous permet de forcer un état d'élément ( :active , :focus , :focus-within , :hover , :visited et :focus-visible , et plus récemment :target ) sur un élément interactif particulier — par exemple pour appliquer :focus et :active états :active sur les boutons pour les contrôles d'accessibilité.

Dans Firefox, vous pouvez changer une pseudo-classe pour un élément DOM pendant que vous l'inspectez - la fonctionnalité est disponible avec un clic droit sur un nœud DOM.

Une chose qui gêne toujours est la position du dock , qui fonctionne parfois mieux sur le côté droit, et parfois en bas - selon l'endroit où votre bogue a envahi votre arbre DOM.

Pour basculer rapidement entre les états du dock , vous pouvez utiliser Cmd/Ctrl + Shift + D . Un hic à garder à l'esprit est que le raccourci détachera DevTools dans une fenêtre séparée uniquement si DevTools a été dans sa position par défaut (ancré à droite). Sinon, le raccourci basculera simplement entre la position par défaut et celle que vous avez modifiée.

Vue triple volets (Firefox)

Bien que nous soyons habitués à une vue à double volet, Firefox fournit par défaut une vue à triple volet utile - elle a un aspect légèrement différent d'une section à l'autre. Dans la vue Inspecteur, à côté du HTML et des styles, vous pouvez placer le débogueur de mise en page, afficher les styles informatiques ou suivre les modifications CSS - il est très utile d'avoir un accès rapide à toutes ces informations sans avoir à basculer entre les onglets.

Chaque fois que vous modifiez des styles dans Firefox, DevTools met en évidence les requêtes multimédias utilisées sur la page , avec des sauts rapides vers les sections CSS où un comportement de point d'arrêt est défini. Tout cela est affiché juste à côté du code source, donc pas besoin de rechercher un point d'arrêt spécifique. (Sans parler des styles joliment formatés par défaut - c'est pratique !).

Une vue similaire est également disponible dans Chrome et Edge, mais elle n'est disponible que dans le panneau "Éléments" (icône de la barre latérale dans le coin supérieur droit), et jusqu'à présent, elle ne montre que les styles calculés (c'est pourquoi elle s'appelle "Styles calculés encadré »).

Filtrer les styles par propriété (Firefox)

En général, Firefox DevTools est fortement sous-estimé. Une autre fonctionnalité remarquable fournie par Firefox est une option permettant de filtrer tous les styles par une propriété particulière (indiquée par une icône de filtre). Par exemple, si vous remarquez que certains styles sont écrasés par d'autres dispersés quelque part dans la feuille de style, vous pouvez masquer toutes les définitions qui n'affectent pas cette propriété particulière avec un filtre rapide et voir exactement où les remplacements se produisent.

De plus, sur une page donnée, vous pouvez mettre en surbrillance toutes les instances qui correspondent à un sélecteur particulier. Par exemple, si vous remarquez un bogue avec un rendu des images de profil sur les sections sombres et claires de la page, vous pouvez mettre en évidence toutes les instances d'une classe particulière sans les rechercher manuellement ou ajouter des styles supplémentaires pour les mettre en évidence. Il suffit de localiser le sélecteur dans le panneau Styles et de choisir une icône cible pour "mettre en surbrillance tous les éléments correspondant à ce sélecteur".

Dans le panneau "Styles", Firefox explique également quelles propriétés CSS n'affectent pas l'élément sélectionné et pourquoi, ainsi que des recommandations sur ce qui pourrait aider à résoudre le problème ou à éviter un comportement inattendu (la fonctionnalité est appelée CSS inactif).

Une autre fonctionnalité pratique est que Firefox attribue des badges de scroll et de overflow aux éléments qui provoquent le débordement ou le défilement du conteneur (débogage de débordement) - très utile lorsque vous essayez de comprendre pourquoi une barre de défilement horizontale apparaît tout d'un coup, ou un élément ne ne se comporte pas comme prévu.

Développer les nœuds de manière récursive (Chrome, Edge, Firefox)

Lors de l'inspection d'un élément avec un DOM profondément imbriqué, il peut parfois prendre un certain temps pour parcourir l'arborescence, d'un nœud imbriqué à un autre. En cliquant avec le bouton droit sur la flèche d'un nœud, vous pouvez choisir "Développer de manière récursive" et le nœud actuellement sélectionné (et tous ses enfants) se développera en un seul clic. Alternativement, vous pouvez maintenir Option (ou Ctrl + Alt sous Windows) tout en cliquant sur l'icône de flèche à côté du nom de l'élément.

Recueillir et exporter la couverture du code (Chrome, Edge)

Sur une page donnée, une grande partie du CSS et du JavaScript peuvent ne pas être utilisés du tout, bien qu'ils soient livrés au navigateur. Le panneau "Couverture de code" (menu Commande → "Afficher la couverture") vous permet d'explorer les styles et le code qui ne sont pas utilisés sur une page donnée. Nous utilisons la couverture de code pour collecter les CSS critiques pour chacun des modèles utilisés sur le site, et le faire manuellement peut être assez fatigant.

Avec la « couverture de code » en place, en passant par quelques scénarios qui incluent beaucoup de tapotement, de tabulation et de redimensionnement de fenêtre, nous exportons également les données de couverture que DevTools collecte au format JSON (via l'icône d'exportation/téléchargement). En plus de cela, vous pouvez utiliser Puppeteer qui fournit également une API pour collecter la couverture (mais nous n'en sommes pas encore là).

Débogage des requêtes multimédias (Chrome, Edge)

Avec des dizaines de requêtes multimédias en cours pour une page donnée, il peut facilement devenir difficile de suivre les styles écrasés par d'autres styles définis dans une requête multimédia. Pour trouver la section spécifique de votre fichier CSS susceptible de provoquer un comportement inattendu, nous pouvons porter notre attention sur le débogueur de requête multimédia . Par défaut, il est caché derrière le rouage "Paramètres" dans la barre d'outils de l'appareil, mais il est en fait très utile lorsqu'il est disponible par défaut.

Basculez la barre d'outils de l'appareil (mode réactif) avec Cmd/Ctrl + Maj + M et choisissez les trois points dans le coin supérieur droit. Choisissez ensuite "Afficher les requêtes multimédias". Vous devriez maintenant pouvoir voir des barres horizontales représentant la portée de chaque requête multimédia .

Ils peuvent sembler un peu déroutants au début, mais la façon dont ces barres sont alignées représente la largeur de l'écran et est reproduite à gauche et à droite de la fenêtre d'affichage. Les barres les plus proches du centre de l'écran sont écrasées par celles qui sont plus éloignées du centre. La barre bleue en haut indique les requêtes multimédias max-width , la verte les requêtes multimédias min-width et max-width , et la barre orange représente uniquement les requêtes multimédias min-width minimale.

Pour toutes les barres, vous pouvez suivre les requêtes multimédias qu'elles contiennent lorsque vous les survolez. Vous pouvez accéder à une plage de requêtes multimédias spécifique et inspecter en détail les problèmes de mise en page avec le panneau Styles ouvert. En cliquant sur n'importe quelle position sur une barre, vous pouvez déclencher des points d'arrêt spécifiques, et si vous faites un clic droit sur une barre, vous pouvez révéler sa position dans le code source. En fait, vous pouvez rapidement aller et venir entre les requêtes multimédias, plutôt que de redimensionner l'écran manuellement et de vérifier la largeur de l'écran encore et encore.

En guise de remarque rapide, vous pouvez également spécifier vos appareils émulés personnalisés au lieu de ceux prédéfinis - en fait, de nombreux préréglages d'appareils sont déjà disponibles. De plus, vous pouvez utiliser le volet "Capteurs" pour contrôler des capteurs d'appareils spécifiques si nécessaire. De plus, dans Firefox, vous pouvez activer et désactiver la simulation tactile et définir un agent utilisateur spécifique, par exemple pour vérifier le comportement de la page avec un moteur de recherche demandant la page.

Émuler les requêtes de médias de préférence (Chrome, Edge, Firefox)

En plus des requêtes multimédias liées à la taille de l'écran, nous pouvons également émuler des requêtes multimédias spécifiques à l'accessibilité, par exemple prefers-color-scheme , prefers-reduced-motion et déficiences visuelles. Pour basculer l'émulation, dirigez-vous vers le panneau de contrôle des commandes ( Cmd/Ctrl + Maj + P ) et tapez "Afficher le rendu". Maintenant, dans les paramètres, vous pouvez choisir une émulation préférée.

(C'est également là que vous pouvez choisir de mettre en surbrillance les zones qui doivent être repeintes ("Paint Flashing"), les zones qui ont été décalées ("Layout Shift Regions") et de déboguer les problèmes de performances de défilement.)

En parlant d'émulation : rappelez-vous comment, dans le passé, vous avez peut-être eu du mal à trouver un bogue de mise en page pour votre feuille de style d'impression ? Dans le même panneau, vous pouvez également prévisualiser le fonctionnement de vos styles d'impression ici - plus besoin d'imprimer un PDF d'une page aléatoire encore et encore pour comprendre ce qui a causé un problème de rendu majeur.

En outre, dans le même panneau de Chrome, vous pouvez ajouter toutes sortes de fonctionnalités de débogage de rendu, par exemple le clignotement de la peinture, les bordures de calque, les problèmes de performances de défilement, la désactivation d'AVIF et de WebP.

En remarque, il existe une option de barre d'outils DevTools pour " Forcer l'apparence sombre " et un " Forcer les styles de supports d'impression " dans Safari, et vous pouvez simuler des déficiences visuelles dans l'onglet "Accessibilité" de Firefox. (Nous parlerons un peu plus de l'accessibilité plus tard.) Dans Firefox, la vue d'impression est également disponible au-dessus du volet "Styles" dans le mode "Inspecter".

Ouvrir automatiquement DevTools dans chaque nouvel onglet (Chrome)

Avec les audits de performance, nous pourrions vouloir explorer plusieurs pages à la fois et observer leur comportement avec des DevTools distincts, sans avoir à nous demander quel DevTools est responsable de quelle fenêtre. Pour gagner un peu de temps lors du débogage, vous pouvez créer un raccourci avec une commande Terminal qui ouvrirait un navigateur avec DevTools s'ouvrant automatiquement par défaut dans chaque nouvel onglet.

Pour y parvenir, nous devons transmettre l'indicateur --auto-open-devtools-for-tabs lors de l'exécution d'un navigateur Chrome basé sur Edge. Nous exécutons un simple script Alfred pour ouvrir le navigateur Canary avec le drapeau en cas de besoin (coup de chapeau à Addy) - très utile lorsque vous en avez vraiment besoin :

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --auto-open-devtools-for-tabs htps://www.smashingmagazine.com

Vous pouvez trouver un aperçu très complet de tous les commutateurs de ligne de commande Chrome, Edge dans le guide de Peter Beverloo sur les commutateurs de ligne de commande Chrome.

Captures d'écran pleine page (Chrome, Edge, Firefox)

Lors de la sélection d'un nœud HTML dans le volet "Éléments", vous pouvez cliquer avec le bouton droit sur le nœud et inviter DevTools à créer une capture d'écran de ce nœud, et en "mode réactif", vous pouvez capturer une capture d'écran de la partie visible du page ou une capture d'écran en taille réelle (trois points dans le coin supérieur droit).

Pour créer une capture d' écran en taille réelle un peu plus rapidement, vous pouvez également demander une "Capture d'écran pleine page" dans le menu de commande ( Cmd/Ctrl + Maj + P → "Capture d'écran pleine page"). Normalement c'est un peu plus rapide. Gardez simplement à l'esprit que les parties de la page qui sont chargées paresseusement ou rendues progressivement (par exemple avec content-visibility ) peuvent ne pas s'afficher correctement dans la capture d'écran, vous devrez donc peut-être d'abord faire défiler la page jusqu'en bas.

Dans Firefox, vous pouvez générer une capture d'écran de la partie visible de la page en accédant d'abord au mode "Barre d'outils de l'appareil", puis en repérant l'icône de l'appareil photo dans le coin supérieur droit et en l'activant. Ou pour une capture d'écran d'une page complète, vous devez d'abord basculer "Prendre une capture d'écran de la page entière" dans "Paramètres", puis vous trouverez l'icône de la caméra dans la barre d'outils DevTools.

Règles pour les composants (Chrome, Edge, Firefox)

Peut-être souhaitez-vous vérifier rapidement la largeur et la hauteur d'une image ou d'un spot publicitaire. Mais plutôt que de prendre une capture d'écran ou d'inspecter l'élément et de copier/coller les valeurs de width et de height , vous pouvez utiliser une règle pour mesurer la taille d'un composant. Des règles sont fournies dans tous les navigateurs modernes, mais Firefox DevTools vous permet également de mesurer une partie de la page . Vous pouvez trouver l'outil de mesure sur le côté droit de DevTools, juste à côté de l'icône "Mode réactif".

Suivi des modifications (Chrome, Edge, Firefox)

Lorsque vous déboguez un problème particulier, vous avez peut-être commenté certaines lignes de code et probablement ajouté un nouveau code qui semble résoudre définitivement le problème. Vos modifications doivent maintenant être répliquées dans les fichiers source réels. Pour ce faire, il n'est pas nécessaire de collecter manuellement toutes les modifications que vous avez apportées à tous vos fichiers.

Dans Chrome, basculez la commande "Modifications locales" lors de la modification du fichier source. Vous devriez voir un suivi des modifications apparaître dans le panneau ci-dessous. S'il est réduit, retirez-le en le faisant glisser verticalement. Le volet met en évidence les propriétés modifiées et ce qui a exactement changé, afin que vous puissiez copier-coller les modifications immédiatement.

Une chose à garder à l'esprit est que c'est probablement une bonne idée de suivre les modifications lors de l'exécution de votre serveur local - sans suppression automatique des sauts de ligne et des espaces, car ils apparaîtraient également comme des modifications. Ce problème n'existe pas dans Firefox, où vous pouvez également trouver un volet "Modifications" qui fait la même chose, ainsi qu'un bouton convivial "Copier toutes les modifications".

Remplacements locaux (Chrome, Edge)

Vous avez peut-être déjà été dans cette situation : vous souhaitez simplement expérimenter quelques modifications, mais vous avez peut-être peur d'appuyer accidentellement sur "Actualiser" dans le navigateur pour perdre toutes les modifications apportées à la page. Peut-être que vous ne pouvez pas vraiment exécuter le site localement , ou peut-être que vous ne voulez tout simplement pas exécuter l'intégralité de votre build pour quelques modifications locales mineures. Dans de tels cas, les "Local Overrides" de Chrome peuvent être une aubaine.

Tout d'abord, créez un dossier sur votre machine où toutes vos modifications locales seront stockées ( local-overrides sur Desktop semble être un nom et un emplacement raisonnables pour ce type de tâche). Ensuite, dirigez-vous vers l'onglet "Sources" et choisissez "Remplacements" dans le coin supérieur gauche de DevTools (il peut être caché derrière un double chevron). Cliquez maintenant sur "Sélectionner un dossier pour les remplacements" et choisissez votre dossier fraîchement créé - c'est le dossier que Chrome utilisera pour stocker vos modifications locales. Vous devrez cliquer sur "Autoriser" pour accorder à Chrome les autorisations d'enregistrer des fichiers sur votre disque dur.

Maintenant, vous pouvez choisir n'importe quel fichier dans le panneau "Sources", cliquer avec le bouton droit n'importe où dans le code et choisir "Enregistrer pour les remplacements" avec le clic droit. C'est un indice pour que Chrome crée un nouveau fichier et stocke tout le contenu du fichier, ainsi que vos modifications, sur votre disque dur. (Vous voudrez peut-être d'abord cliquer sur le bouton {} pour rendre le code légèrement plus lisible). ( Merci à Trys pour l'indice ! )

Une fois que vous avez défini vos remplacements locaux, Chrome interceptera les requêtes réseau et utilisera votre code au lieu de la réponse réelle. Il surveillera également les modifications apportées au fichier et injectera automatiquement les modifications dans la page , un peu comme si vous aviez un développement local installé avec le mode montre activé. Tous les fichiers écrasés par des remplacements locaux auront un petit point violet à côté d'eux dans le panneau "Éléments".

La meilleure partie : vous pouvez maintenant ouvrir le fichier dans votre éditeur de texte et apporter des modifications à partir de là , tout en voyant ces modifications apparaître également dans DevTools — et si vous devez passer à DevTools pour ajouter des points d'arrêt, vous pouvez le faire à partir de DevTools, faire modifications apportées au code, et ces modifications seront également visibles dans votre éditeur de texte. Presque magique !

Conseil de pro de Harry Roberts : les remplacements locaux ne vous permettent pas de conserver ou de suivre des versions ou des variantes, mais vous pouvez joindre une chaîne de requête à l'URL et charger des variantes distinctes de la même page. Extrêmement utile lors de l'édition de pages HTML.

Ah, et si vous avez besoin de désactiver à nouveau les remplacements locaux, cochez simplement "Activer les remplacements locaux" dans le même volet - sinon les styles écraseront les styles existants encore et encore, ce que vous ne voudrez peut-être pas.

Débogage à distance (Chrome, Safari)

Si vous avez besoin de déboguer vos applications ou pages sur un téléphone mobile, vous pouvez utiliser un proxy Devtools pour les appareils iOS pour déboguer Chrome sur iOS, et également utiliser DevTools pour déboguer Mobile Safari sur iOS avec Chrome DevTools.

Pour déboguer Mobile Safari avec Safari Inspector, activez « Web Inspector » dans « Settings → Safari → Advanced → Web Inspector » et ouvrez le débogueur avec « Develop » → (nom de votre téléphone). Vous devriez avoir les DevTools de Safari qui s'ouvrent pour vous.

Pour les appareils Android, ouvrez les options de développement sur Android et sélectionnez "Activer le débogage USB" . Sur votre machine de développement, vous pouvez ensuite découvrir votre appareil mobile en vous rendant sur chrome://inspect#devices et en choisissant votre "Remote Target". Vous pouvez trouver de nombreux détails et instructions sur "Commencer avec le débogage à distance des appareils Android". C'est également là que vous pouvez trouver un DevTools dédié au débogage de Node.js.

Suspendre l'exécution du script (Chrome, Edge, Firefox)

Lors du test de CSS critiques ou du débogage de JavaScript, vous souhaiterez peut-être conserver l'état du DOM avant qu'un script particulier ne soit exécuté ou qu'un style particulier ne soit appliqué. C'est à cela que servent les points d'arrêt de changement DOM dans DevTools.

En cliquant avec le bouton droit de la souris sur les trois points inquiétants à côté du nom de l'élément, vous pouvez sélectionner "Arrêter sur" les modifications de sous-arborescence (insertions et suppressions de nœuds dans l'arborescence DOM enracinée au nœud donné), les modifications d'attribut (par exemple, lorsqu'un attribut est ajouté ou supprimé, ou une valeur d'attribut change - par exemple avec des classes) ou la suppression d'un nœud.

Cependant, vous pouvez également utiliser un point d'arrêt de ligne de code conditionnel lorsque vous connaissez la région exacte de code que vous devez étudier, mais que vous ne voulez faire une pause que lorsqu'une autre condition est vraie. De plus, n'oubliez pas les points de journalisation pour générer une valeur dans un extrait de code sans écrire console.log encore et encore.

Extraits de code (Chrome, Edge)

Si vous avez quelques extraits de code que vous utilisez souvent pour suivre ce qui pourrait avoir causé le comportement bogué, vous pouvez stocker et accéder à ces extraits dans le volet "Extraits". D'une certaine manière, ces extraits de code JavaScript sont similaires aux bookmarklets, mais contrairement à ces derniers, vous pouvez les gérer depuis le confort d'une zone dédiée dans DevTools.

Comme ce sont des scripts, nous pouvons ajouter des points d'arrêt lorsque ces scripts sont en cours d'exécution, ou sélectionner une partie de votre code dans "Snippets" et exécuter cette partie particulière du code au lieu d'exécuter l'intégralité de l'extrait.

Le volet "Snippets" est situé parmi "Sources", à côté de "Local Overrides". Une fois que vous avez ajouté un extrait, vous pouvez l'exécuter soit en cliquant avec le bouton droit de la souris et en sélectionnant "Exécuter", soit avec Cmd/Ctrl + Entrée . Bien sûr, chaque extrait est également disponible à partir du panneau de commande.

En général, si vous vous retrouvez à exécuter une tâche de routine encore et encore, il y a de fortes chances que vous souhaitiez la placer dans "Code Snippets" et automatiser cette tâche avec un script. DevTools Snippets inclut des scripts utiles pour le contournement du cache, l'affichage des en-têtes et l'enregistrement d'objets en tant que fichiers .json à partir de la console, mais vous pouvez l'utiliser pour modifier le DOM ou afficher des informations utiles, telles que des marques de performance (ce que nous faisons). De plus, vous pouvez également brancher un CSS de diagnostic des performances pour indiquer les images chargées paresseusement, les images non dimensionnées ou les scripts synchrones.

Exécuter des tests automatisés personnalisés (Safari)

L'une des fonctionnalités souvent oubliées de Safari DevTools est la possibilité de définir et d'exécuter une série de vérifications automatisées. Considérez-le comme une suite de tests personnalisée , avec une série de petits tests, qui peuvent être entièrement définis en fonction du type d'audit qu'un développeur souhaite exécuter. Par défaut, la suite de tests est axée sur l'accessibilité, mais vous pouvez l'ajuster comme bon vous semble, par exemple pour vérifier s'il y a des scripts de synchronisation dans le DOM, ou si toutes les images ont un attribut de width et de height défini, ou même si toutes les images sont chargées paresseusement. ( merci Nikita! )

Cartes sources (Chrome, Edge, Firefox)

Lors du débogage du code de production, il est extrêmement pratique de pouvoir suivre les modifications apportées à un composant ou module spécifique que vous utilisez dans votre base de code. Pour mapper le code minifié au code source, nous pouvons utiliser des cartes source. Si vous générez une carte source dans le cadre de votre build, vous pouvez utiliser des cartes source lors du débogage de votre code dans DevTools .

Dans Chrome, vous devez activer les cartes source pour JavaScript et CSS dans "Paramètres", puis ajouter un dossier à "Espace de travail". DevTools avec puis essayez de déduire automatiquement tous les mappages et chargez vos fichiers source en plus de vos fichiers minifiés. Vous pouvez ensuite lire et déboguer le code compilé dans sa source d'origine. Encore mieux que cela : vous pouvez toujours parcourir vos points d'arrêt, et toutes les erreurs, les journaux et les points d'arrêt seront mappés au code réel. Pour créer votre carte source, l'outil Devtool de Webpack peut vous aider.

For Firefox, once the source map is generated, a transformed file has to include a comment that points to the source map . Just make sure that your bundler does the job for you. Once it's in place, in the source list pane, the original source (.scss or .ts files) will appear, and you can debug it right there.

Clear Service Worker's Cache And Storage (Chrome, Edge)

When we hit “Hard Refresh” in the browser, the browser will not use anything from the cache when reloading the page. Instead, it will re-fetch all assets from the server, without relying on caching.

If you right-click the “Refresh” button with DevTools open, you'll find another option: “Empty Cache and Hard Reload”. The difference is that if the page prompts any dynamic fetches via JavaScript, they might still use the cache. The latter option clears them, too, while the former doesn't.

Both of these options, however, don't clear cookie or service worker's cache — which you might want to do in some scenarios. Jump to the Command menu ( Cmd + Shift + P ) and type/autocomplete “Clear site data”. When this option is activated, the browser will clean all of the data (as the name assumes), including the service worker's cache as well as the unregistering of the service worker. (Alternatively, you can click “Clear Site Data” in the Application panel.)

And if you want to delete only cache or only cookies quickly, you can right-click on any request in the “Network” panel, and choose “Clean browser cache” from there.

In Firefox, you'll need to head to the “Privacy & Security” panel and find the “Cookies and Site Data” section there.

Filters In The Network Panel (Chrome, Edge, Firefox)

There seems to be not much to explore in the “Network” panel as it basically just shows the list of browser requests (along with server responses) in chronological order. However, there are plenty of obscure little helpers as well.

First of all, with an overview of requests in front of us, we can choose which columns we'd like to see . Right-click on the header of one of the columns and select the ones that you find useful for the task at hand. We always choose the “Priority” column to see in which priorities assets are being requested, and if we need to adjust that order to deliver critical assets faster (based on JavaScript Resource Loading Priorities in Chrome, Edge).

We can also filter requests to find specific ones that might be causing trouble ( thanks for the tip, Harry ). At the top of the “Network” panel you'll find an input field, which accepts not only keywords but also commands for filtering. Here are a few examples of the useful ones:

• is:from-cache shows all resources that were delivered from the cache,
• is:service-worker-initiated , shows only requests prompted by a service worker,
• is:running shows all incomplete or unresponsive requests,
• larger-than:250k shows all resources that are larger than 250 Kb,
• -larger-than:250k shows all resources that aren't larger than 250 Kb (same size and smaller),
• mixed-content: shows all assets that are loaded over HTTP instead of HTTPS,
• -has-response-header:Cache-Control highlights assets that don't have any caching headers,
• Obviously we can also search for bad practices like document.write and @import in HTML and CSS, plus we can use regular expressions as well.

All filters can be combined as well, separated by an empty space. You can check a comprehensive list of all filters as well, or just type - in the filters input and get an autocomplete preview of all features ( huge thanks to Harry for the tip! ).

Check Initiators In The Network Panel (Chrome, Edge)

If you want to quickly check which assets a particular resource has requested, or by which resource an asset was requested, there is a simple way to discover it in DevTools as well. This is especially useful in cases where you might have a couple of third-party scripts that might be calling fourth-party-scripts.

When you are inspecting a request in the “Network” panel, hold Shift while hovering over an element. The pink background color will indicate resources that this element has prompted to download, and the green background color will indicate the initiator that actually prompted the request.

Choose a User Agent (Chrome, Edge, Firefox)

Sometimes you might want to check how the page will render with a different user agent, eg to make sure that a Googlebot gets a properly rendered version of the page. By heading to “Network conditions”, you can define the behavior for caching, network throttling and a user agent.

Par défaut, ce dernier est "automatique" mais il existe 10 groupes prédéfinis, allant de GoogleBot Desktop et Mobile à Android et UC Browser. Vous pouvez également définir votre propre agent utilisateur si nécessaire. Cependant, ces paramètres ne seront pas conservés lorsque vous naviguerez d'un onglet à l'autre.

Dans Firefox, vous devrez vous diriger vers la page about:config de Firefox et définir une chaîne general.useragent.override .

Modifier le comportement de défilement dans le panneau de performances (Chrome, Edge)

À première vue, le panneau Performances peut sembler assez intimidant avec ses diagrammes de flammes , de nombreuses données affichées à la fois et un comportement de défilement assez non conventionnel. Par défaut, le défilement vertical régulier agit comme un zoom sur une partie sélectionnée de la chronologie, mais nous pouvons le modifier.

Dans "Paramètres", vous pouvez basculer "l'action de la molette de la souris Flamechart" de "Zoom" à "Scroll" - et le tour est joué, votre défilement préféré sera préservé ! Mais que se passe-t-il si vous souhaitez utiliser à la fois le zoom et le défilement ? L'astuce clé est de maintenir "Shift" pendant le défilement pour basculer le comportement préféré.

Donner un sens au panneau de performance (Chrome, Edge)

Vous vous souvenez de "Timeline : initiateurs d'événements" et "Timeline : suivi d'invalidation" que nous avons mentionnés dans les paramètres expérimentaux ? Ces fonctionnalités expérimentales sont utiles dans le panneau Performances lorsque vous recherchez une cause d'opérations coûteuses, appelées tâches longues (tâches qui prennent plus de 50 ms à accomplir). L'objectif est alors de décomposer les tâches longues en tâches plus courtes, et il est généralement logique de se concentrer d'abord sur les tâches longues les plus longues.

Accédez au panneau Performances et commencez le profilage avec Cmd/Ctrl + Maj + E . Après un peu de temps nécessaire pour actualiser et collecter des données, ces longues tâches coûteuses apparaîtront dans la chronologie, mises en évidence par un rectangle rouge dans le coin supérieur droit. Leur durée indique le coût réel de l'opération. Les tâches ont un budget amical de 50 ms pour terminer , c'est pourquoi la première partie de 50 ms de la tâche est affichée en gris uni. Chaque fois que vous dépassez ce budget, le reste de la tâche est mis en évidence avec des rayures rouges/grises.

Le diagramme de flamme est une visualisation de ce en quoi consiste chaque tâche. Toutes les parties d'une tâche sont affichées sous les tâches réelles, avec un fond jaune représentant le script. Si vous cliquez sur "Évaluer le script" sous chacune des tâches, vous pouvez ouvrir le tiroir "Résumé" en bas et voir quel script a causé le coût. Si vous cliquez sur la barre violette intitulée "Recalculer le style" , DevTools affichera exactement ce qui a déclenché l'invalidation des styles.

La fonctionnalité probablement la plus sous-estimée de DevTools est en effet le tiroir "Résumé" qui montrerait alors également quels éléments ont été affectés par le recalcul de style (afin que vous puissiez y accéder immédiatement) et ce qui a initié cette tâche en premier lieu.

Débogage des animations Janky avec des calques (Chrome, Edge, Safari)

Vous avez juste besoin de quelques animations, peut-être avec un peu de parallaxe, une navigation glissante ou une manipulation espiègle de l'index z, pour tomber sur des images tombantes et des animations janky . Le compteur FPS du panneau de performances (Chrome) révélera si vous exécutez les images en douceur, mais si ce n'est pas le cas, vous pouvez explorer les problèmes de rendu dans l'onglet "Calques".

Certains des problèmes peuvent être facilement détectés en suivant les éléments auxquels il manque une propriété will-change et ceux qui utilisent une quantité disproportionnée de mémoire . C'est ainsi que nous avons repéré un gros composant qui était caché hors de l'écran avec un positionnement relatif de -1000px hors de l'écran, provoquant une utilisation de la mémoire de quelques Mo. De plus, lors du débogage d'un problème de canevas, gardez à l'esprit que Safari dispose d'un débogueur d'utilisation de la mémoire du canevas.

Débogueur d'index Z de vue 3D (bord)

Un autre outil utile pour suivre les problèmes de rendu et les problèmes d'index z est la vue 3D du DOM ("Paramètres" → "Plus d'outils" → Vue 3D) d'Edge. L'outil fournit une visualisation interactive des couches DOM et z-index . Vous pouvez même choisir d'afficher le DOM coloré avec les couleurs d'arrière-plan réelles des éléments DOM ou d'afficher uniquement les contextes d'empilement.

Il n'a jamais été aussi simple de voir comment les valeurs z-index sont réparties sur la page et pourquoi les superpositions ou les panneaux n'apparaissent pas comme prévu lorsqu'ils sont déclenchés.

Meilleur profilage d'accessibilité (Chrome, Edge, Firefox)

Ne serait-il pas formidable d'avoir un outil d'accessibilité unique qui fournirait des détails et des conseils sur tout, de l'ordre des onglets aux attributs ARIA et aux annonces de lecteur d'écran ? Pour se rapprocher de cela, nous avons mis en place un profil d'accessibilité dédié avec des extensions utiles et des bookmarklets mentionnés au début de l'article. Cependant, DevTools fournit également des fonctionnalités utiles prêtes à l'emploi.

Dans Chrome et Edge, le panneau "Accessibilité" affiche l'arborescence d'accessibilité, les attributs ARIA utilisés et les propriétés calculées. Lorsque vous utilisez un sélecteur de couleurs, vous pouvez vérifier et ajuster facilement les couleurs pour s'adapter à un rapport de contraste conforme aux normes AA/AAA (avec la possibilité de basculer entre HEX, RVB, HSL avec Maj + Clic sur l'échantillon - merci Ana ! ).

Comme déjà mentionné, le panneau "Rendu" vous permet également d'émuler les déficiences visuelles. Les audits Lighthouse incluent également une section avec des recommandations concernant l'accessibilité de la page. De plus, lorsque vous inspectez un élément, les informations d'accessibilité apparaissent également dans la vue d'ensemble.

Firefox dispose également d'outils d'accessibilité avancés. En plus de l'arborescence d'accessibilité et du vérificateur de contraste, Firefox DevTools met en évidence les rôles et les points de repère, ainsi que des recommandations et des vérifications d'accessibilité . Par exemple, vous pouvez vérifier les problèmes de contraste sur toute la page, vérifier si tous les liens peuvent être mis au point et inclure un style de mise au point, et revoir les étiquettes de texte. De plus, vous pouvez également basculer l'ordre de tabulation.

De plus, vous pouvez installer des extensions axées sur l'accessibilité telles que Accessibility Insights, ax et a11y.css, ainsi que quelques autres linters d'accessibilité et simulateurs de vision des couleurs.

À noter

De toute évidence, il existe littéralement des centaines, voire des milliers, d'autres fonctionnalités utiles disponibles dans DevTools. Beaucoup d'entre eux sont assez connus et n'ont pas besoin de beaucoup d'introduction, mais méritent quand même d'être mentionnés.

• Grille CSS / Inspecteurs Flexbox (Firefox, Chrome, Edge)
  Si vous avez un problème de mise en page lié à Grid et Flexbox, vous trouverez probablement une cause du problème via DevTools. Les inspecteurs Grid et Flexbox sont très utiles car ils affichent la superposition de grille et les limites des conteneurs, ainsi que des conseils sur tout, de flex-basis à grid-gap .

• Expressions en direct
  Si vous avez l'habitude de taper la même expression JavaScript dans la console, vous pouvez envisager de l'automatiser avec Live Expressions. La fonctionnalité, disponible dans Chrome, Edge et Firefox, vous permet de taper une expression une fois, puis de l'épingler en haut de votre console, et la valeur de l'expression en direct sera automatiquement mise à jour.

• Panneau d'animations
  Firefox dispose d'un panneau très pratique pour suivre les problèmes liés aux animations, y compris le ralentissement et la visualisation de l'évolution d'un élément au fil du temps.

• Panneau des polices
  Firefox dispose également d'un panneau "Polices" pratique qui mérite d'être exploré pour tout type de problème lié aux polices. Nous l'avons beaucoup utilisé lorsque nous essayons de faire correspondre la police de secours à la police Web, par exemple, car vous pouvez affiner les propriétés typographiques avec un curseur et voir l'impact en action. Il fournit également des aperçus de texte lorsque vous survolez une famille de polices dans les styles.

• Présentation CSS
  Si vous activez la "Présentation CSS" dans les paramètres expérimentaux de Chrome, DevTools ajoutera un onglet avec un rapport complet des déclarations CSS utilisées sur une page. Il répertorie également toutes les couleurs et polices utilisées, ainsi que les requêtes multimédias et les déclarations inutilisées auxquelles vous pouvez accéder immédiatement.

Et c'est un enveloppement !

Lorsque nous avons décidé de préparer cet aperçu, il était censé être assez court, ne présentant que quelques-unes des fonctionnalités utiles fournies par DevTools. Il s'est avéré qu'il existe de nombreuses fonctionnalités que nous ne connaissions pas avant de commencer à écrire cet article - et nous avons pu les découvrir avec l'aimable aide de merveilleux lecteurs de Smashing qui partagent leurs expériences sur Twitter. Merci beaucoup pour vos aimables contributions !

En outre, un grand merci à tous les contributeurs de tous les DevTools sur tous les navigateurs - nous vous félicitons pour vos efforts, ainsi que votre temps et vos efforts pour améliorer nos expériences de développement. Cela compte.

Si nous avons manqué quelque chose de précieux , veuillez répondre dans les commentaires. Et si vous avez trouvé quelque chose d'utile, nous espérons que vous pourrez appliquer immédiatement ces petites aides à votre flux de travail, et peut-être envoyer un lien vers ce message à un ami ou deux - peut-être qu'ils le trouveront utile. Ah, et n'oubliez pas : vous pouvez également déboguer DevTools avec DevTools — appuyez simplement sur Cmd/Ctrl + Maj + I deux fois de suite. ;-)

Maintenant, bon débogage à tous !