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

Jecelyn Yeen

Déboguer les couleurs HD avec le volet "Styles"

De nouveaux types et espaces de couleurs CSS arrivent sur le Web ! Nous sommes également ravis que les outils pour les développeurs aient introduit de nouveaux outils pour aider les développeurs à créer, convertir et déboguer les couleurs haute définition.

Le volet Styles est désormais compatible avec 12 nouveaux espaces colorimétriques et 7 nouvelles gammes, comme indiqué dans la spécification CSS Color Level 4. Pour en savoir plus sur les options de couleur disponibles sur le Web, consultez le Guide CSS sur les couleurs haute définition.

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 couleur finale dans le volet Calculé. Résultat de color-mix dans le volet "Calculé".

Le sélecteur de couleurs est compatible avec tous les nouveaux espaces colorimétriques et propose davantage de fonctionnalités. Par exemple, cliquez sur la palette de couleurs color(display-p3 1 0 1). Une ligne de limite de gamut a également été ajoutée pour distinguer les gamuts sRGB et display-p3, ce qui vous permet de mieux comprendre le gamut de la couleur sélectionnée. Ligne de limite de gamut.

Les outils de développement permettent de convertir les couleurs entre différents formats. Utilisez l'icône Modifier le format de couleur pour accéder au pop-up de conversion, ou cliquez simplement sur un échantillon de couleur dans le volet Styles en appuyant sur Shift. Convertir des couleurs entre différents 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 placent une icône d'avertissement à côté de la couleur convertie pour vous avertir de ce clipping. Avertissement de saturation des couleurs.

De plus, vous pouvez choisir des couleurs sur votre écran grâce au nouveau raccourci. Appuyez sur "c" pour activer le sélecteur de couleur et sur Escape pour le désactiver. L'outil Pipette ne sélectionne 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 colorimétrique sRVB, l'outil Pipette écrête la couleur pour la ramener à la couleur la plus proche dans l'espace sRVB, à savoir 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 place au nouveau format de couleur HD. Obsolescence du paramètre de format de couleur.

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

Expérience utilisateur améliorée pour les points d'arrêt

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

Voici quelques points importants : - Les deux options d'exception de pause ont été déplacées vers le volet Points d'arrêt et ont été étiquetées avec du texte pour les rendre plus explicites. Options d'exception pour la mise en veille.

  • Les points d'arrêt sont regroupés par fichier, classés par numéro de ligne ou de colonne, et peuvent être réduits. 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 points 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 pas des raccourcis ? Pas de problème, cliquez sur le bouton ? pour afficher tous les raccourcis à tout moment. Raccourcis de l'enregistreur.

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

Si vous travaillez dans un autre panneau et que vous souhaitez commencer à enregistrer un parcours utilisateur, utilisez la commande Créer un enregistrement dans le menu de commandes des outils de développement pour commencer. Créez une commande d'enregistrement.

Problème Chromium : 1339771

Meilleure mise en surbrillance de la syntaxe pour Angular

Les outils de développement ont amélioré la mise en surbrillance de la syntaxe pour les modèles HTML Angular, ce qui vous permet de lire plus facilement le code et d'identifier sa structure. 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 se trouve désormais dans la section Storage du panneau Application, tandis que le volet Back/forward cache a été déplacé vers la section Background Services. Caches dans le panneau "Application".

Problème Chromium : 1407166

Autres points importants

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 concentre désormais instantanément sur le premier élément correspondant dans les résultats de recherche. (1381853)
  • Diverses corrections pour améliorer la fiabilité des cartes sources et des points d'arrêt. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • Pour faciliter le débogage, les outils de développement permettent désormais d'évaluer des expressions avec des membres de classe privés. (1381806) Évaluer des expressions avec des membres de classe privés.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.