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

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.

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 de l'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. 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 le code HTML suivant permet de diffuser une image au format AVIF et WebP pour les navigateurs les plus récents, avec une image de remplacement PNG 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" et actualisez la page. Passez la souris sur img src. L'image src actuelle (currentSrc) est désormais l'image WebP de remplacement.

Émuler les types d&#39;images

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

Simuler la taille du 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é vos 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 Web Vitals 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 les métriques Web Vitals.

voie Web 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 affiche "CORS error" (erreur CORS). Pointez sur l'erreur pour afficher son code dans l'info-bulle. Auparavant, les outils de développement n'affichaient que l'état générique "(échec)" pour les erreurs CORS.

Cela pose les bases des prochaines améliorations visant à 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 multi-origine s'affiche désormais dans la section Sécurité et isolation.

La nouvelle section Disponibilité de l'API affiche la disponibilité des éléments SharedArrayBuffer (SAB) et indique si ceux-ci 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 multi-origine et découvrir pourquoi elle sera nécessaire pour des fonctionnalités telles que SharedArrayBuffers, consultez cet article.

Informations multi-origines

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 nœuds de calcul Web, puis sélectionnez-en un sous l'arborescence Workers pour afficher les détails de ces workers.

Informations sur les nœuds de calcul 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 lien Opener Frame (Cadre d'ouverture) pour afficher l'élément d'ouverture dans le panneau "Elements" (Éléments).

Détails du cadre de l&#39;ouverture

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 worker, puis cliquez sur le champ Requêtes réseau d'un logiciel. Le panneau Network (Réseau) est ouvert 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 &quot;Network&quot; à partir des 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 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 dans la section suivante: Request payload (JSON) Form Data Query String Paramètres, Request Headers Response Headers.

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.

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 de WebAssembly (Wasm) alors que vous êtes 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. Pointez sur une variable pour voir la 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 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 dans la console pour renvoyer la valeur actuelle de la variable, soit 4 dans ce cas.

Évaluer la variable Wasm dans la console

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. Auparavant, DevTools combinait des Ko (1 000 octets) et des KiB (1 024 octets). Par exemple, le panneau "Network" (Réseau) utilisait auparavant des étiquettes "ko", mais effectuait en réalité des calculs à l'aide de KiB, ce qui entraînait 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.

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 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 est 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 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 à Settings > Shortcuts (Paramètres > Raccourcis) en pointant sur une commande et cliquez sur le bouton Edit (Modifier) (icône représentant un crayon) pour personnaliser le raccourci vers les accords.

Raccourcis clavier pour les 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 une suggestion ou un commentaire via crbug.com.
  • Signalez un problème dans les outils de développement en sélectionnant Autres options   More   > Aide > Signaler un problème dans les outils de développement 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été annulé.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59