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é quelques optimisations pour réduire les frais généraux de performances de la sérialisation, de l'analyse et de la désérialisation au démarrage.

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

Problème Chromium: 1029427

Nouveaux outils CSS de visualisation des angles

Les outils de développement offrent désormais une meilleure prise en charge du débogage des angles CSS.

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

Vous pouvez également modifier la valeur de l'angle à l'aide de raccourcis clavier et de la souris. Pour en savoir plus, consultez notre documentation.

Problèmes Chromium: 1126178, 1138633

Émuler les types d'images non compatibles

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 utilisions le code HTML suivant pour diffuser une image au format AVIF et WebP pour les navigateurs plus 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 Affichage, sélectionnez "Désactiver le format d'image AVIF", puis actualisez la page. Pointez sur img src. La source d'image actuelle (currentSrc) est désormais l'image WebP de remplacement.

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é du disque.

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

Problèmes Chromium: 945786, 1146985

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

Les enregistrements de performances peuvent désormais afficher des informations sur les Web Vitals.

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

Elle affiche actuellement des informations sur les Web Vitals, telles que le First Contentful Paint (FCP), le Largest Contentful Paint (LCP) et le Layout Shift (LS).

Consultez web.dev/vitals pour découvrir comment optimiser l'expérience utilisateur avec les métriques Web Vitals.

Problème Chromium: N/A

Signaler des erreurs CORS dans le panneau "Network" (Réseau)

Les outils de développement affichent désormais une erreur CORS lorsqu'une requête réseau échoue en raison du partage des ressources entre origines multiples (CORS).

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

Cela nous permet de poser les bases de nos prochaines améliorations en fournissant une description plus détaillée des problèmes liés au 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'isolation inter-origines s'affiche désormais dans la section Sécurité et isolement.

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

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

Problème Chromium: 1139899

Informations sur les nouveaux nœuds de calcul Web dans la vue des détails du frame

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

Dans le panneau Application, développez un frame avec des nœuds de calcul Web, puis sélectionnez-en un sous l'arborescence Workers pour afficher les détails de ces workers.

Problèmes Chromium: 1122507, 1051466

Afficher les détails du cadre de l'ouverture pour les fenêtres ouvertes

Vous pouvez désormais voir les détails du frame à l'origine de l'ouverture d'une autre fenêtre.

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

Problème Chromium: 1107766

Ouvrir le panneau "Network" à partir du volet Service Workers

Affichez toutes les informations de routage des requêtes du service worker (SW) avec le nouveau lien Requêtes réseau. Cela fournit aux développeurs un contexte supplémentaire lors du débogage du logiciel.

Accédez à Application > Service Workers, puis cliquez sur les requêtes réseau d'un service worker. Le panneau Network 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").

Problème Chromium: N/A

Nouvelles options de copie dans le panneau "Network" (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.

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

Ensuite, vous pouvez 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 de réseau

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

Problème Chromium: 1139615

Mises à jour de débogage Wasm

Aperçu de la valeur de la variable Wasm au survol

Lorsque vous pointez sur une variable dans le désassemblage WebAssembly (Wasm) alors que vous êtes arrêté sur un point d'arrêt, DevTools affiche 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.

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 plaçons un point d'arrêt à la ligne local.get $input. Lors du débogage, saisir $input dans la console renvoie la valeur actuelle de la variable, qui est 4 dans ce cas.

Problème Chromium: 1127914

Unités de mesure cohérentes pour les tailles de fichiers/mémoire

DevTools utilise désormais systématiquement des Ko pour afficher les tailles de fichier/mémoire. Auparavant, DevTools mélangeait les Ko (1 000 octets) et les Kio (1 024 octets). Par exemple, le panneau "Réseau" utilisait auparavant des libellés "ko", mais effectuait en réalité des calculs en kibioctets, ce qui causait une confusion inutile.

Problème Chromium: 1035309

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

Les outils pour les développeurs ont augmenté le contraste des couleurs des pseudo-éléments pour vous aider à les repérer plus facilement.

Problème Chromium: 1143833

Fonctionnalités expérimentales

Outils de débogage CSS Flexbox

Des outils de débogage Flexbox seront bientôt disponibles !

Pour commencer, DevTools affiche 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 sont 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 visent à vous aider à mieux visualiser la mise en page flexbox de la page.

Voici le document de conception des fonctionnalités d'outils Flexbox. D'autres fonctionnalités seront bientôt ajoutées.

Essayez-la et donnez-nous votre avis !

Problèmes Chromium: 1144090, 1139945

Personnaliser les raccourcis clavier pour les accords

Depuis la dernière version, DevTools propose une compatibilité expérimentale avec la personnalisation des raccourcis clavier.

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

Accédez à Settings > Shortcuts (Paramètres > Raccourcis) en passant la souris sur une commande et cliquez sur le bouton Edit (Modifier) (icône en forme de crayon) pour personnaliser le raccourci vers les accords.

Problème Chromium: 174309

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome 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 plates-formes 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils de développement

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.