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

Jecelyn Yeen

Déboguer la couleur HD avec le volet "Styles"

De nouveaux types et espaces de couleurs CSS arrivent sur le Web. Nous sommes également ravis d'avoir lancé de nouveaux outils dans DevTools pour aider les développeurs à créer, convertir et déboguer des couleurs haute définition.

Le volet Styles est désormais compatible avec 12 nouveaux espaces de couleurs et 7 nouvelles gammes, comme indiqué dans la spécification CSS Color Level 4. Consultez le guide des couleurs CSS haute définition pour obtenir une compréhension complète des options de couleur disponibles sur le Web.

Voici des exemples de définitions de couleurs CSS avec color(), lch(), oklab() et color-mix(). Exemples de définitions de couleurs CSS.

Lorsque vous utilisez la fonction color-mix(), vous pouvez afficher la sortie de couleur finale dans le volet Computed (Calculé). Résultat de la fonction color-mix dans le volet "Computed" (Calculé).

Le sélecteur de couleurs est compatible avec tous les nouveaux espaces de couleurs et offre plus de fonctionnalités. Par exemple, cliquez sur la palette de couleurs de color(display-p3 1 0 1). Une ligne de démarcation de la gamme a également été ajoutée, permettant de distinguer les gammes sRGB et display-p3 pour mieux comprendre la gamme de la couleur sélectionnée. Ligne de démarcation de la gamme de couleurs.

DevTools permet de convertir des couleurs entre différents formats. Utilisez l'icône Modifier le format de couleur pour accéder à la fenêtre pop-up de conversion, ou appuyez sur Shift et cliquez sur un nuancier de couleur dans le volet Styles. Conversion des couleurs entre les formats de couleur.

Lors de la conversion, il est important de savoir si la conversion a été rognée pour s'adapter à l'espace. Les outils de développement affichent une icône d'avertissement à côté de la couleur convertie pour vous alerter de cette coupure. Avertissement concernant le recadrage de couleur.

De plus, vous pouvez choisir des couleurs à partir de votre écran avec le nouveau raccourci. Appuyez sur "c" pour activer le pipette, puis sur Escape pour le désactiver. L'outil Pipette n'échantillonne que les couleurs de l'espace colorimétrique sRVB. Par exemple, si vous essayez d'échantillonner la couleur color(display-p3 1 0 1), qui se trouve en dehors de l'espace de couleur sRVB, l'outil Pipette écrêtera la couleur à la couleur la plus proche dans l'espace sRVB, qui est le magenta color(display-p3 0.92 0.2 0.97).

Activez la pipette.

Enfin, le paramètre Format de couleur est désormais obsolète pour laisser la place au nouveau format de couleur HD. Abandon du paramètre de format de couleur.

Problèmes Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Amélioration de l'expérience utilisateur avec les points d'arrêt

Le volet Points d'arrêt repensé vous permet d'accéder rapidement aux fonctionnalités couramment utilisées, en particulier pour désactiver, modifier et supprimer des points d'arrêt.

Voici quelques points forts : - Les deux options d'exception de suspension ont été déplacées vers le volet Points d'arrêt et sont accompagnées d'un libellé pour les rendre plus explicites. Options de suspension des exceptions.

  • Les points d'arrêt sont regroupés par fichier, triés par numéro de ligne ou de colonne et peuvent être effondrés. Regroupez les points d'arrêt par fichier.

  • De nouvelles options permettent de désactiver, de supprimer et de modifier les points d'arrêt lorsque vous pointez sur un point d'arrêt ou un fichier. Nouvelles options pour désactiver les points d'arrêt.

  • Cliquez sur le bouton "Modifier le point d'arrêt" pour ouvrir l'éditeur de point d'arrêt. Vous pouvez alors saisir la condition du point d'arrêt ou passer à un point de journalisation. Boîte de dialogue de modification du point d'arrêt.

Consultez la documentation de référence sur le débogage JavaScript pour découvrir comment déboguer avec les outils pour les développeurs.

Problèmes Chromium: 1407586, 1402891, 1402893

Raccourcis personnalisables de l'Enregistreur

Utilisez des raccourcis clavier pour enregistrer et revoir plus rapidement les parcours utilisateur.

L'Enregistreur propose quelques raccourcis clavier pratiques pour enregistrer et revoir plus rapidement les parcours utilisateur.

Vous ne vous souvenez plus des raccourcis ? Aucun problème. Cliquez sur le bouton ? pour afficher tous les raccourcis à tout moment. Raccourcis de l'Enregistreur.

Vous pouvez même personnaliser ces raccourcis via le menu Settings (Paramètres). Personnalisez les raccourcis de l'Enregistreur.

Si vous travaillez dans un autre panneau et que vous souhaitez démarrer un enregistrement du parcours utilisateur, utilisez la commande Create a new recording (Créer un enregistrement) du menu de commandes dans DevTools. Créez une commande d'enregistrement.

Problème Chromium: 1339771

Meilleure mise en surbrillance de la syntaxe pour Angular

DevTools a amélioré la mise en surbrillance de la syntaxe pour les modèles HTML Angular, ce qui vous permet de lire le code et de reconnaître sa structure plus facilement. Mise en surbrillance de la syntaxe pour les modèles HTML Angular.

Problèmes Chromium: 1385374, 1385678

Réorganiser les caches dans le panneau "Application"

Le volet Cache Storage (Espace de stockage du cache) se trouve désormais dans la section Storage (Espace de stockage) du panneau Application, tandis que le volet Back/forward cache (Cache avant/arrière) a été déplacé vers la section Background Services (Services en arrière-plan). Caches dans le panneau "Application".

Problème Chromium: 1407166

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

  • Les outils de développement ont été mis à jour pour respecter le paramètre Désactiver le cache lors du chargement des cartes sources. (1407084)
  • Le panneau Éléments se met désormais automatiquement au premier élément correspondant dans les résultats de recherche. (1381853)
  • Diverses corrections visant à améliorer la fiabilité de la carte source et des points d'arrêt. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • Pour faciliter le débogage, DevTools permet désormais d'évaluer des expressions avec des membres de classe privés. (1381806) Évaluation d'expressions avec des membres de classe privés.

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.

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.