Catégories
Astuces et Design

Un aperçu des nouveautés de Chrome DevTools en 2020

Je suis ravi de partager avec vous certaines des nouvelles fonctionnalités de Chrome DevTools. Vous trouverez ci-dessous une brève introduction, puis nous aborderons la plupart des nouvelles fonctionnalités de DevTools. Nous examinerons également ce qui se passe dans certains autres navigateurs. Je me tiens au courant de ce truc, alors que je crée des conseils de développement, la plus grande collection de conseils DevTools que vous trouverez en ligne!

C'est une bonne idée de découvrir ce qui a changé dans DevTools car il évolue constamment et les nouvelles fonctionnalités sont spécialement conçues pour aider et améliorer notre expérience de développement et de débogage.

Passons aux dernières et meilleures. Bien que la version publique stable de Chrome possède la plupart de ces fonctionnalités, j'utilise Chrome Canary car j'aime rester à la pointe de la technologie.

Phare

Lighthouse est un outil open source pour auditer des pages Web, généralement autour de la performance, du référencement, de l'accessibilité, etc. Depuis un certain temps maintenant, Lighthouse a été intégré dans DevTools, ce qui signifie que vous pouvez le trouver dans un panneau nommé… Lighthouse!

Capture d'écran de DevTools ouvert sur une page CSS-Tricks. Le panneau Phare est ouvert et affiche un score de bonnes pratiques de 100 sur 100.
Bravo, monsieur Coyier. 🏆

J’aime beaucoup Lighthouse, car c’est l’une des parties les plus faciles à utiliser de DevTools. Cliquez sur "Générer un rapport" et vous obtenez immédiatement des notes lisibles par l'homme pour votre page Web, telles que:

Le document utilise des tailles de police lisibles Texte 100% lisible

Ou:

Évitez une taille de DOM excessive (1189 éléments)

Presque tous les audits sont liés à la documentation du développeur qui explique comment l'audit peut échouer et ce que vous pouvez faire pour l'améliorer.

La meilleure façon de démarrer avec Lighthouse est d'effectuer des audits sur vos propres sites Web:

  1. Ouvrez DevTools et accédez au Panneau de phare lorsque vous êtes sur l'un de vos sites
  2. Sélectionnez les éléments que vous souhaitez auditer (Les meilleures pratiques est un bon point de départ)
  3. Cliquez sur Générer un rapport
  4. Cliquez sur les audits réussis / échoués pour enquêter sur les résultats

Même si Lighthouse fait partie de DevTools depuis un certain temps maintenant (depuis 2017!), Il mérite toujours une mention importante en raison des fonctionnalités destinées aux utilisateurs qu'il continue de proposer, telles que:

  • Un audit qui vérifie que les éléments d'ancrage se résolvent en leurs URL (Fait amusant: j'ai travaillé dessus!)
  • Un audit qui vérifie si la métique Largest Contentful Paint est suffisamment rapide
  • Un audit pour vous avertir de JavaScript non utilisé

Un meilleur "Inspecter l'élément"

Il s'agit d'une fonctionnalité subtile et, à certains égards, très petite, mais elle peut avoir des effets profonds sur la façon dont nous traitons l'accessibilité du Web.

Voici comment ça fonctionne. Lorsque vous utilisez Inspect Element – ce qui est sans doute l'utilisation la plus courante de DevTools – vous obtenez désormais une info-bulle contenant des informations supplémentaires sur l'accessibilité.

Capture d'écran montrant DevTools ouvert sur une page CSS-Tricks. Un élément est mis en surbrillance sur la page et une info-bulle avec un arrière-plan blanc est au-dessus, fournissant des informations sur la couleur, la police, le contraste, le nom, le rôle de l'élément et s'il peut être mis au point au clavier.
L'accessibilité est intégrée!

La raison pour laquelle je dis que cela peut avoir un impact profond est que DevTools dispose de fonctionnalités d'accessibilité depuis un certain temps maintenant, mais combien d'entre nous les utilisent réellement? L'inclusion de ces informations sur une fonctionnalité couramment utilisée comme Inspecter l'élément lui donnera beaucoup plus de visibilité et la rendra beaucoup plus accessible.

