Un regard sur ce qui est nouveau dans Chrome Devtools en 2020

Un regard sur les nouvelles fonctionnalités de Chrome Devtools en 2020

Cet article vous amènera à en savoir plus sur certaines des nouvelles fonctionnalités de Chrome Devtools. Nous le présenterons brièvement, puis plongerons dans de nombreuses nouvelles fonctionnalités Devtools et apprendrons les progrès dans d'autres navigateurs. Je continue de me concentrer sur ces aspects parce que j'ai créé des conseils de développement, la plus grande collection d'invites Devtools que vous pouvez trouver en ligne!

Il est crucial de comprendre les changements dans Devtools à mesure qu'il continue d'évoluer, avec de nouvelles fonctionnalités conçues pour nous aider à améliorer notre développement et notre expérience de débogage.

Jetons un coup d'œil aux dernières et meilleures fonctionnalités. Bien que la version publique stable de Chrome ait la plupart de ces fonctionnalités, j'utilise Chrome Canary parce que j'aime être à la pointe de la technologie.

Phare

Lighthouse est un outil open source pour auditer les pages Web, généralement autour des performances, du référencement, de l'accessibilité, etc. Le phare est regroupé dans le cadre de Devtools depuis un certain temps, ce qui signifie que vous pouvez le trouver dans un panneau appelé… Lighthouse!

J'aime vraiment le phare parce que c'est l'une des parties les plus faciles de Devtools à utiliser. Cliquez sur "Générer le rapport" et vous obtiendrez immédiatement des commentaires lisibles par l'homme pour la page Web, tels que:

Les documents utilisent une taille de police facile à lire, 100% de texte facile à lire

ou:

Évitez les tailles DOM excessivement grandes (1 189 éléments)

Presque chaque revue est liée à la documentation du développeur expliquant pourquoi l'examen a échoué et comment il peut être amélioré.

La meilleure façon de commencer avec Lighthouse est d'exécuter l'audit sur votre propre site Web:

1. Ouvrez Devtools et accédez au panneau du phare lorsque vous visitez l'un des sites
2. Sélectionnez le projet que vous souhaitez consulter ( les meilleures pratiques sont un bon point de départ)
3. Cliquez pour générer un rapport
4. Cliquez sur toute révision approuvée / échouée pour enquêter sur les résultats

Bien que Lighthouse fait partie de Devtools depuis un certain temps (depuis 2017!), Il convient toujours de mentionner car il continue d'offrir des fonctionnalités orientées utilisateur telles que:

• Vérifiez si l'élément d'ancrage se résout à son audit URL (fait intéressant: je suis impliqué dans ce travail!)
• Vérifiez si la métrique de dessin de contenu maximum est suffisamment rapide pour examen
• Vous avertissez de l'audit qui n'utilise pas JavaScript

Mieux "Vérifiez les éléments"

Il s'agit d'une fonctionnalité nuancée et très petite à certains égards, mais elle peut avoir un impact profond sur la façon dont nous gérons l'accessibilité Web.

Cela fonctionne comme suit. Lorsque vous utilisez des éléments de contrôle, sans doute l'utilisation la plus courante de Devtools, vous obtenez désormais des infractions qui contiennent des informations supplémentaires sur l'accessibilité.

La raison pour laquelle je dis que cela a un impact profond est que Devtools a l'accessibilité pendant un certain temps, mais combien d'entre nous les utilisent réellement? L'inclusion de ces informations dans une fonctionnalité couramment utilisée comme l'élément Check lui donnera une visibilité plus élevée et la rendra plus accessible.

Les conseils d'outil comprennent:

