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

Kayce Basques
Kayce Basques

Prise en charge du Moto G4 en mode Appareil

Après avoir activé la barre d'outils Appareil, vous pouvez simuler les dimensions d'une fenêtre d'affichage Moto G4 à partir de la liste Appareil.

Simuler une fenêtre d'affichage Moto G4

Cliquez sur Afficher le frame de l'appareil pour afficher le matériel Moto G4 autour de la fenêtre d'affichage.

Affichage du matériel Moto G4

Fonctionnalités associées :

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

Problème Chromium 924693

Mises à jour concernant les cookies

Cookies bloqués dans le volet "Cookies"

Dans le panneau "Application", le volet "Cookies" affiche désormais les cookies bloqués sur un arrière-plan jaune.

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

Consultez également Déboguer la raison pour laquelle un cookie a été bloqué pour savoir comment accéder à une interface utilisateur similaire à partir du panneau "Réseau".

Problème Chromium 1030258

Priorité des cookies dans le volet "Cookies"

Les tableaux "Cookies" des 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 de 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 obtenir une explication de chaque colonne, consultez Champs.

Modifier la valeur d'un cookie

Copier en tant que fetch Node.js pour inclure les données de cookies

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

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 "Manifeste" du panneau "Application" effectuait ses propres requêtes pour afficher les icônes du fichier manifeste de l'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 "Manifeste"

Problème Chromium 985402

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, sur cette démonstration, lorsque vous inspectez le pseudo-élément p::after, vous voyez une chaîne échappée 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 de détails sur les raisons pour lesquelles une carte source n'a pas pu être chargée ni analysée. Auparavant, il fournissait simplement 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 Paramètres, puis désactivez Préférences > Sources > 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 l'écran bien au-delà de la fin d'un fichier dans le panneau Sources.

Voici un GIF de la fonctionnalité.

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.