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

Jecelyn Yeen

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

De nouveaux types de couleurs et espaces CSS seront bientôt disponibles 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 7 nouvelles gammes, comme indiqué dans la spécification CSS Color Level 4. Consultez le Guide de couleurs CSS haute définition pour en savoir plus sur les options de couleurs 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 Calculé. Résultat color-mix dans le volet "Computed" (Calculé).

Le sélecteur de couleur est compatible avec 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). Nous avons également ajouté une ligne de délimitation entre les gammes sRGB et display-p3 afin de mieux comprendre la gamme de couleurs que vous avez sélectionnée. Délimitation de gamme

Les outils de développement permettent de convertir les couleurs d'un format de couleur à un autre. Utilisez l'icône Modifier le format de couleur pour accéder au pop-up de conversion, ou utilisez simplement la touche Shift et cliquez sur un échantillon de couleur dans le volet Styles. Convertir des couleurs d'un format de couleur à un autre

Lors de la conversion, il est important de savoir si la conversion a été tronqué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 rognage. Avertissement d'écrêtage des couleurs.

De plus, vous pouvez choisir les couleurs à l'écran à l'aide du nouveau raccourci. Appuyez sur la touche "c". pour activer la pipette, puis appuyez sur Escape pour la 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 colorimétrique sRVB, l'outil Pipette réduit la couleur à 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 afin de faire de 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 au niveau des points d'arrêt

Le volet Breakpoints (Points d'arrêt) repensé 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 à retenir: - Les deux options d'exception de pause ont été déplacées dans le volet Breakpoints (Points d'arrêt) et étiquetées avec du texte pour rendre le processus plus explicite. Suspendre les options d'exception.

  • Les points d'arrêt sont regroupés par fichier, classés par numéro de ligne ou de colonne. Ils peuvent être réduits. Regroupez les points d'arrêt par fichier.

  • De nouvelles options permettent de désactiver, supprimer et 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 de point d'arrêt ou basculer vers un point de journalisation. Boîte de dialogue de modification du point d'arrêt.

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

Problèmes Chromium: 1407586, 1402891, 1402893

Raccourcis personnalisables de l'Enregistreur

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

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

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

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

Si vous travaillez dans un autre panneau et que vous souhaitez démarrer un enregistrement de parcours utilisateur, utilisez la commande Create a new record (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

Mise en surbrillance de la syntaxe améliorée pour Angular

Les outils de développement ont amélioré la mise en surbrillance de la syntaxe des modèles HTML Angular afin de faciliter la lecture du code et la reconnaissance de 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 Stockage en cache se trouve désormais dans la section Stockage du panneau Application, tandis que le volet Cache amélioré a été déplacé vers la section Services d'arrière-plan. Caches dans le panneau "Application".

Problème Chromium: 1407166

Points importants divers

Voici quelques correctifs importants dans cette version:

  • Les outils de développement ont été mis à jour afin de respecter le paramètre Désactiver le cache lors du chargement de sourcesmaps. (1407084).
  • Désormais, le panneau Éléments se met automatiquement au point sur le premier élément correspondant dans les résultats de recherche. (1381853).
  • Divers correctifs 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 d'expressions avec des membres de classe privée. (1381806). Évaluer des expressions avec des membres de classe privée

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   Plus > 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement