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

Kayce Basques

Voici les nouveautés des outils pour les développeurs dans Chrome 73.

Version vidéo de ces notes de version

Logpoints

Utilisez des points de journalisation pour consigner des messages dans la console sans encombrer votre code avec des appels console.log().

Pour ajouter un point de journalisation :

1. Effectuez un clic droit sur le numéro de ligne où vous souhaitez ajouter le point de journalisation.

   

   Figure 1 : Ajouter un point de journalisation

2. Sélectionnez Ajouter un point de journalisation. L'éditeur de points d'arrêt s'affiche.

   

   Figure 2 : Éditeur de points d'arrêt

3. Dans l'éditeur de points d'arrêt, saisissez l'expression que vous souhaitez consigner dans la console.

   

   Figure 3. Saisir l'expression du point de journalisation

   Conseil : Lorsque vous enregistrez une variable (par exemple, TodoApp), enveloppez-la dans un objet (par exemple, {TodoApp}) pour enregistrer son nom et sa valeur dans la console. Pour en savoir plus sur cette syntaxe, consultez Toujours consigner les objets et Raccourci pour la valeur de la propriété de l'objet.

4. Appuyez sur Entrée ou cliquez en dehors de l'éditeur de points d'arrêt pour enregistrer. Le badge orange au-dessus du numéro de ligne représente le point de journalisation.

   

   Figure 4. Badge de point de journalisation orange à la ligne 174

La prochaine fois que la ligne s'exécutera, les outils de développement enregistreront le résultat de l'expression du point de journalisation dans la console.

Figure 5. Résultat de l'expression Logpoint dans la console

Consultez le problème Chromium 700519 pour signaler des bugs ou suggérer des améliorations.

Info-bulles détaillées en mode Inspecter

Lorsque vous inspectez un nœud, les outils de développement affichent désormais une info-bulle développée contenant des informations importantes courantes telles que la taille et la couleur de la police, le rapport de contraste et les dimensions du modèle de boîte.

Figure 6. Inspecter un nœud

Pour inspecter un nœud :

1. Cliquez sur Inspecter .

   Conseil : Pointez sur Inspecter pour afficher son raccourci clavier.

2. Dans votre fenêtre d'affichage, pointez sur le nœud.

Exporter les données de couverture du code

Les données de couverture du code peuvent désormais être exportées au format JSON. Le fichier JSON se présente comme suit :

[   {     "url": "https://wndt73.glitch.me/style.css",     "ranges": [       {         "start": 0,         "end": 21       },       {         "start": 45,         "end": 67       }     ],     "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"   },   ... ] 

url correspond à l'URL du fichier CSS ou JavaScript analysé par les outils de développement. ranges décrit les parties du code qui ont été utilisées. start correspond au décalage de début d'une plage utilisée. end correspond au décalage de fin. text correspond au texte intégral du fichier.

Dans l'exemple ci-dessus, la plage de 0 à 21 correspond à body { margin: 1em; } et la plage de 45 à 67 correspond à h1 { color: #317EFB; }. En d'autres termes, les premier et dernier ensembles de règles ont été utilisés, mais pas celui du milieu.

Pour analyser la quantité de code utilisée lors du chargement de la page et exporter les données :

1. Appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu de commandes.

   

   Figure 7 : Menu de commandes

2. Commencez à saisir coverage, sélectionnez Afficher la couverture, puis appuyez sur Entrée.

   

   Figure 8. Afficher la couverture

   L'onglet Couverture s'ouvre.

   

   Figure 9. Onglet "Couverture"

3. Cliquez sur Actualiser . Les outils de développement rechargent la page et enregistrent la quantité de code utilisée par rapport à celle fournie.

4. Cliquez sur Exporter pour exporter les données au format JSON.

La couverture du code est également disponible dans Puppeteer, un outil d'automatisation du navigateur géré par l'équipe DevTools. Voir Couverture.

Consultez le problème Chromium 717195 pour signaler des bugs ou suggérer des améliorations.

Parcourir la console avec le clavier

Vous pouvez désormais utiliser le clavier pour parcourir la console. Voici un exemple.

Appuyer sur Maj+Tabulation permet de sélectionner le dernier message (ou le résultat d'une expression évaluée). Si le message contient des liens, le dernier lien est mis en surbrillance en premier. Appuyer sur Entrée ouvre le lien dans un nouvel onglet. Appuyer sur la touche flèche vers la gauche met en surbrillance l'intégralité du message (voir Figure 13).

Figure 11 : Sélectionner un lien

Appuyer sur la flèche vers le haut permet de sélectionner le lien suivant.

Figure 12. Effectuer un focus sur un autre lien

Si vous appuyez de nouveau sur la flèche vers le haut, l'intégralité du message est sélectionnée.

Figure 13. Cibler un message entier

Appuyer sur la flèche vers la droite permet de développer une trace de pile réduite (ou un objet, un tableau, etc.).

Figure 14. Développer une trace de pile réduite

Appuyer sur la flèche vers la gauche permet de réduire un message ou un résultat développé.

Consultez le problème Chromium n° 865674 pour signaler des bugs ou suggérer des améliorations.

Ligne du rapport de contraste AAA dans le sélecteur de couleur

Le sélecteur de couleur affiche désormais une deuxième ligne pour indiquer les couleurs qui répondent à la recommandation concernant le rapport de contraste AAA. La ligne AA est présente depuis Chrome 65.

Figure 15. Lignes AA (en haut) et AAA (en bas)

Les couleurs entre les deux lignes représentent celles qui répondent à la recommandation AA, mais pas à la recommandation AAA. Lorsqu'une couleur répond à la recommandation AAA, tout ce qui se trouve du même côté de cette couleur répond également à la recommandation. Par exemple, dans la figure 15, tout ce qui se trouve en dessous de la ligne inférieure est AAA, et tout ce qui se trouve au-dessus de la ligne supérieure ne répond même pas à la recommandation AA.

Conseil : En général, vous pouvez améliorer la lisibilité de vos pages en augmentant la quantité de texte qui répond à la recommandation AAA. Si vous ne pouvez pas respecter la recommandation AAA pour une raison quelconque, essayez au moins de respecter la recommandation AA.

Pour savoir comment accéder à cette fonctionnalité, consultez Rapport de contraste dans le sélecteur de couleur.

Consultez le problème 879856 de Chromium pour signaler des bugs ou suggérer des améliorations.

Enregistrer des remplacements de géolocalisation personnalisés

L'onglet "Capteurs" vous permet désormais d'enregistrer des remplacements de géolocalisation personnalisés.

1. Appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu de commandes.

   

   Figure 16 : Menu de commandes

2. Saisissez sensors, sélectionnez Afficher les capteurs, puis appuyez sur Entrée. L'onglet Capteurs s'ouvre.

   

   Figure 17 : L'onglet "Capteurs"

3. Dans la section Géolocalisation, cliquez sur Gérer. Paramètres > Géolocalisations s'ouvre.

   

   Figure 18 : Onglet "Géolocalisations" dans les paramètres

4. Cliquez sur Ajouter un établissement.

5. Saisissez un nom de lieu, une latitude et une longitude, puis cliquez sur Ajouter.

   

   Figure 19. Ajouter une géolocalisation personnalisée

Consultez le problème Chromium 649657 pour signaler des bugs ou suggérer des améliorations.

Repliage du code

Les panneaux Sources et Réseau sont désormais compatibles avec le pliage de code.

Figure 20. Les lignes 54 à 65 ont été pliées

Pour activer le pliage de code :

1. Appuyez sur F1 pour ouvrir les Paramètres.
2. Sous Paramètres > Préférences > Sources, activez Pliage du code.

Pour plier un bloc de code :

1. Pointez sur le numéro de ligne où commence le bloc.
2. Cliquez sur Plier .

Consultez le problème Chromium n° 328431 pour signaler des bugs ou suggérer des améliorations.

Onglet "Messages"

L'onglet Frames a été renommé Messages. Cet onglet n'est disponible que dans le panneau Réseau lors de l'inspection d'une connexion WebSocket.

Figure 21. Onglet "Messages"

Consultez le problème 802182 de Chromium pour signaler des bugs ou suggérer des améliorations.

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.

• 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 de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

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.