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

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é des optimisations afin de réduire l'impact sur les performances lié à la sérialisation, à l'analyse et la désérialisation au cours de la start-up.

Nous publierons prochainement un article de blog sur les ingénieurs expliquant en détail la mise en œuvre. 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 horloge s'affiche à côté de l'angle dans le volet "Styles". Cliquez sur l'icône en forme d'horloge pour changer l'horloge superposition. Cliquez n'importe où dans l'horloge ou faites glisser l'aiguille pour modifier l'angle !

Vous pouvez modifier la valeur de l'angle à l'aide de raccourcis clavier et souris. Consultez notre documentation pour en savoir plus.

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 images AVIF et WebP . Ces nouvelles émulations permettent aux développeurs de tester plus facilement différents types de chargement sans avoir à changer de navigateur.

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

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

Dans l'onglet Rendu, sélectionnez "Désactiver le format d'image AVIF". et actualisez la page. Passez la souris sur l'icône img src L'image src 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 ignorer la taille du quota de stockage dans le volet "Stockage". Cette fonctionnalité vous permet simuler différents appareils et 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 "Signaux Web" dans les enregistrements du panneau "Performances"

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

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

La voie affiche actuellement des informations de signaux Web telles que First Contentful Paint (FCP), Largest Contentful Paint (LCP) et Layout Shift (LS).

Consultez web.dev/vitals pour savoir comment optimiser l'expérience utilisateur avec le Web. Statistiques Android Vitals.

Problème Chromium: N/A

Signaler les 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 d'état indique "CORS" ". Pointez sur l'erreur pour afficher son code dans l'info-bulle. Auparavant, les outils de développement a affiché l'état générique "(échec)" pour les erreurs CORS.

Cela pose les bases des prochaines améliorations qui visent à fournir une description plus détaillée Problèmes 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 isolé multi-origine s'affiche désormais dans la section Sécurité et Isolation.

La nouvelle section Disponibilité de l'API affiche la disponibilité des services SharedArrayBuffer (SAB) et si elles peuvent être partagées avec postMessage().

Un avertissement d'abandon s'affiche si le SAB et postMessage() sont actuellement disponibles, mais que n'est pas un contexte isolé multi-origine. En savoir plus sur l'isolation multi-origine et ses raisons requise pour des fonctionnalités comme SharedArrayBuffers décrites dans 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 nœuds de calcul Web dédiés sous le cadre qui les crée.

Dans le panneau Application, développez un frame avec des Web workers, puis sélectionnez un worker sous le nœud Arborescence Workers afin d'afficher les détails du Worker Web.

Problèmes Chromium: 1122507, 1051466

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

Vous pouvez maintenant afficher des informations détaillées sur le cadre à l'origine de l'ouverture d'une autre fenêtre.

Sélectionnez une fenêtre ouverte sous l'arborescence Frames pour en afficher les détails. Cliquez sur le bouton Ouvrir Cadre pour afficher l'ouverture 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 de service workers (SW) avec le nouveau lien Requêtes réseau. Cela fournit aux développeurs davantage de contexte lors du débogage du logiciel.

Accédez à Application > Service workers, cliquez sur le champ Requêtes réseau d'un logiciel. La Le panneau Network (Réseau) est ouvert dans le panneau inférieur et affiche toutes les requêtes liées à un service worker (les 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"

Copier la valeur de la propriété

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

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 sous cette section: Paramètres de la chaîne de requête de données de formulaire avec charge utile de requête (JSON) 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 du 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 votre presse-papiers.

Problème Chromium: 1139615

Mises à jour de débogage Wasm

Prévisualiser la valeur de la variable Wasm lors du survol avec la souris

Lorsque vous pointez sur une variable dans le démontage de WebAssembly (Wasm) alors que vous êtes en pause au niveau d'un point d'arrêt, Les outils de développement affichent maintenant la valeur actuelle de la variable.

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

Problèmes Chromium: 1058836, 1071432

Évaluer la 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, saisissez $input. de 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 la taille des fichiers/mémoire

Les outils de développement utilisent désormais systématiquement Ko pour afficher la taille des fichiers ou de la mémoire. Précédemment en ko (mélange des outils de développement) (1 000 octets) et Kio (1 024 octets). Par exemple, le panneau "Network" utilisait auparavant "ko" mais effectué des calculs à l'aide de Kio, ce qui causait une confusion inutile.

Problème Chromium: 1035309

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

Les outils de développement 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

Les outils de débogage Flexbox seront bientôt disponibles.

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

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

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

En plus de cela, 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.

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

Essayez cette fonctionnalité et donnez-nous votre avis !

Problèmes Chromium: 1144090, 1139945

Personnaliser les raccourcis clavier pour les accords

Depuis la dernière version, les outils de développement prennent en charge, à titre expérimental, la personnalisation des raccourcis clavier.

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

Accédez à Paramètres > Raccourcis, en pointant sur une commande et en cliquant sur le bouton Modifier (icône en forme de crayon) pour personnaliser le raccourci des accords.

Problème Chromium: 174309

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   > 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