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

Kayce Basques
Kayce Basques
X GitHub

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" fonctionne désormais avec Lighthouse. Lighthouse propose 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 sont vos scores globaux pour chacune de ces catégories. Le reste du rapport détaille chacun des tests qui ont déterminé vos scores. Améliorez la qualité de votre page Web en corrigeant les tests qui ont échoué.

Rapport Lighthouse

Figure 1 : Rapport Lighthouse

Pour auditer une page :

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

Lighthouse à Google I/O 2017

Regardez la vidéo 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 de Lighthouse lors de Google I/O 2017 ci-dessous.

Vous avez une idée d'audit Lighthouse ? Postez-le ici !

Badges tiers

Utilisez des badges tiers pour obtenir plus d'informations sur les entités qui effectuent des requêtes réseau sur une page, qui enregistrent des informations dans la console et qui exécutent du code JavaScript.

Pointeur sur un badge tiers dans le panneau "Réseau"

Figure 2 : Pointeur sur un badge tiers dans le panneau "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 Arborescence des appels et De bas en haut pour regrouper l'activité d'enregistrement des performances par entités tierces à l'origine des activités. Consultez Premiers pas avec l'analyse des performances d'exécution pour découvrir comment analyser les performances avec les outils de développement.

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 soyez en pause à 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 effectuer un clic 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 parcourez le code, maintenez la touche Cmd (Mac) ou Ctrl (Windows, Linux) enfoncée, puis cliquez pour passer à cette ligne de code. Les outils de développement mettent en surbrillance les destinations vers lesquelles il est possible de passer en bleu.

Continuer jusqu'ici

Figure 5. Continuer jusqu'ici

Pour découvrir les bases du débogage dans les outils de développement, consultez Premiers pas avec le débogage JavaScript.

Entrer dans une fonction asynchrone

L'équipe DevTools s'est fixé pour objectif de rendre le débogage du code asynchrone prévisible et de vous fournir un historique complet de l'exécution asynchrone.

La nouvelle commande gestuelle "Continuer ici" fonctionne également avec le code asynchrone. Lorsque vous maintenez la touche Cmd (Mac) ou Ctrl (Windows, Linux) enfoncée, les outils de développement mettent en surbrillance en vert les destinations asynchrones vers lesquelles il est possible d'accéder.

Pour obtenir un exemple, consultez la démo ci-dessous issue de la conférence I/O sur les outils de développement.

Modifications

Aperçus d'objets plus informatifs dans la console

Auparavant, lorsque vous consigniez ou évaluiez un objet dans la console, celle-ci 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 permettait d'afficher un aperçu des objets

Figure 6. Comment la console permettait d'afficher un aperçu des objets

Comment la console prévisualise désormais les objets

Figure 7 : Comment la console prévisualise 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'origine de 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 la fenêtre d'affichage.

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 indiquer le code utilisé. L'onglet Couverture vous indique désormais en temps réel le code utilisé.

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

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

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

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

Options de limitation de bande passante réseau plus simples

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

Nouvelles options de limitation de la bande passante réseau

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

Les options de limitation ont été modifiées pour correspondre à d'autres outils de limitation au niveau du noyau. Les outils de développement n'affichent 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 refléter 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 de la surcharge de performances. La surcharge est désormais suffisamment minime pour activer la fonctionnalité par défaut. Si vous préférez désactiver les traces de pile asynchrones, vous pouvez le faire dans Paramètres ou en exécutant la commande Do not capture async stack traces dans le menu de commandes.

Outils de développement à 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 l'année écoulée et sur les grands thèmes qu'elle abordera dans un avenir proche.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.