Cette page a été traduite par l'API Cloud Translation.

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 les messages dans la console sans encombrer votre code avec des appels console.log().

Pour ajouter un point de journalisation:

Effectuez un clic droit sur le numéro de la ligne à laquelle vous souhaitez ajouter le point de journalisation.

Figure 1 : Ajouter un point de journalisation
Sélectionnez Add logpoint (Ajouter un point de journalisation). L'éditeur de points d'arrêt s'affiche.

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

Image 3. Saisir l'expression de point de journalisation

Astuce 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 les sections Toujours consigner les objets et Raccourci des valeurs de propriété d'objet.
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 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.

Résultat de l'expression de point de journalisation dans la console

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

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

Info-bulles détaillées en mode Inspecter

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.

Inspecter un nœud

Figure 6. Inspecter un nœud

Pour inspecter un nœud:

Cliquez sur Inspecter .

Astuce Pointez sur Inspecter pour afficher le raccourci clavier correspondant.
Dans la fenêtre d'affichage, pointez sur le nœud.

Exporter les données de couverture de code

Les données de couverture du code peuvent désormais être exportées sous forme de fichier 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 est 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 est le décalage de départ d'une plage utilisée. end est le décalage de fin. text correspond au texte intégral du fichier.

Dans l'exemple ci-dessus, la plage 0 à 21 correspond à body { margin: 1em; }, et la plage 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:

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

Figure 7 : Menu de commandes
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"
Cliquez sur Actualiser . Les outils de développement rechargent la page et enregistrent la quantité de code utilisée par rapport au volume expédié.
Cliquez sur Export (Exporter) pour exporter les données dans un fichier JSON.

La couverture de 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 Chromium n° 717195 pour signaler des bugs ou suggérer des améliorations.

Naviguer dans la console à l'aide du clavier

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

Appuyez sur Maj+Tabulation pour 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. Appuyez sur Entrée pour ouvrir le lien dans un nouvel onglet. Appuyez sur la flèche Gauche pour mettre en surbrillance l'ensemble du message (voir la Figure 13).

Sélectionner un lien

Figure 11 : Sélectionner un lien

Appuyez sur la flèche Haut pour activer le lien suivant.

Sélectionner un autre lien

Figure 12. Sélectionner un autre lien

Pour sélectionner l'ensemble du message, appuyez de nouveau sur la flèche Haut.

Cibler l'intégralité d'un message

Figure 13 : Cibler l'intégralité d'un message

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

Développer une trace de pile réduite

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

Appuyez sur la flèche Gauche pour réduire le message ou le résultat développé.

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

Ligne de 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 de rapport de contraste AAA. La ligne AA existe depuis Chrome 65.

La ligne AA (en haut) et la ligne AAA (en bas)

Figure 15 : La ligne AA (en haut) et la ligne AAA (en bas)

Les couleurs entre les deux lignes représentent les couleurs qui respectent la recommandation AA, mais pas celle de l'AAA. Lorsqu'une couleur répond à la recommandation de l'AAA, tout élément du même côté de cette couleur est également conforme à 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 respecte même pas la recommandation AA.

Astuce En général, vous pouvez améliorer la lisibilité de vos pages en augmentant la quantité de texte conforme à la recommandation AAA. S'il n'est pas possible de respecter la recommandation AAA pour une raison quelconque, essayez au moins de respecter la recommandation AA.

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

Consultez le problème Chromium n° 879856 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 remplacements de géolocalisation personnalisés.

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

Figure 16 : Menu de commandes
Saisissez sensors, sélectionnez Afficher les capteurs, puis appuyez sur Entrée. L'onglet Capteurs s'ouvre.

Figure 17 : Onglet "Capteurs"
Dans la section Géolocalisation, cliquez sur Gérer. La page Paramètres > Géolocalisations s'ouvre.

Figure 18 : Onglet "Géolocalisations" dans les paramètres
Cliquez sur Ajouter un établissement.
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 Chromium n° 649657 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.

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

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

Pour activer le pliage de code:

Appuyez sur F1 pour ouvrir Paramètres.
Sous Settings > Preferences > Sources (Paramètres > Préférences > Sources), activez le pliage de code.

Pour plier un bloc de code:

Placez le pointeur de la souris sur le numéro de ligne où commence le bloc.
Cliquez sur Fold (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 de socket Web.

Onglet "Messages"

Figure 21 : Onglet "Messages"

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

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.