Nouveautés des outils de développement (Chrome 60)

Kayce Basques

Bienvenue ! Voici les nouvelles fonctionnalités et les principaux changements apportés aux outils pour les développeurs dans Chrome 60:

Regardez la version vidéo de ces notes de version ci-dessous ou lisez la suite pour en savoir plus.

Nouvelles fonctionnalités

Nouveau panneau "Audits", optimisé par Lighthouse

Le panneau "Audits" est désormais basé sur Lighthouse. Lighthouse fournit un ensemble complet de tests pour mesurer la qualité de vos pages Web.

Les scores en haut de la page pour Progressive Web App, Performances, Accessibilité et Bonnes pratiques correspondent à vos scores cumulés pour chacune de ces catégories. Le reste du rapport présente une analyse de chacun des tests qui ont déterminé vos scores. Améliorez la qualité de votre page Web en corrigeant les tests échoués.

Un rapport Lighthouse

Figure 1 : Un rapport Lighthouse

Pour effectuer un audit d'une page:

  1. Cliquez sur l'onglet Audits.
  2. Cliquez sur Effectuer un audit.
  3. Cliquez sur Exécuter l'audit. Lighthouse configure DevTools pour émuler un appareil mobile, exécute un certain nombre de tests sur la page, puis affiche les résultats dans le panneau Audits (Audits).

Lighthouse à Google I/O 2017

Regardez la présentation sur les outils de développement de Google I/O 2017 ci-dessous pour en savoir plus sur l'intégration de Lighthouse dans les outils de développement.

Contribuer à Lighthouse

Lighthouse est un projet Open Source. Pour en savoir plus sur son fonctionnement et sur la façon de contribuer à son développement, regardez la présentation Lighthouse de Google I/O 2017 ci-dessous.

Avez-vous une idée d'audit Lighthouse ? Publiez-le ici !

Badges tiers

Utilisez des badges tiers pour en savoir plus sur les entités qui envoient des requêtes réseau sur une page, enregistrent des données dans la console et exécutent du code JavaScript.

Pointer sur un badge tiers dans le panneau "Network" (Réseau)

Figure 2 : Pointer sur un badge tiers dans le panneau "Network" (Réseau)

Pointer sur un badge tiers dans la console

Figure 3. Pointer sur un badge tiers dans la console

Pour activer les badges tiers:

  1. Ouvrez le menu Command (Commande).
  2. Exécutez la commande Show third party badges.

Utilisez l'option Grouper par produit dans les onglets Arbre d'appels et De bas en haut pour regrouper l'activité d'enregistrement des performances par entité tierce à l'origine de l'activité. Consultez Premiers pas avec l'analyse des performances d'exécution pour découvrir comment analyser les performances avec DevTools.

Regroupement par produit dans l'onglet "De bas en haut"

Figure 4. Regroupement par produit dans l'onglet De bas en haut

Nouveau geste pour "Continuer ici"

Imaginons que vous vous trouviez sur la ligne 25 d'un script et que vous souhaitiez passer à la ligne 50. Auparavant, vous pouviez définir un point d'arrêt sur la ligne 50 ou cliquer avec le bouton droit sur la ligne et sélectionner Continuer jusqu'ici. Mais il existe désormais un geste plus rapide pour gérer ce workflow.

Lorsque vous exécutez le code, maintenez la touche Commande (Mac) ou Ctrl (Windows, Linux), puis cliquez pour passer à cette ligne de code. DevTools met en surbrillance en bleu les destinations vers lesquelles vous pouvez effectuer un saut.

Continuer ici

Figure 5. Continuer jusqu'ici

Consultez Premiers pas avec le débogage JavaScript pour découvrir les principes de base du débogage dans DevTools.

Déboguer une tâche asynchrone

L'équipe DevTools a pour objectif à court terme de rendre le débogage du code asynchrone prévisible et de vous fournir un historique complet de l'exécution asynchrone.

Le nouveau geste pour "Continuer ici" fonctionne également avec le code asynchrone. Lorsque vous maintenez la touche Commande (Mac) ou Ctrl (Windows, Linux) enfoncée, DevTools met en surbrillance les destinations asynchrones pouvant être sélectionnées en vert.

Pour en savoir plus, regardez la démonstration ci-dessous de la conférence sur les outils de développement lors de la conférence I/O.

Modifications

Aperçus d'objets plus informatifs dans la console

Auparavant, lorsque vous enregistriez ou évaluiez un objet dans la console, elle n'affichait que Object, ce qui n'était pas particulièrement utile. La console fournit désormais plus d'informations sur le contenu de l'objet.

Comment la console prévisualisait les objets

Figure 6. Comment la console utilisait-elle pour prévisualiser les objets ?

Comment la console prévisualise-t-elle désormais les objets ?

Figure 7 : Comment la console prévisualise-t-elle désormais les objets ?

Menu de sélection du contexte plus informatif dans la console

Le menu de sélection du contexte de la console fournit désormais plus d'informations sur les contextes disponibles.

  • Le titre décrit chaque élément.
  • Le sous-titre sous le titre décrit le domaine d'où provient l'élément.
  • Pointez sur un contexte d'iFrame pour le mettre en surbrillance dans la fenêtre d'affichage.

Nouveau menu de sélection du contexte

Figure 8. Lorsque vous pointez sur un iframe dans le nouveau menu de sélection du contexte, il est mis en surbrillance dans le viewport.

Mises à jour en temps réel dans l'onglet "Couverture"

Lorsque vous enregistriez la couverture du code dans Chrome 59, l'onglet Couverture affichait simplement "Enregistrement…", sans aucune visibilité sur le code utilisé. L'onglet Couverture indique désormais en temps réel le code utilisé.

Charger et interagir avec une page à l'aide de l'ancien onglet "Couverture"

Figure 9. Charger et interagir avec une page à l'aide de l'ancien onglet Couverture

Charger et interagir avec une page à l'aide du nouvel onglet "Couverture"

Figure 10 : Charger et interagir avec une page à l'aide du nouvel onglet Couverture

Options de limitation de bande passante réseau plus simples

Les menus de limitation du débit réseau dans les panneaux Réseau et Performances ont été simplifiés pour n'inclure que trois options: Hors connexion, 3G lente, qui est courante dans des pays comme l'Inde, et 3G rapide, qui est courante dans des pays comme les États-Unis.

Nouvelles options de limitation de bande passante réseau

Figure 11 : Nouvelles options de limitation de bande passante réseau

Les options de limitation ont été ajustées pour correspondre à d'autres outils de limitation au niveau du noyau. DevTools n'affiche plus les métriques de latence, de téléchargement et d'importation à côté de chaque option, car ces valeurs étaient trompeuses. L'objectif est de reproduire l'expérience réelle de chaque option.

Piles asynchrones activées par défaut

La case à cocher Async a été supprimée du panneau Sources. Les traces de pile asynchrones sont désormais activées par défaut. Auparavant, cette option était activée par défaut, en raison des coûts liés aux performances. Les frais généraux sont désormais suffisamment faibles pour activer la fonctionnalité par défaut. Si vous préférez désactiver les traces de pile asynchrones, vous pouvez le faire dans Settings (Paramètres) ou en exécutant la commande Do not capture async stack traces dans le Command Menu (Menu de commande).

DevTools à Google I/O 2017

Regardez la conférence du mythique Paul Irish ci-dessous pour en savoir plus sur ce sur quoi l'équipe DevTools a travaillé au cours de la dernière année et sur les grands thèmes qu'elle aborde prochainement.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.