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

Prise en charge du Moto G4 en mode Appareil

Après avoir activé la barre d'outils de l'appareil, vous pouvez simuler les dimensions de la fenêtre d'affichage d'un Moto G4. dans la liste Appareil.

Simuler une fenêtre d'affichage Moto G4

Cliquez sur Show Device Frame (Afficher le cadre de l'appareil) pour faire apparaître les composants Moto G4 dans la fenêtre d'affichage.

Présentation du matériel Moto G4

Fonctionnalités associées:

  • Ouvrez le menu de commande et exécutez la commande Capture screenshot pour faire une capture d'écran de la fenêtre d'affichage qui inclut les composants matériels du Moto G4 (après avoir activé l'option Afficher le cadre de l'appareil).
  • Limiter le réseau et le processeur afin de simuler plus précisément la navigation Web d'un utilisateur mobile et conditions d'exploitation.

Problème Chromium n° 924693

Informations relatives aux cookies

Cookies bloqués dans le volet "Cookies"

Le volet "Cookies" du panneau "Application" affiche désormais les cookies bloqués sur fond jaune.

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

Consultez également l'article Déboguer pourquoi un cookie a été bloqué pour découvrir comment accéder à une interface utilisateur similaire à partir du réseau. panneau.

Problème Chromium n° 1030258

Priorité des cookies dans le volet "Cookie" (Cookies)

Les tableaux "Cookies" des panneaux "Réseau" et "Application" comportent désormais une colonne Priorité.

Problème Chromium 1026879

Modifier toutes les valeurs des cookies

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

Modification d'une valeur de cookie

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

Effectuez un clic droit sur une requête réseau, puis sélectionnez Copier > Copier en tant que récupération Node.js pour obtenir un fetch qui inclut les données des cookies.

Copier en tant que récupération Node.js

Problème Chromium 1029826

Icônes plus précises dans les fichiers manifestes d'applications Web

Auparavant, le volet "Manifest" du panneau "Application" exécutait ses propres requêtes afin de afficher les icônes des fichiers manifestes d'application Web. Les outils de développement affichent désormais exactement la même icône de fichier manifeste que Chrome.

Icônes du volet du fichier manifeste

Problème Chromium n° 985402

Pointez sur les propriétés CSS content pour afficher les valeurs sans échappement

Pointez sur la valeur d'une propriété content pour afficher sa version sans échappement.

Par exemple, dans cette demo, lorsque vous inspectez le pseudo-élément p::after, vous voyez un échappement dans le volet "Styles" :

La chaîne avec échappement

Lorsque vous pointez sur la valeur content, la valeur sans échappement s'affiche:

La valeur sans échappement

Informations plus détaillées sur les erreurs de carte source dans la console

La console fournit désormais plus de détails sur les raisons de l'échec du chargement ou de l'analyse d'une carte source. Auparavant, il ne s'agissait que a fourni une erreur sans expliquer ce qui s'est mal passé.

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 Paramètres, puis désactivez Préférences > Sources > Autoriser le défilement au-delà de la fin de fichier pour désactiver le comportement par défaut de l'interface utilisateur qui vous permet de faire défiler bien au-delà de la fin d'un fichier dans le panneau Sources.

Voici un GIF illustrant la fonctionnalité.

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