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

Éditeur de grille CSS

Une fonctionnalité très demandée. Vous pouvez désormais prévisualiser et créer la grille CSS dans le nouvel éditeur de grille CSS.

Si display: grid ou display: inline-grid est appliqué à un élément HTML de votre page, une icône s'affiche à côté de cet élément dans le volet "Styles". Cliquez sur l'icône pour activer/désactiver l'éditeur de grille CSS. Ici, vous pouvez prévisualiser les modifications potentielles à l'aide des icônes à l'écran (par exemple, justify-content: space-around) et définir l'apparence de la grille en un seul clic.

Problème Chromium: 1203241

Compatibilité avec les redéclarations de const dans la console

La console permet désormais de redéclarer l'instruction const, en plus des redéclarations let et class existantes. L'impossibilité de redéclarer le code était un ennui courant pour les développeurs Web qui utilisent la console pour tester de nouveaux codes JavaScript.

Cela permet aux développeurs de copier-coller du code dans la console DevTools pour voir comment cela fonctionne ou pour effectuer des tests, apporter de petites modifications au code et répéter le processus sans actualiser la page. Auparavant, les outils de développement généraient une erreur de syntaxe si le code redéclarait une liaison const.

Reportez-vous à l'exemple ci-dessous. La redéclaration de const est acceptée dans les scripts REPL distincts (voir la variable a). Notez que les scénarios suivants ne sont pas pris en charge par la conception:

• La redéclaration des scripts de page (const) n'est pas autorisée dans les scripts REPL
• La redéclaration de const dans le même script REPL n'est pas autorisée (voir la variable b).

Problème Chromium: 1076427

Lecteur de l'ordre des sources

Vous pouvez désormais afficher l'ordre des éléments sources à l'écran pour une meilleure inspection de l'accessibilité.

L'ordre du contenu dans un document HTML est important pour l'optimisation du référencement et l'accessibilité. Les nouvelles fonctionnalités CSS permettent aux développeurs de créer un contenu dont l'ordre d'affichage est très différent de celui du document HTML. Il s'agit d'un problème d'accessibilité important, car les utilisateurs de lecteurs d'écran obtiendraient une expérience différente, probablement déroutante, de celle des personnes voyantes.

Problème Chromium: 1094406

Nouveau raccourci pour afficher les détails du cadre

Pour afficher les détails de l'iFrame, effectuez un clic droit sur l'élément iFrame dans le panneau "Éléments", puis sélectionnez Afficher les détails du cadre.

Les détails de l'iFrame s'affichent dans le panneau "Application". Vous pouvez alors examiner les détails du document, la sécurité l'état d'isolation, les règles d'autorisation et plus encore pour déboguer d'éventuels problèmes.

Problème Chromium: 1192084

Amélioration de la prise en charge du débogage CORS

Les erreurs CORS (Cross-Origin Resource Sharing) sont désormais affichées dans l'onglet "Problèmes". Plusieurs raisons peuvent expliquer des erreurs CORS. Cliquez pour développer chaque problème et comprendre les causes potentielles et les solutions.

Problème Chromium: 1141824

Mises à jour du panneau "Network"

Changement de nom : l'étiquette XHR devient Fetch/XHR.

L'étiquette XHR s'appelle désormais Fetch/XHR. Cette modification indique plus clairement que ce filtre inclut les requêtes réseau XMLHttpRequest et Fetch API.

Problème Chromium: 1201398

Filtrer le type de ressource Wasm dans le panneau "Network"

Vous pouvez maintenant cliquer sur le nouveau bouton Wasm pour filtrer les requêtes du réseau Wasm.

Problème Chromium: 1103638

Hints client user-agent pour les appareils dans l'onglet "Conditions du réseau"

Les indicateurs client user-agent sont désormais appliqués aux appareils dans le champ User-agent de l'onglet Conditions du réseau.

User-Agent Client Hints est une nouvelle extension de l'API Client Hints. Il permet aux développeurs d'accéder aux informations sur le navigateur d'un utilisateur d'une manière ergonomique et respectueuse de la confidentialité.

Problème Chromium: 1174299

Signaler des problèmes liés au mode Quirks dans l'onglet "Problèmes"

Les outils de développement signalent désormais les problèmes en mode Quirks et en Mode quirks limité.

Le mode quirks et le mode quirks limité sont des modes de navigateur qui remontent jusqu'à l'introduction des normes Web. Ces modes émulent des comportements de mise en page de l'ère pré-standard, qui provoquent souvent des effets visuels inattendus.

Lors du débogage des problèmes de mise en page, les développeurs peuvent penser qu'ils sont causés par des bugs CSS ou HTML créés par l'utilisateur, alors que le vrai problème est le mode Compat dans lequel se trouve la page. Les outils de développement suggèrent des solutions pour y remédier.

Problème Chromium: 622660

Inclure les intersections de calcul dans le panneau "Performances"

Les outils de développement affichent désormais les intersections de calcul dans le graphique de type "flamme". Ces modifications vous aident à identifier les événements d'observateur d'intersection et à déboguer les éventuels problèmes de performances.

Problème Chromium: 1199137

Lighthouse 7.5 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 7.5. L'erreur "largeur et hauteur explicites manquantes" L'avertissement est désormais supprimé pour les images avec aspect-ratio défini dans CSS. Auparavant, Lighthouse affichait des avertissements pour les images sans largeur ni hauteur définies.

Consultez les notes de version pour obtenir la liste complète des modifications.

Problème Chromium: 772558

"Redémarrer le frame" est obsolète Menu contextuel de la pile d'appel

L'option Restart frame (Redémarrer le frame) est désormais obsolète. Pour fonctionner correctement, cette fonctionnalité nécessite des développements supplémentaires. Elle ne fonctionne pas et rencontre souvent des plantages.

Problème Chromium: 1203606

[Expérimental] Moniteur de protocole

Les outils pour les développeurs Chrome utilisent le CDP (Chrome DevTools Protocol) pour instrumenter, inspecter, déboguer et profiler les navigateurs Chrome. L'outil de surveillance de protocole vous permet d'afficher toutes les requêtes et réponses CDP effectuées par les outils de développement.

Deux nouvelles fonctions ont été ajoutées pour faciliter le test de la CDP:

• Le nouveau bouton Save (Enregistrer) vous permet de télécharger les messages enregistrés sous forme de fichier JSON.
• Un nouveau champ qui vous permet d'envoyer directement une commande CDP brute

Problèmes Chromium: 1204004, 1204466

[Expérimental] Enregistreur Puppeteer

L'enregistreur Puppeteer génère désormais une liste d'étapes en fonction de votre interaction avec le navigateur, tandis que les outils de développement généraient directement un script Puppeteer. Un nouveau bouton Export (Exporter) a été ajouté pour vous permettre d'exporter les étapes sous forme de script Puppeteer.

Après avoir enregistré les étapes, vous pouvez utiliser le nouveau bouton Rejouer pour les revoir. Suivez ces instructions pour faire vos premiers pas avec l'enregistrement.

Veuillez noter que ce test en est encore à ses débuts. Nous prévoyons d'améliorer et de développer la fonctionnalité de l'Enregistreur au fil du temps.

Problème Chromium: 1199787

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