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

Jecelyn Yeen

Démarrage plus rapide des outils de développement

Le démarrage des outils de développement est désormais environ 37 % plus rapide en termes de compilation JavaScript (de 6,9 s à 5 s) ! 🎉

L'équipe a effectué une optimisation pour réduire la surcharge de performances liée à la sérialisation, à l'analyse et à la désérialisation lors du démarrage.

Un article de blog technique expliquant l'implémentation en détail sera bientôt publié. Tenez-vous informé !

Problème Chromium : 1029427

Nouveaux outils de visualisation des angles CSS

Les outils de développement offrent désormais une meilleure aide pour déboguer les angles CSS.

Angle CSS

Lorsqu'un angle CSS est appliqué à un élément HTML de votre page (par exemple, background: linear-gradient(angle, color-stop1, color-stop2) ou transform: rotate(angle)), une icône d'horloge s'affiche à côté de l'angle dans le volet "Styles". Cliquez sur l'icône en forme d'horloge pour activer ou désactiver la superposition de l'horloge. Cliquez n'importe où sur l'horloge ou faites glisser l'aiguille pour modifier l'angle.

Il existe également des raccourcis clavier et souris pour modifier la valeur de l'angle. Pour en savoir plus, consultez notre documentation.

Problèmes Chromium : 1126178, 1138633

Émuler les types d'images non acceptés

Les outils de développement ont ajouté deux nouvelles émulations dans l'onglet "Rendu", ce qui vous permet de désactiver les formats d'image AVIF et WebP. Ces nouvelles émulations permettent aux développeurs de tester plus facilement différents scénarios de chargement d'images sans avoir à changer de navigateur.

Supposons que nous disposions du code HTML suivant pour diffuser une image au format AVIF et WebP pour les navigateurs récents, avec une image PNG de remplacement pour les navigateurs plus anciens.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Ouvrez l'onglet Rendu, sélectionnez "Désactiver le format d'image AVIF", puis actualisez la page. Pointez sur img src. La source de l'image actuelle (currentSrc) est désormais l'image WebP de remplacement.

Émuler des types d&#39;images

Problème Chromium : 1130556

Simuler la taille du quota de stockage dans le volet "Stockage"

Vous pouvez désormais remplacer la taille du quota de stockage dans le volet "Stockage". Cette fonctionnalité vous permet de simuler différents appareils et de tester le comportement de vos applications dans des scénarios de faible disponibilité de l'espace disque.

Accédez à Application > Stockage, cochez la case Simuler un quota de stockage personnalisé et saisissez un nombre valide pour simuler le quota de stockage.

Simuler la taille du quota de stockage

Problèmes Chromium : 945786, 1146985

Nouvelle voie Web Vitals dans les enregistrements du panneau "Performances"

Les enregistrements de performances disposent désormais d'une option permettant d'afficher des informations sur les Web Vitals.

Après avoir enregistré les performances de chargement, cochez la case Signaux Web dans le panneau "Performances" pour afficher la nouvelle voie "Signaux Web".

La voie affiche actuellement des informations sur les Web Vitals, comme First Contentful Paint (FCP), Largest Contentful Paint (LCP) et Layout Shift (LS).

Consultez web.dev/vitals pour découvrir comment optimiser l'expérience utilisateur grâce aux métriques Web Vitals.

Voie Web Vitals

Problème Chromium : N/A

Signaler les erreurs CORS dans le panneau "Réseau"

Les outils de développement affichent désormais une erreur CORS lorsqu'une requête réseau échoue en raison du partage de ressources cross-origin (CORS).

Dans le panneau Réseau, observez la requête réseau CORS ayant échoué. La colonne"État" affiche Erreur CORS. Pointez sur l'erreur : l'info-bulle affiche désormais le code d'erreur. Auparavant, les outils pour les développeurs n'affichaient que l'état générique (échec) pour les erreurs CORS.

Cela ouvre la voie à nos prochaines améliorations, qui visent à fournir une description plus détaillée des problèmes CORS.

Erreurs CORS

Problème Chromium : 1141824

Mises à jour de la vue des détails du frame

Informations sur l'isolation multi-origine dans la vue "Détails du frame"

L'état d'isolement cross-origin s'affiche désormais dans la section Sécurité et isolement.

La nouvelle section Disponibilité des API affiche la disponibilité des SharedArrayBuffer (SAB) et indique s'ils peuvent être partagés à l'aide de postMessage().

Un avertissement de suppression s'affiche si le SAB et postMessage() sont actuellement disponibles, mais que le contexte n'est pas isolé d'origine croisée. Pour en savoir plus sur l'isolation multi-origine et sur les raisons pour lesquelles elle sera requise pour des fonctionnalités telles que SharedArrayBuffers, consultez cet article.

Informations multi-origines

Problème Chromium : 1139899

Nouvelles informations sur les Web Workers dans la vue "Détails du frame"

Les outils de développement affichent désormais les workers Web dédiés sous le frame qui les crée.

Dans le panneau Application, développez un frame avec des workers Web, puis sélectionnez un worker dans l'arborescence Workers pour afficher les détails du worker Web.

Informations sur les Web Workers

Problèmes Chromium : 1122507, 1051466

Afficher les détails du frame de l'ouvreur pour les fenêtres ouvertes

