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

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

• Un nouveau panneau "Audits", incluant des tests pour les progressive web apps, les performances, l'accessibilité et les bonnes pratiques.
• Badges tiers : Découvrez quels tiers effectuent des requêtes réseau, enregistrent des informations dans la console et exécutent du code JavaScript.
• Continuer jusqu'ici Un nouveau geste qui peut accélérer votre workflow de débogage JavaScript.
• Débogage prévisible pour JavaScript asynchrone
• Aperçus des objets dans la console
• Mises à jour en temps réel dans l'onglet "Couverture" :
• Nouveau menu permettant de sélectionner des contextes dans la console.
• Options de limitation de la bande passante réseau plus simples :
• Les traces de pile asynchrones sont activées par défaut.

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 optimisé par 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é.

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 d 'y contribuer, regardez la vidéo sur Lighthouse 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.

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

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.

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 désormais, il existe 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.

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.

Figure 6. Comment la console permettait d'afficher un aperçu des 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.

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é.

Figure 9. Charger une page et interagir avec elle à l'aide de l'ancien 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).

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 Chrome DevTools

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les 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 de DevTools.