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 console.log(). appels.

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.

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 vous déconnecter de son nom et de sa valeur dans la console. Consultez les sections Toujours consigner les objets et Raccourci des valeurs de propriété d'objet pour en savoir plus sur cette syntaxe.
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

Lors de l'exécution suivante de la ligne, les outils de développement consignent le résultat de l'expression de point de journalisation dans la la console Cloud.

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 des informations 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 .

Conseil 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 de 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, le premier et le dernier ensemble de règles ont été utilisés et celle du milieu ne l'était pas.

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

Appuyez sur Ctrl+Maj+P ou Appuyez sur Commande+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 . DevTools actualise la page et enregistre la quantité de code utilisée par rapport au volume expédié.
Cliquez sur Exporter pour exporter le dans un fichier JSON.

La couverture de code est également disponible dans Puppeteer, un outil d'automatisation du navigateur géré par les outils de développement. équipe. 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 évaluation ). Si le message contient des liens, le dernier lien est mis en surbrillance en premier. Appuyer Appuyez sur Entrée pour ouvrir le lien dans un nouvel onglet. Appuyez sur la flèche Gauche pour mettre en surbrillance l'intégralité 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 la pile (ou un objet, un tableau, etc.) activé).

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 au rapport de contraste AAA recommandation. 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 les AAA recommandation. Lorsqu'une couleur répond à la recommandation de l'AAA, tout élément 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 élément au-dessus de la limite supérieure n'est même pas conforme à 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 de l'AAA. Si la recommandation de l'AAA n'est pas possible pour certains essayez de respecter au moins la recommandation de l'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 Ctrl+Maj+P ou Appuyez sur Commande+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. Paramètres > La section 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 Paramètres > Préférences > Les sources activent 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 Network (Réseau) lors de l'inspection d'une connexion WebSocket.

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 vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème 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.