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

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

Jecelyn Yeen

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

De nouveaux espaces et types de couleurs CSS arrivent sur le Web ! Il est tout aussi intéressant de constater que les outils de développement ont introduit de nouveaux outils pour aider les développeurs à créer, convertir et déboguer des couleurs haute définition.

Le volet Styles accepte désormais 12 nouveaux espaces de couleur et sept nouvelles gammes, comme indiqué dans la spécification CSS Color Level 4. Consultez le Guide des couleurs CSS haute définition pour en savoir plus sur les options de couleur disponibles sur le Web.

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

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

Le sélecteur de couleur prend en charge tous les nouveaux espaces de couleur et propose davantage de fonctionnalités. Par exemple, cliquez sur l'échantillon de couleur color(display-p3 1 0 1). Une ligne de délimitation de la gamme a également été ajoutée pour faire la distinction entre les gammes sRGB et display-p3 afin de mieux comprendre la gamme de la couleur sélectionnée.

Les outils de développement permettent de convertir des couleurs entre différents formats de couleur. Utilisez l'icône Change Color Format (Modifier le format de couleur) pour accéder au pop-up de conversion, ou appuyez simplement sur Shift tout en cliquant sur un échantillon de couleur dans le volet Styles (Styles). Conversion des couleurs entre les formats de couleur.

Lors d'une conversion, il est important de savoir si elle a été coupée pour s'adapter à l'espace disponible. Les outils de développement placent une icône d'avertissement à côté de la couleur convertie afin de vous signaler ce rognage. Avertissement de rognage de couleur.

De plus, vous pouvez choisir des couleurs sur votre écran avec le nouveau raccourci. Appuyez sur "c" pour activer la pipette, puis sur Escape pour la désactiver. La pipette n'échantillonne que les couleurs dans 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 rogne la couleur sur 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 des couleurs a été abandonné 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

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

Le nouveau volet Breakpoints (Points d'arrêt) vous permet d'accéder rapidement aux fonctionnalités couramment utilisées, en particulier la désactivation, la modification et la suppression de points d'arrêt.

Voici quelques points importants : - Les deux options d'exception de suspension ont été déplacées dans le volet Breakpoints (Points d'arrêt) et contenant du texte pour plus d'explication. Options de suspension des exceptions.

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.
De nouvelles options permettent de désactiver, supprimer et modifier des points d'arrêt lorsque vous pointez sur un point d'arrêt ou un fichier.
Cliquez sur le bouton "Modifier le point d'arrêt" pour ouvrir l'éditeur de points d'arrêt. À partir de là, vous pouvez saisir la condition du point d'arrêt ou basculer vers un point de journalisation.

Pour en savoir plus sur le débogage avec les outils de développement, consultez la documentation de référence sur le débogage JavaScript.

Problèmes liés à Chromium: 1407586, 1402891, 1402893

Raccourcis personnalisables de l'Enregistreur

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

L'Enregistreur intègre quelques raccourcis clavier pratiques pour accélérer l'enregistrement et la relecture des parcours utilisateur.

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

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

Si vous travaillez dans un autre panneau et souhaitez démarrer un enregistrement de parcours utilisateur, utilisez la commande Create a new recording (Créer un enregistrement) dans le menu Commandes des outils de développement. Créez une commande d'enregistrement.

Problème Chromium: 1339771

Amélioration de la mise en évidence de la syntaxe pour Angular

Les outils de développement ont amélioré la mise en surbrillance de la syntaxe des modèles HTML Angular, ce qui vous permet de lire le code et de reconnaître sa structure plus facilement.

Problèmes Chromium: 1385374, 1385678

Réorganiser les caches dans le panneau "Application"

Le volet Stockage du cache se trouve désormais dans la section Stockage du panneau Application, tandis que le volet Cache amélioré a été déplacé dans la section Services d'arrière-plan. Caches dans le panneau "Application"

Problème Chromium: 1407166

Points forts divers

Voici quelques correctifs importants 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).
Désormais, le panneau Éléments se met automatiquement au point automatiquement sur le premier élément correspondant dans les résultats de recherche. (1381853).
Diverses corrections pour 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, les outils de développement prennent désormais en charge l'évaluation des expressions avec des membres de classe privés. (1381806)

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.