Cette page a été traduite par l'API Cloud Translation.

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 à 5 s). 🎉

L'équipe a procédé à quelques optimisations afin de réduire les coûts de performances liés à la sérialisation, à l'analyse et à la désérialisation au démarrage.

Un article de blog technique expliquant en détail la mise en œuvre sera publié prochainement. mais revenez plus tard !

Problème Chromium: 1029427

Nouveaux outils de visualisation de l'angle CSS

Les outils de développement sont désormais mieux compatibles avec le débogage de l'angle 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 en forme d'horloge s'affiche à côté de l'angle dans le volet "Styles". Cliquez sur l'icône en forme d'horloge pour afficher ou masquer la superposition de l'horloge. Cliquez n'importe où dans l'horloge ou faites glisser l'aiguille pour modifier l'angle !

Des raccourcis clavier et souris permettent également de modifier la valeur de l'angle. Consultez notre documentation pour en savoir plus.

Problèmes liés à Chromium: 1126178, 1138633

Émuler les types d'images non compatibles

Les outils de développement ont ajouté deux nouvelles émulations dans l'onglet "Rendu", vous permettant 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'image 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 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 Rendu, sélectionnez "Désactiver le format d'image AVIF", puis actualisez la page. Pointez sur img src. L'image src (currentSrc) actuelle est désormais l'image WebP de remplacement.

Émuler les types d'images

Problème Chromium: 1130556

Simuler la taille du quota de stockage dans le volet "Storage" (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 > Storage (Application > Stockage), cochez la case Simulate custom storage quota (Simuler un quota de stockage personnalisé), puis saisissez un nombre valide pour simuler le quota de stockage.

Simuler la taille du quota de stockage

Problèmes liés à Chromium: 945786, 1146985

Nouvelle voie pour les signaux Web dans les enregistrements du panneau "Performances"

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

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

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

Consultez web.dev/vitals pour en savoir plus sur la façon d'optimiser l'expérience utilisateur avec les métriques Web Vitals.

voie 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 l'erreur CORS lorsqu'une requête réseau échoue en raison du partage de ressources entre origines multiples (CORS).

Dans le panneau Réseau, observez la requête réseau CORS qui a échoué. La colonne"État" indique Erreur CORS. Pointez sur l'erreur pour afficher le code d'erreur dans l'info-bulle. Auparavant, les outils de développement n'affichaient que l'état générique "(failed)" pour les erreurs CORS.

Cela posera les bases de nos prochaines améliorations, qui consistent à fournir une description plus détaillée des problèmes CORS.

Erreurs CORS

Problème Chromium: 1141824

Mises à jour de la vue détaillée 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 SharedArrayBuffer (SAB) et indique s'ils peuvent être partagés à l'aide de postMessage().

Un avertissement d'abandon s'affichera 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 multi-origine et sur son utilité pour des fonctionnalités comme SharedArrayBuffers, consultez cet article.

Informations multi-origines

Problème Chromium: 1139899

Informations sur les nouveaux travailleurs Web dans la vue détaillée du frame

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

Dans le panneau Application, développez un cadre avec les workers Web, puis sélectionnez-en un dans l'arborescence Workers pour afficher ses détails.

Informations sur les Web workers

Problèmes Chromium: 1122507, 1051466

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

Vous pouvez maintenant afficher les détails concernant l'image à 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 lien Opener Frame (Image d'ouverture) pour afficher l'ouverture dans le panneau "Elements".

Détails de l'image de l'ouverture

Problème Chromium: 1107766

Ouvrir le panneau "Network" (Réseau) à partir du volet Service Workers

Affichez toutes les informations de routage des requêtes de service worker (SW) grâce au nouveau lien Network requests (Requêtes réseau). Les développeurs bénéficient ainsi de plus de contexte lors du débogage du logiciel.

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

Ouvrir le panneau "Network" (Réseau) à partir du service worker

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 propriété d'une requête réseau.

Copier la valeur de la propriété

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 suivantes: Request payload (JSON) Form Data Query String Parameters Request Headers Response Headers

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 Copy stacktrace (Copier la trace de la pile) pour la copier dans votre presse-papiers.

Copier la trace de la pile

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 WebAssembly (Wasm) alors qu'elle est mise en pause 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. Passez la souris sur une variable pour afficher sa valeur.

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

Problèmes Chromium: 1058836, 1071432

Évaluer la variable Wasm dans la console

Vous pouvez désormais évaluer la variable Wasm dans la console lorsqu'elle est mise en pause sur un point d'arrêt.

Dans cet exemple, nous plaçons un point d'arrêt sur 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 la variable Wasm dans la console

Problème Chromium: 1127914

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

Les outils de développement utilisent désormais systématiquement les Ko pour afficher les tailles de fichiers/mémoires. Auparavant, les outils de développement combinaient les Ko (1 000 octets) et les KiB (1 024 octets). Par exemple, le panneau "Network" (Réseau) utilisait auparavant des étiquettes "ko", mais effectuait en fait des calculs à l'aide de Kio, ce qui était inutile.

Problème Chromium: 1035309

Mettre en surbrillance des 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 à 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 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 auxquels display: flex est appliqué.

En outre, de nouvelles icônes d'alignement sont ajoutées dans les propriétés flexibles suivantes:

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

En plus de cela, ces icônes sont contextuelles. Le sens de l'icône est ajusté 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.

Débogage CSS Flex

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

Essayez cette fonctionnalité et n'hésitez pas à nous donner votre avis.

Problèmes Chromium: 1144090, 1139945

Personnaliser les raccourcis clavier des accords

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

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 crayon) pour personnaliser le raccourci des accords.

Raccourcis clavier des accords

Problème Chromium: 174309

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.