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

Jecelyn Yeen

Éditeur de grille CSS

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

Éditeur de grille CSS

Lorsqu'un élément HTML de votre page est associé à display: grid ou display: inline-grid, une icône s'affiche à côté dans le volet "Styles". Cliquez sur l'icône pour activer ou 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éclarations const dans la console

La console est désormais compatible avec la redéclaration de l'instruction const, en plus des redéclarations let et class existantes. L'impossibilité de redéclarer était une source de frustration courante pour les développeurs Web qui utilisent la console pour tester de nouveaux codes JavaScript.

Les développeurs peuvent ainsi copier-coller du code dans la console des outils de développement pour voir comment il fonctionne ou faire 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 des scripts REPL distincts (voir la variable a). Notez que les scénarios suivants ne sont pas acceptés par 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).

Redéclarations de const

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 du contenu dans un document HTML est important pour l'optimisation des moteurs de recherche et l'accessibilité. Les nouvelles fonctionnalités CSS permettent aux développeurs de créer des contenus dont l'ordre d'affichage à 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 bénéficieraient d'une expérience différente, probablement déroutante, par rapport aux utilisateurs voyants.

Problème Chromium : 1094406

Nouveau raccourci pour afficher les détails d'un frame

Pour afficher les détails d'un 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 êtes alors redirigé vers une vue des détails de l'iframe dans le panneau "Application". Vous pouvez y examiner les détails du document, l'état de sécurité et d'isolation, la politique d'autorisation et plus encore 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 avoir différentes causes. Cliquez sur chaque problème pour en savoir plus sur les causes et les solutions potentielles.

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

Problème Chromium : 1141824

Mises à jour du panneau "Réseau"

Renommer le libellé XHR en Fetch/XHR

Le libellé XHR a été renommé Fetch/XHR. Cette modification permet de préciser que ce filtre inclut les requêtes réseau XMLHttpRequest et Fetch API.

Libellé Fetch/XHR

Problème Chromium : 1201398

Filtrer le type de ressource Wasm dans le panneau "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

User-Agent Client Hints 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 de l'onglet Conditions du réseau.

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

User-Agent Client Hints pour les appareils dans l'onglet "Conditions du réseau"

Problème Chromium : 1174299

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

Les outils de développement signalent désormais les problèmes liés au mode Quirks et au mode Quirks limité.

Les modes Quirks et Quirks limité sont d'anciens modes de navigateur qui existaient avant la création des normes Web. Ces modes émulent les comportements de mise en page de l'ère pré-norme, 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 dus à des bugs CSS ou HTML créés par l'utilisateur, alors que le véritable problème est le mode Compatibilité dans lequel se trouve la page. Les outils de développement vous suggèrent des solutions.

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

Problème Chromium : 622660

Inclure "Calculer les intersections" dans le panneau "Performances"

Les outils de développement affichent désormais Compute Intersections dans le graphique en flammes. Ces modifications vous aident à identifier les événements IntersectionObserver et à déboguer les éventuels problèmes de performances.

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 dont la valeur aspect-ratio est définie dans le 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 Redémarrer le frame est désormais obsolète. Cette fonctionnalité nécessite un développement plus poussé pour fonctionner correctement. Elle est actuellement défaillante 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 moniteur 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 du CDP :

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

Moniteur de protocole

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, alors qu'auparavant, les outils de développement généraient directement un script Puppeteer. Un nouveau bouton Exporter a été ajouté pour vous permettre d'exporter les étapes sous forme de script Puppeteer.

Après avoir enregistré les étapes, vous pouvez les revoir en cliquant sur le nouveau bouton Revoir. Suivez ces instructions pour savoir comment commencer à enregistrer.

Veuillez noter qu'il s'agit d'un test en phase préliminaire. Nous prévoyons d'améliorer et d'étendre la fonctionnalité de l'Enregistreur au fil du temps.

Puppeteer Recorder

Problème Chromium : 1199787

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.