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

Jecelyn Yeen

Éditeur de grille CSS

Fonctionnalité très demandée. Vous pouvez désormais prévisualiser et créer des grilles CSS avec le nouvel éditeur de grille CSS.

Éditeur de grille CSS

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

Problème Chromium: 1203241

Prise en charge des redéfinitions const dans la console

La console prend désormais en charge la redéfinition de l'instruction const, en plus des redéfinitions let et class existantes. L'impossibilité de redéclarer était un problème courant pour les développeurs Web qui utilisent la console pour tester un nouveau code JavaScript.

Les développeurs peuvent ainsi copier-coller du code dans la console des outils de développement pour voir comment il fonctionne ou pour effectuer des tests, apporter de petites modifications au code et répéter le processus sans actualiser la page. Auparavant, DevTools renvoyait une erreur de syntaxe si le code redéclarait une liaison const.

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

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

Redéfinitions de constantes

Problème Chromium: 1076427

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

Visionneuse de l'ordre des sources

L'ordre des contenus dans un document HTML est important pour l'optimisation pour les moteurs de recherche et l'accessibilité. Les nouvelles fonctionnalités CSS permettent aux développeurs de créer des contenus dont l'ordre à l'écran est très différent de celui du document HTML. Il s'agit d'un problème d'accessibilité majeur, car les utilisateurs de lecteurs d'écran ont une expérience différente et probablement déroutante par rapport aux utilisateurs voyants.

Problème Chromium: 1094406

Nouveau raccourci pour afficher les détails du frame

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

Afficher les détails du cadre

Vous accédez alors à une vue des détails de l'iframe dans le panneau "Application", où vous pouvez examiner les détails du document, l'état de sécurité et d'isolation, la règle d'autorisation, etc. pour déboguer les problèmes potentiels.

Vue des détails du cadre

Problème Chromium: 1192084

Amélioration de la compatibilité avec le débogage CORS

Les erreurs CORS (Cross-Origin Resource Sharing) s'affichent désormais dans l'onglet "Problèmes". Les erreurs CORS peuvent se produire pour diverses raisons. Cliquez pour développer chaque problème afin de comprendre les causes et les solutions potentielles.

Problèmes CORS dans l'onglet "Problèmes"

Problème Chromium: 1141824

Mises à jour du panneau "Network" (Réseau)

Renommer le libellé XHR en "Fetch/XHR"

Le libellé XHR est désormais renommé Récupérer/XHR. Cette modification permet de préciser que ce filtre inclut à la fois les requêtes réseau XMLHttpRequest et API Fetch.

Libellé Fetch/XHR

Problème Chromium: 1201398

Filtrer le type de ressource Wasm dans le panneau "Network" (Réseau)

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

Filtrer par Wasm

Problème Chromium: 1103638

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

Les hints client user-agent sont désormais appliqués aux appareils dans le champ User-agent (User-agent) de l'onglet Network conditions (Conditions réseau).

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

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

Problème Chromium: 1174299

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

DevTools signale désormais les problèmes liés au mode Quirks et au mode Quirks limité.

Les modes Quirks et Limited-quirks sont des anciens modes de navigateur datant d'avant la création des normes Web. Ces modes émulent les comportements de mise en page d'avant l'ère des normes, qui entraînent 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 véritable problème est le mode de compatibilité dans lequel se trouve la page. Les outils de développement vous suggèrent des solutions pour le résoudre.

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

Problème Chromium: 622660

Inclure les intersections de calcul dans le panneau "Performances"

DevTools affiche désormais les intersections de calcul dans le graphique en forme de flamme. Ces modifications vous aident à identifier les événements des observateurs d'intersection et à déboguer les coûts de performances potentiels.

Calculer les intersections dans le panneau "Performances"

Problème Chromium: 1199137

Lighthouse 7.5 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 7.5. L'avertissement "Largeur et hauteur explicites manquantes" est désormais supprimé pour les images avec aspect-ratio défini en CSS. Auparavant, Lighthouse affichait des avertissements pour les images dont la largeur et la hauteur n'étaient pas définies.

Pour obtenir la liste complète des modifications, consultez les notes de version.

Problème Chromium: 772558

Menu contextuel "Redémarrer le frame" obsolète dans la pile d'appels

L'option Restart frame (Redémarrer le frame) est désormais obsolète. Cette fonctionnalité nécessite un développement supplémentaire pour fonctionner correctement. Elle est actuellement défectueuse et plante souvent.

Menu contextuel "Redémarrer le frame" obsolète

Problème Chromium: 1203606

[Expérimental] Moniteur de protocole

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

Deux nouvelles fonctions ont été ajoutées pour faciliter les tests de CDP:

  • Le nouveau bouton Enregistrer vous permet de télécharger les messages enregistrés au format JSON.
  • Nouveau champ qui vous permet d'envoyer directement une commande CDP brute

Moniteur de protocole

Problèmes Chromium: 1204004, 1204466

[Fonctionnalités expérimentales] Enregistreur Puppeteer

L'enregistreur Puppeteer génère désormais une liste d'étapes en fonction de votre interaction avec le navigateur, alors qu'auparavant, DevTools générait directement un script Puppeteer. Un nouveau bouton Exporter est ajouté pour vous permettre d'exporter les étapes en tant que script Puppeteer.

Une fois les étapes enregistrées, vous pouvez les revoir à l'aide du nouveau bouton Revoir. Suivez les instructions pour commencer à enregistrer.

Veuillez noter qu'il s'agit d'une fonctionnalité expérimentale en phase de développement. Nous prévoyons d'améliorer et d'étendre les fonctionnalités de l'Enregistreur au fil du temps.

Enregistreur Puppeteer

Problème Chromium: 1199787

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta 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 plate-forme 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.

Nouveautés des outils pour les développeurs

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