• Le rapport de contraste du texte (le contraste est le texte de premier plan avec la couleur d'arrière-plan, ou à quel point est-il mauvais)
• Représentation de texte
• Rôles aria
• Si l'élément inspecté peut être axé sur le clavier

Pour essayer cette fonctionnalité, cliquez avec le bouton droit (ou CMD Shift C) et sélectionnez Vérifier pour le voir dans Devtools.

J'ai réalisé une vidéo de 14 minutes sur le débogage d'accessibilité avec Chrome Devtools, qui en couvre plus en détail certains.

Défauts de vision simulés

Comme son nom l'indique, vous pouvez utiliser Chrome Devtools pour simuler la déficience visuelle. Par exemple, nous pouvons voir les sites Web du point de vue de la vision floue.

Comment faites-vous cela dans Devtools? Comme ça:

1. Ouvrez Devtools (cliquez avec le bouton droit et sélectionnez Vérifier ou CMD Shift C).
2. Ouvrez le menu de commande Devtools (CMD Shift P sur Mac et Ctrl Shift P sur Windows).
3. Sélectionnez Afficher le rendu dans le menu des commandes.
4. Sélectionnez le défaut dans le panneau de rendu .

Nous utilisons la vision floue comme exemple, mais Devtools a d'autres options, notamment: la cécité pleine couleur, la cécité de couleur partielle, la cécité tuéanée et la cécité couleur totale.

Comme un tel outil, il est conçu pour compléter nos (espérons-le) les compétences d'accessibilité existantes. En d'autres termes, il n'est pas instructif, mais a un impact sur la conception et l'expérience utilisateur que nous créons.

Voici quelques ressources supplémentaires sur l'accessibilité et la simulation à basse vision:

• Conditions d'accessibilité pour les personnes à faible vision (W3C)
• Améliorer l'accessibilité des pages en simulant les défauts de vision

Obtenir le timing des performances

Les panneaux de performance dans Devtools ressemblent parfois à un mélange désordonné de formes et de couleurs.

La mise à jour de ceci est formidable car elle fait un meilleur travail de présentation de mesures de performance significatives.

Ce que nous voulons regarder, c'est le rectangle de synchronisation supplémentaire illustré dans la synchronisation dans l'enregistrement du panneau de performances. Cela met en évidence:

• DomContent Télélé: événement tiré lorsque le chargement HTML initial
• Premier tirage: lorsque le navigateur tire pour la première fois des pixels sur l'écran
• Premier dessin de contenu: le navigateur attire le point de contenu du DOM, ce qui indique à l'utilisateur que le contenu se charge
• onload: lorsque la page et toutes ses ressources sont chargées
• Dessin de contenu maximum: la plus grande image ou élément texte rendu dans la fenêtre

De plus, si vous trouvez le plus grand événement de dessin de contenu dans l'enregistrement du panneau de performances, vous pouvez cliquer sur celui-ci pour plus d'informations.

Bien qu'il y ait beaucoup d'informations précieuses ici, les "nœuds pertinents" peuvent être le projet le plus utile car il spécifie quel élément provoque l'événement LCP.

Pour essayer cette fonctionnalité:

1. Ouvrez Devtools et accédez au panneau de performances
2. Cliquez sur "Démarrer l'analyse et la page de rechargement"
3. Observer les indicateurs de synchronisation dans la partie de synchronisation du record
4. Cliquez sur chaque métrique pour afficher les informations supplémentaires que vous avez obtenues

Surveiller les performances

Si vous souhaitez commencer avec Devtools rapidement et que vous avez essayé le phare, je recommande la fonctionnalité de moniteur de performances. C'est un peu comme avoir webpagest.org à portée de main, comme l'utilisation du processeur.

Voici comment y accéder:

1. Ouvert Devtools
2. Ouvrez le menu de commande (CMD Shift P sur Mac et Ctrl Shift P sur Windows)
3. Sélectionnez "Afficher le moniteur de performances" dans le menu de commande
4. Interagir avec le site Web et parcourir
5. Résultats de l'observation

Les moniteurs de performance peuvent vous donner des mesures intéressantes, mais, contrairement au phare, cela vous oblige à trouver comment les interpréter vous-même et agir. Aucun conseil n'a été fourni. Vous devez étudier vous-même le tableau d'utilisation du processeur et demander à 90% s'il est acceptable (peut ne pas).

Le moniteur de performance a une légende interactive où vous pouvez activer et désactiver les mesures, par exemple:

• Utilisation du processeur
• Taille de tas JS
• Nœud DOM
• Écouteur de l'événement JS
• document
• Cadre de document
• Disposition / seconde
• Recalcul du style / seconde

Présentation du CSS et aperçu local

CSS-Tricks a introduit ces fonctionnalités, alors vérifiez-la!

• Présentation du CSS: Un panneau de Devtools pratique qui fournit beaucoup de statistiques intéressantes sur le CSS utilisé par la page
• Superposition locale: une fonctionnalité puissante qui vous permet d'écraser des sites Web de production avec des ressources locales afin que vous puissiez facilement prévisualiser les modifications

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

Je suis sûr que vous avez remarqué que j'utilise Chrome tout au long de l'article. Ceci est mon navigateur personnel. C'est-à-dire qu'il vaut la peine d'être considéré:

• Firefox Devtools a fière allure en ce moment
• Alors que Microsoft Edge se développe de Chromium, il bénéficiera également de ces fonctionnalités Devtools
• Comme en témoignent les notes de version de prévisualisation de la technologie Safari (recherchez l'inspecteur Web sur cette page), Safari Devtools a fait de grands progrès

En d'autres termes, veuillez faire attention, car il s'agit d'une zone en croissance rapide!

en conclusion

Nous avons couvert beaucoup en très peu de temps!

• Lighthouse: un panneau qui offre des performances, l'accessibilité, le référencement et les conseils et suggestions des meilleures pratiques.
• Vérifier les éléments: fonctionnalité d'amélioration pour vérifier les éléments, qui fournit des informations d'accessibilité pour vérifier les infractions des éléments
• Déficits de vision simulés: une fonctionnalité dans le panneau de rendu pour visualiser les pages dans une perspective à basse vision.
• Timinal du panneau de performances: Autres mesures dans l'enregistrement du panneau de performances, affichant des statistiques orientées utilisateur telles que le dessin de contenu maximum
• Moniteur de performance - Visualisation en temps réel des métriques de performances actuelles du site Web telles que l'utilisation du processeur et la taille DOM

Si vous souhaitez connaître les dernières mises à jour et obtenir plus de 200 conseils de développement Web, consultez mes conseils de développement de la liste de diffusion! J'ai également un cours vidéo avancé sur moderndevtools.com. Et j'ai tendance à publier de nombreuses ressources de développement Web supplémentaires sur Twitter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!