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

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

Jecelyn Yeen

Éditeur de grille CSS

Cette fonctionnalité est très demandée. Vous pouvez désormais prévisualiser et créer une grille CSS à l'aide du 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 apparaît à côté de celui-ci 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 créer l'apparence de la grille en un seul clic.

Problème Chromium: 1203241

Prise en charge des redéclarations de `const` dans la console

La console permet désormais de redéclarer l'instruction const, en plus des redéclarations existantes let et class. L'impossibilité de redéclarer était souvent ennuyeuse 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 DevTools pour voir comment cela fonctionne ou effectuer des tests, apporter de légères 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 pris en charge par la conception:

const : la redéclaration des scripts de page 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 (reportez-vous à la variable b).

const redéclarations

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

Lecteur de l'ordre des sources

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 du contenu dont l'ordre à l'écran 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 obtiennent une expérience différente, très probablement déroutante, que les utilisateurs voyants.

Problème Chromium: 1094406

Nouveau raccourci pour afficher les détails du frame

Affichez les détails du cadre iFrame en effectuant un clic droit sur l'élément iFrame dans le panneau "Éléments", puis en sélectionnant Afficher les détails du cadre.

Afficher les détails du frame

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

Vue Détails du frame

Problème Chromium: 1192084

Amélioration de la compatibilité au 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 afin d'en connaître les causes potentielles et les solutions possibles.

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

Problème Chromium: 1141824

Mises à jour du panneau "Network"

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

L'étiquette XHR est maintenant renommée Fetch/XHR. Cette modification indique plus clairement que ce filtre inclut à la fois les requêtes réseau XMLHttpRequest et celles de l'API Fetch.

Libellé Fetch/XHR

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 réseau Wasm.

Filtrer par Wasm

Problème Chromium: 1103638

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

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

Indices 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"

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

Le mode quirks et le mode quirks limité sont d'anciens modes de navigateur datant d'avant l'élaboration des normes Web. Ces modes émulent les comportements de mise en page d'avant la norme 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 véritable problème est le mode Compat de la page. Les outils de développement fournissent des suggestions pour résoudre ce problème.

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

Problème Chromium: 622660

Inclure le calcul d'intersections dans le panneau "Performances"

Les outils de développement affichent désormais l'option Calculer les intersections dans le graphique de type "flamme". Ces modifications vous aident à identifier les événements des observateurs d'intersection et à déboguer les problèmes potentiels sur les performances.

Calculer des intersections dans le panneau "Performances"

Problème Chromium: 1199137

Lighthouse 7.5 dans le panneau Lighthouse

Le panneau Lighthouse utilise désormais la version 7.5 de Lighthouse. L'avertissement "Largeur et hauteur explicites manquantes" a été supprimé pour les images dont l'attribut aspect-ratio est défini dans le CSS. Auparavant, Lighthouse affichait des avertissements pour les images dont la largeur et la hauteur n'étaient pas définies.

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

Problème Chromium: 772558

Abandon du menu contextuel "Redémarrer le cadre" dans la pile d'appel

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.

Abandon du menu contextuel "Restart frame" (Redémarrer le frame)

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 les tests du 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

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. Auparavant, les outils de développement généraient directement un script Puppeteer. Un nouveau bouton Export (Exporter) est 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 Replay (Revoir) pour les répéter. Suivez ces instructions pour faire vos premiers pas avec l'enregistrement.

Veuillez noter que cette expérience n'en est qu'à ses débuts. Nous prévoyons d'améliorer et de développer la fonctionnalité Enregistreur au fil du temps.

Enregistreur de marionnettes

Problème Chromium: 1199787

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.