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 concernant les 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 dans laquelle vous souhaitez ajouter le point de journalisation.

Figure 1 : Ajouter un point de journalisation
Sélectionnez 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 "Logpoint"

Astuce : Lorsque vous vous déconnectez d'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 la section Toujours consigner les objets et le Raccourci vers les valeurs des propriétés d'objets.
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 orange "Logpoint" à la ligne 174

Lors de la prochaine exécution de la ligne, les outils de développement enregistreront le résultat de l'expression "Logpoint" dans la console.

Le résultat de l'expression "Logpoint" dans la console

Figure 5. Le résultat de l'expression "Logpoint" 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 généralement importantes telles que la taille et la couleur de la police, le rapport de contraste et les dimensions du modèle de zone.

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 de 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 est l'URL du fichier CSS ou JavaScript analysé par les outils de développement. ranges décrit les parties du code utilisées. start est le décalage de départ d'une plage utilisée. end est le décalage de fin. text est le texte complet 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, 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 Ctrl+Maj+P ou sur Cmd+Maj+P (Mac) pour ouvrir le menu de commandes.

Figure 7 : Le menu Commandes
Commencez à saisir coverage, sélectionnez Show Coverage (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 à la quantité de code expédiée.
Cliquez sur Export (Exporter) pour exporter les données au format JSON.

Une couverture de code est également disponible dans Puppeteer, un outil d'automatisation des navigateurs géré par l'équipe des outils de développement. 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. Exemple :

Appuyer sur Maj+Tabulation sélectionne 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 vers la 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 sélectionner le lien suivant.

Sélection d'un autre lien

Figure 12. Sélection d'un autre lien

Appuyez de nouveau sur la flèche Haut pour sélectionner de nouveau tout le message.

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 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 de rapport de contraste AAA dans le sélecteur de couleur

Le sélecteur de couleurs affiche désormais une deuxième ligne pour indiquer les couleurs qui respectent la recommandation de rapport de contraste AAA. La ligne AA est présente 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 la recommandation AAA. Lorsqu'une couleur respecte la recommandation AAA, tous les éléments du même côté de cette couleur sont également conformes à la recommandation. Par exemple, dans la Figure 15, tout ce qui se trouve sous la ligne inférieure est AAA, et tout élément 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 aux recommandations AAA. Si, pour une raison quelconque, respecter la recommandation AAA n'est pas possible, 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 des 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 sur Cmd+Maj+P (Mac) pour ouvrir le menu de commandes.

Figure 16 : Le menu Commandes
Saisissez sensors, sélectionnez Afficher les capteurs, puis appuyez sur Entrée. L'onglet Sensors (Capteurs) s'ouvre.

Figure 17 : Onglet "Sensors" (Capteurs)
Dans la section Géolocalisation, cliquez sur Gérer. L'option Paramètres > Géolocalisations s'ouvre.

Figure 18 : Onglet "Géolocalisations" dans les paramètres
Cliquez sur Ajouter un établissement.
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 n° 649657 pour signaler des bugs ou suggérer des améliorations.

Repliage du code

Les panneaux Sources et Network acceptent désormais 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 les paramètres.
Sous Settings > Preferences > Sources (Paramètres > Préférences > Sources), activez l'option Code folding (pliage de code).

Pour plier un bloc de code:

Passez la souris sur le numéro de la ligne correspondant au début du bloc.
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 Network lorsque vous inspectez 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

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.