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

Compatibilité avec le Moto G4 en mode Appareil

Après avoir activé la barre d'outils de l'appareil, vous pouvez désormais simuler les dimensions d'un viewport Moto G4 à partir de la liste Device (Appareil).

Simuler un viewport Moto G4

Cliquez sur Afficher le frame de l'appareil pour afficher le matériel du Moto G4 autour du viewport.

Affichage du matériel du Moto G4

Fonctionnalités associées:

  • Ouvrez le menu de commande et exécutez la commande Capture screenshot pour prendre une capture d'écran du viewport qui inclut le matériel du Moto G4 (après avoir activé Afficher le cadre de l'appareil).
  • Limitez le réseau et le processeur pour simuler plus précisément les conditions de navigation sur le Web d'un utilisateur mobile.

Problème Chromium 924693

Informations sur les cookies

Cookies bloqués dans le volet "Cookies"

Le volet "Cookies" du panneau "Application" affiche désormais un arrière-plan jaune pour les cookies bloqués.

Cookies bloqués dans le volet "Cookies" du panneau "Application"

Consultez également Déboguer pourquoi un cookie a été bloqué pour savoir comment accéder à une UI similaire depuis le panneau "Network" (Réseau).

Problème Chromium 1030258

Priorité des cookies dans le volet "Cookies"

Les tableaux des cookies dans les panneaux "Réseau" et "Application" incluent désormais une colonne Priorité.

Problème Chromium 1026879

Modifier toutes les valeurs des cookies

Toutes les cellules des tableaux des cookies sont désormais modifiables, à l'exception de celles de la colonne Taille, car cette colonne représente la taille réseau du cookie, en octets. Pour en savoir plus sur chaque colonne, consultez la section Champs.

Modifier la valeur d'un cookie

Copier en tant que récupération Node.js pour inclure les données de cookie

Effectuez un clic droit sur une requête réseau, puis sélectionnez Copy > Copy as Node.js fetch (Copier > Copier en tant que récupération Node.js) pour obtenir une expression fetch incluant les données de cookie.

Copier en tant que fetch Node.js

Problème Chromium 1029826

Icônes de fichier manifeste d'application Web plus précises

Auparavant, le volet "Fichier manifeste" du panneau "Application" effectuait ses propres requêtes pour afficher les icônes de fichier manifeste d'application Web. DevTools affiche désormais exactement la même icône de fichier manifeste que Chrome.

Icônes dans le volet "Fichier manifeste"

Problème 985402 dans Chromium

Pointez sur les propriétés CSS content pour afficher les valeurs non échappées

Pointez sur la valeur d'une propriété content pour afficher la version non échappée de la valeur.

Par exemple, dans cette démonstration, lorsque vous inspectez le pseudo-élément p::after, une chaîne échappée s'affiche dans le volet "Styles" :

Chaîne échappée

Lorsque vous pointez sur la valeur content, la valeur non échappée s'affiche:

Valeur non échappée

Erreurs de carte source plus détaillées dans la console

La console fournit désormais plus d'informations sur les raisons pour lesquelles le chargement ou l'analyse d'un mappage de source a échoué. Auparavant, il ne fournissait qu'une erreur sans expliquer ce qui n'allait pas.

Erreur de chargement de la carte source dans la console

Paramètre permettant de désactiver le défilement au-delà de la fin d'un fichier

Ouvrez Settings (Paramètres), puis désactivez Preferences (Préférences) > Sources (Sources) > Allow scrolling past end of file (Autoriser le défilement au-delà de la fin du fichier) pour désactiver le comportement par défaut de l'UI qui vous permet de faire défiler un fichier bien au-delà de la fin dans le panneau Sources.

Voici un GIF de cette fonctionnalité.

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 plate-forme 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.