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

Kayce Basques

Voici les nouveautés des outils de développement 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 d'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 de point de journalisation

   Conseil : Lorsque vous déconnectez une variable (par exemple, TodoApp), encapsulez-la dans un objet (par exemple, {TodoApp}) pour déconnecter son nom et sa valeur dans la console. Pour en savoir plus sur cette syntaxe, consultez Enregistrer toujours les objets et Abréviation de la valeur de la propriété d'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 Logpoint orange sur la ligne 174

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

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

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

Info-bulles détaillées en mode d'inspection

Lors de l'inspection d'un nœud, les outils de développement affichent désormais une info-bulle développée contenant des informations couramment importantes 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 le raccourci clavier correspondant.

2. Dans la 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 DevTools. 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 le 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 commande.

   

   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 . DevTools recharge la page et enregistre la quantité de code utilisée par rapport à la quantité envoyée.

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. Consultez la section Couverture.

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

Parcourir la console à l'aide du clavier

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

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

Figure 11 : Effectuer un focus sur un lien

Appuyer sur la flèche Haut permet de mettre en surbrillance le lien suivant.

Figure 12. Effectuer un focus sur un autre lien

Appuyer à nouveau sur la flèche Haut permet de mettre en surbrillance l'intégralité du message.

Figure 13. Mettre en surbrillance l'intégralité d'un message

Appuyer sur la flèche droite développe 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 Gauche réduit un message ou un résultat développé.

Consultez le problème 865674 de Chromium 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 respectent la recommandation de rapport de contraste AAA. La ligne AA existe depuis Chrome 65.

Figure 15. Ligne AA (en haut) et ligne AAA (en bas)

Les couleurs situées entre les deux lignes représentent les couleurs qui respectent la recommandation AA, mais pas la recommandation AAA. Lorsqu'une couleur respecte la recommandation AAA, tout élément situé du même côté de cette couleur respecte également la recommandation. Par exemple, dans la figure 15, tout ce qui se trouve sous la ligne inférieure est de niveau 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 aux recommandations 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 les remplacements de géolocalisation personnalisés

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

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

   

   Figure 16 : Menu de commande

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

   

   Figure 17 : Onglet "Capteurs"

3. Dans la section Position géographique, cliquez sur Gérer. La page Paramètres > Position géographique s'ouvre.

   

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

4. Cliquez sur Ajouter un établissement.

5. Saisissez le nom, la latitude et la longitude d'un lieu, puis cliquez sur Ajouter.

   

   Figure 19 Ajouter une géolocalisation personnalisée

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

Repliage du code

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

Figure 20 Les lignes 54 à 65 ont été repliées

Pour activer le pliage de code:

1. Appuyez sur F1 pour ouvrir Paramètres.
2. Sous Settings > Preferences > Sources, activez Code folding (Réduction du code).

Pour plier un bloc de code:

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

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

Onglet "Messages"

L'onglet Cadres a été renommé Messages. Cet onglet n'est disponible que dans le panneau Network (Réseau) lorsque vous inspectez une connexion Web Socket.

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 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 plates-formes 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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.