L'info-bulle comprend:

  • le rapport de contraste du texte (dans quelle mesure ou dans quelle mesure le texte de premier plan contraste-t-il avec la couleur d'arrière-plan)
  • la représentation textuelle
  • le rôle ARIA
  • si l'élément inspecté est focalisable au clavier ou non

Pour essayer ceci, faites un clic droit (ou Cmd + Shift + C) sur un élément et sélectionnez Inspecter pour l'afficher dans DevTools.

J'ai réalisé une vidéo de 14 minutes sur le débogage de l'accessibilité avec Chrome DevTools qui couvre une partie de cela plus en détail.

Émuler les déficiences visuelles

Exactement comme indiqué sur l'étain, vous pouvez utiliser Chrome DevTools pour émuler les troubles de la vision. Par exemple, nous pouvons visualiser un site à travers le prisme d'une vision floue.

Capture d'écran de DevTools ouvert sur une page CSS-Tricks. Le panneau Rendu est ouvert et l'option de vision floue est sélectionnée. La page CSS-Tricks est floue et difficile à lire.
C’est un défi à lire!

Comment pouvez-vous faire cela dans DevTools? Comme ça:

  1. Ouvrez DevTools (clic droit et «Inspecter» ou Cmd + Shift + C).
  2. Ouvrez le Menu de commande DevTools (Cmd + Shift + P sur Mac, Ctrl + Shift + P sous Windows).
  3. Sélectionner Afficher le rendu dans le menu Commande.
  4. Sélectionnez une carence dans le Volet de rendu.

Nous avons utilisé la vision floue comme exemple, mais DevTools a d'autres options, notamment: la protanopie, la deutéranopie, la tritanopie et l'achromatopsie.

Comme pour tout outil de cette nature, il est conçu pour compléter nos compétences d'accessibilité existantes (espérons-le). En d'autres termes, il ne s'agit pas d'instructions, mais plutôt d'influence sur les conceptions et les expériences utilisateur que nous créons.

Voici quelques ressources supplémentaires sur l'accessibilité et l'émulation pour les malvoyants:

Obtenez du timing sur les performances

Le panneau de performances dans DevTools peut parfois ressembler à un méli-mélo déroutant de formes et de couleurs.

Cette mise à jour est excellente car elle fait un meilleur travail en affichant des mesures de performance significatives.

Capture d'écran de DevTools avec le panneau Performance ouvert. Un graphique montrant la chronologie du rendu de la page se trouve au-dessus d'une ligne de minutages, y compris DCL, FP, FCP, L et LCP. En dessous se trouve un résumé qui fournit une plage de temps pour le timing sélectionné.

Ce que nous voulons regarder, ce sont ces rectangles de chronométrage supplémentaires indiqués dans les «Timings» de l'enregistrement du panneau Performance. Cela met en évidence:

  • DOMContentLoaded: L'événement qui se déclenche lorsque le HTML initial se charge
  • Première peinture: Lorsque le navigateur peint pour la première fois des pixels sur l'écran
  • Première peinture satisfaite: Le point auquel le navigateur tire le contenu du DOM qui indique à l'utilisateur que le contenu est en cours de chargement
  • En charge: Lorsque la page et toutes ses ressources ont fini de se charger
  • La plus grande peinture riche en contenu: Le plus grand élément d'image ou de texte, qui est rendu dans la fenêtre

En prime, si vous trouvez l'événement le plus grand contenu de peinture dans un enregistrement du panneau de performance, vous pouvez cliquer dessus pour obtenir des informations supplémentaires.

Beau travail, CSS-Tricks! La plus grande peinture de contenu se produit au début du chargement de la page.

Bien qu'il y ait beaucoup d'informations en or ici, le «nœud associé» est potentiellement l'élément le plus utile car il spécifie exactement quel élément a contribué à l'événement LCP.

Pour essayer cette fonctionnalité:

  1. Ouvrez DevTools et accédez au Panneau de performance
  2. Cliquez sur "Démarrer le profilage et recharger la page"
  3. Observez les métriques de synchronisation dans le Section des horaires d'un enregistrement
  4. Cliquez sur les statistiques individuelles pour voir les informations supplémentaires que vous obtenez

Les performances du moniteur

Si vous souhaitez commencer rapidement à utiliser DevTools pour analyser les performances et que vous avez déjà essayé Lighthouse, je vous recommande la fonctionnalité Analyseur de performances. C'est un peu comme avoir WebPageTest.org à portée de main avec des choses comme l'utilisation du processeur.

Capture d'écran de DevTools avec le volet Analyseur de performances ouvert. Quatre graphiques chronologiques sont empilés verticalement, en commençant par l'utilisation du processeur, suivi par la taille du tas JavaScript, les nœuds DOM et les écouteurs d'événements JavaScript.

Voici comment y accéder:

  1. Ouvrez DevTools
  2. Ouvrez le Menu de commande (Cmd + Shift + P sur Mac, Ctrl + Shift + P sous Windows)
  3. Sélectionner "Afficher le moniteur de performances”Dans le menu Commande
  4. Interagissez et naviguez sur le site Web
  5. Observez les résultats

L’analyseur de performances peut vous fournir des statistiques intéressantes, mais contrairement à Lighthouse, c’est à vous de déterminer comment les interpréter et agir. Aucune suggestion n'est fournie. C’est à vous d’étudier ce tableau d’utilisation du processeur et de vous demander si 90% est un niveau acceptable pour votre site (ce n’est probablement pas le cas).

L'Analyseur de performances a une légende interactive, dans laquelle vous pouvez activer et désactiver les mesures, telles que:

  • l'utilisation du processeur
  • Taille du tas JS
  • Nœuds DOM
  • Écouteurs d'événements JS
  • Des documents
  • Cadres de document
  • Layouts / sec
  • Recalculs de style / s

Vue d'ensemble CSS et remplacements locaux

CSS-Tricks a déjà couvert ces fonctionnalités, alors allez les découvrir!

  • Aperçu CSS: un panneau DevTools pratique qui donne un tas de statistiques intéressantes sur le CSS que votre page utilise
  • Remplacements locaux: une fonctionnalité puissante qui vous permet de remplacer les sites Web de production par vos ressources locales, afin que vous puissiez facilement prévisualiser les modifications

Alors, qu'en est-il de DevTool dans d'autres navigateurs?

Je suis sûr que vous avez remarqué que j'utilise Chrome tout au long de cet article. C’est le navigateur que j’utilise personnellement. Cela dit, cela vaut la peine de considérer que:

  • Firefox DevTools a l'air plutôt bien en ce moment
  • Avec Microsoft Edge s'étendant de Chromium, il bénéficiera également de ces fonctionnalités DevTools
  • Comme le montrent les notes de version de Safari Technology Preview (recherchez l'inspecteur Web sur cette page), Safari DevTools a parcouru un long chemin

En d'autres termes, gardez l'œil ouvert car c'est un espace en évolution rapide!

Conclusion

Nous avons couvert beaucoup de choses en peu d'espace!

  • Phare: Un panel qui fournit des conseils et des suggestions pour les performances, l'accessibilité, le référencement et les meilleures pratiques.
  • Inspecter l'élément: Une amélioration de la fonction Inspecter l'élément qui fournit des informations d'accessibilité à l'info-bulle Inspecter l'élément
  • Émuler les déficiences visuelles: Une fonction dans le volet de rendu pour afficher une page à travers l'objectif de la basse vision.
  • Horaires du panneau de performances: Mesures supplémentaires dans l'enregistrement du panneau Performances, affichant des statistiques orientées utilisateur, comme la plus grande peinture de contenu
  • Analyseur de performances – Une visualisation en temps réel des mesures de performances pour le site Web actuel, telles que l'utilisation du processeur et la taille du DOM

Veuillez consulter ma liste de diffusion, Conseils de développement, si vous souhaitez rester au courant des dernières mises à jour et obtenir plus de 200 conseils de développement Web! J'ai également un cours vidéo premium sur ModernDevTools.com. Et j'ai tendance à publier des tas de ressources de développement Web bonus sur Twitter.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *