BT

Nouveau Early adopter ou innovator ? InfoQ a travaillé sur de nouvelles fonctionnalités pour vous. En savoir plus

Mise à jour de Chrome DevTools

| par David Iffland , traduit par Nicolas Frankel le 29 mai 2017. Durée de lecture estimée: 2 minutes |

A Google I/O 2017, Paul Irish a présenté "DevTools State of the Union 2017" où il a mis en exergue un certain nombre de nouvelles fonctionnalités qui devraient aider les développeurs à rationaliser leur code et à faire face aux exigences actuelles de JavaScript.

En 2017, les développeurs Web recherchent de nouvelles façons d'améliorer les performances et l'optimisation des performances de la page que l'utilisateur expérimente actuellement est maintenant considérée comme la plus grande opportunité d'amélioration. Selon Irish :

Le code le plus rapide du navigateur est le code qui ne s'exécute jamais. Mieux encore, le code le plus rapide est le code qui n'est même pas téléchargé. Et si nous pouvions vous donner une meilleure idée de ce qui est actuellement utilisé dans la page ?

Pour cela, DevTools offre maintenant un nouveau Profiler de couverture qui affichera le pourcentage de code JavaScript et CSS utilisé par le navigateur.

Cliquer sur une ligne sautera à ce fichier et indiquera quelles parties des fichiers sont effectivement utilisées.

CSS est particulièrement intéressant parce que le navigateur sait ce qui est appliqué à tout moment et peut fournir un aperçu unique des parties du CSS de la page qui sont réellement utilisées.

De plus, les captures d'écran de la page complète sont également nouvelles. Auparavant, les développeurs pouvaient réaliser une capture d'écran de la page, mais cela ne faisait que capturer ce qui était visible sur l'écran. Avec cette nouvelle fonctionnalité, la totalité de la page est capturée, pas uniquement la partie visible.

Le panneau Audit a été remplacé par une version intégrée de l'outil Lighthouse. Cet outil peut réaliser un audit de la page en matière de Performances, de Bonnes Pratiques, d'Accessibilité et de Web Apps Progressive. Auparavant, l'outil était disponible via une extension ou comme outil en ligne de commande node. Lighthouse exécutera la page à travers une série de tests tels que différentes tailles de périphériques et des vitesses de réseau. Il vérifiera également la conformité aux consignes d'accessibilité telles que le contraste des couleurs et les meilleures pratiques ARIA.

L'outil produit ensuite un rapport aisé à lire avec des suggestions implémentables.

Au-delà de cette sélection limitée, il existe de nombreuses autres fonctionnalités disponibles, telles que des aperçus d'objets en ligne et des améliorations significatives dans la capacité de déboguer le code asynchrone.

La vidéo complète de la session d'Irish est disponible sur YouTube. Beaucoup de ces nouvelles fonctionnalités seront disponibles dans Chrome 59 et sont disponibles dès maintenant dans Chrome Canary.

Evaluer cet article

Pertinence
Style

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Se connecter à InfoQ pour interagir sur ce qui vous importe le plus.


Récupérer votre mot de passe

Follow

Suivre vos sujets et éditeurs favoris

Bref aperçu des points saillants de lindustrie et sur le site.

Like

More signal, less noise

Créez votre propre flux en choisissant les sujets que vous souhaitez lire et les éditeurs dont vous désirez suivre les nouvelles.

Notifications

Restez à jour

Paramétrez vos notifications et ne ratez pas le contenu qui vous importe

BT