Vous pouvez désormais afficher les détails du frame qui a provoqué l'ouverture d'une autre fenêtre.

Sélectionnez une fenêtre ouverte dans l'arborescence Frames pour afficher ses détails. Cliquez sur le lien Frame de l'ouvreur pour afficher l'ouvreur dans le panneau "Éléments".

Détails du frame de l&#39;application d&#39;ouverture

Problème Chromium : 1107766

Ouvrir le panneau "Network" depuis le volet "Service Workers"

Affichez toutes les informations de routage des requêtes Service Worker (SW) grâce au nouveau lien Requêtes réseau. Cela fournit aux développeurs un contexte supplémentaire lors du débogage du SW.

Accédez à Application > Service Workers, puis cliquez sur Requêtes réseau d'un SW. Le panneau Réseau s'ouvre dans le panneau inférieur et affiche toutes les requêtes liées au service worker (les requêtes réseau sont filtrées par "is:service-worker-intercepted").

Ouvrir le panneau &quot;Network&quot; depuis les Service Workers

Problème Chromium : N/A

Nouvelles options de copie dans le panneau "Réseau"

Copier la valeur de la propriété

La nouvelle option Copier la valeur du menu contextuel vous permet de copier la valeur de propriété d'une requête réseau.

Copier la valeur de la propriété

Dans le panneau Réseau, cliquez sur une requête réseau pour ouvrir le panneau En-têtes. Effectuez un clic droit sur l'une des propriétés des sections suivantes : "Charge utile de la requête (JSON)", "Paramètres de la chaîne de requête des données de formulaire", "En-têtes de requête" ou "En-têtes de réponse".

Vous pouvez ensuite sélectionner Copier la valeur pour copier la valeur de la propriété dans votre presse-papiers.

Problème Chromium : 1132084

Copier la trace de la pile pour l'initiateur réseau

Effectuez un clic droit sur une requête réseau, puis sélectionnez Copier la trace de la pile pour copier la trace de la pile dans votre presse-papiers.

Copier la trace de la pile

Problème Chromium : 1139615

Mises à jour concernant le débogage Wasm

Prévisualiser la valeur de la variable Wasm au passage de la souris

Lorsque vous pointez sur une variable dans le désassemblage WebAssembly (Wasm) pendant une pause sur un point d'arrêt, les outils de développement affichent désormais la valeur actuelle de la variable.

Dans le panneau Sources, ouvrez un fichier Wasm, placez un point d'arrêt et actualisez la page. Pointez sur une variable pour afficher sa valeur.

Prévisualiser la variable Wasm au passage de la souris

Problèmes Chromium : 1058836, 1071432

Évaluer une variable Wasm dans la console

Vous pouvez désormais évaluer la variable Wasm dans la console lorsque vous êtes en pause sur un point d'arrêt.

Dans cet exemple, nous insérons un point d'arrêt à la ligne local.get $input. Lors du débogage, saisissez $input dans la console pour renvoyer la valeur actuelle de la variable, qui est 4 dans ce cas.

Évaluer une variable Wasm dans la console

Problème Chromium : 1127914

Unités de mesure cohérentes pour la taille des fichiers/de la mémoire

Les outils de développement utilisent désormais systématiquement les kilo-octets pour afficher la taille des fichiers et de la mémoire. Auparavant, les outils de développement mélangeaient les kB (1 000 octets) et les KiB (1 024 octets). Par exemple, le panneau "Réseau" utilisait auparavant des libellés "kB", mais effectuait en réalité des calculs en KiB, ce qui entraînait une confusion inutile.

Problème Chromium : 1035309

Mettre en surbrillance les pseudo-éléments dans le panneau "Éléments"

Les outils de développement ont augmenté le contraste des couleurs des pseudo-éléments pour vous aider à mieux les repérer.

Mettre en surbrillance les pseudo-éléments

Problème Chromium : 1143833

Fonctionnalités expérimentales

Outils de débogage CSS Flexbox

Les outils de débogage Flexbox arrivent !

Pour commencer, les outils de développement affichent désormais un badge flex dans le panneau "Éléments" pour les éléments auxquels display: flex est appliqué.

De plus, de nouvelles icônes d'alignement ont été ajoutées aux propriétés Flexbox suivantes :

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

De plus, ces icônes sont contextuelles. La direction de l'icône sera ajustée en fonction des éléments suivants :

  • flex-direction
  • direction
  • writing-mode

Ces icônes vous aident à mieux visualiser la mise en page Flexbox de la page.

Débogage de CSS Flex

Voici le document de conception des fonctionnalités de l'outil Flexbox. D'autres fonctionnalités seront bientôt disponibles.

Essayez-la et dites-nous ce que vous en pensez !

Problèmes Chromium : 1144090, 1139945

Personnaliser les raccourcis clavier pour les accords

Depuis la dernière version, les outils de développement sont compatibles avec la personnalisation des raccourcis clavier (fonctionnalité expérimentale).

Vous pouvez désormais créer des accords (également appelés raccourcis à plusieurs touches) dans l'éditeur de raccourcis.

Accédez à Paramètres > Raccourcis, pointez sur une commande, puis cliquez sur le bouton Modifier (icône en forme de stylo) pour personnaliser le raccourci des accords.

Raccourcis clavier pour les accords

Problème Chromium : 174309

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.