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

Informations sur l'Enregistreur

Prise en charge des extensions de nouvelle lecture

L'Enregistreur prend en charge les options de relecture personnalisées que vous pouvez intégrer aux outils pour les développeurs à l'aide d'une extension.

Essayez l'exemple d'extension. Sélectionnez la nouvelle option de relecture personnalisée pour ouvrir l'interface utilisateur de la relecture personnalisée.

Pour personnaliser l'Enregistreur en fonction de vos besoins et l'intégrer à vos outils, envisagez de développer votre propre extension: explorez l'API chrome.devtools.recorder et consultez d'autres exemples d'extensions.

Problème Chromium: 1400243.

Enregistrer avec des sélecteurs de perçage

En plus des sélecteurs personnalisés, CSS, ARIA, de texte et XPath, vous pouvez désormais enregistrer à l'aide de sélecteurs de perçage. Ces sélecteurs se comportent comme des sélecteurs CSS, mais peuvent également traverser les racines d'ombre.

Démarrez un nouvel enregistrement sur une page avec Shadow DOM et cochez Percer dans Types de sélecteurs à enregistrer. Enregistrez votre interaction avec les éléments du DOM ombragé et inspectez l'étape correspondante.

Problème Chromium: 1411188.

Exporter en tant que script Puppeteer avec une analyse Lighthouse

L'Enregistreur propose une nouvelle option d'exportation: Puppeteer (y compris l'analyse Lighthouse). Avec Puppeteer, vous pouvez automatiser et contrôler Chrome. Avec Lighthouse, vous pouvez analyser et améliorer les performances de votre site Web.

Ouvrez votre enregistrement, cliquez sur  Exporter, sélectionnez la nouvelle option, puis enregistrez le fichier .js.

Exécutez le script Puppeteer pour obtenir un rapport Lighthouse dans un fichier flow.report.html.

Obtenir des extensions

Découvrez les options de personnalisation de l'enregistreur, par exemple avec les options d'exportation personnalisées. Obtenez des extensions pour l'Enregistreur en cliquant sur  Exporter > Obtenir des extensions dans un enregistrement.

N'hésitez pas à ajouter votre propre extension à la liste des extensions Enregistreur. Nous sommes impatients de vous retrouver sur notre liste !

Problèmes Chromium: 1417104, 1413168.

Éléments > Mises à jour des styles

Documentation CSS

Combien de fois par jour consultez-vous la documentation sur les propriétés CSS ? Le volet Éléments > Styles affiche désormais une brève description lorsque vous pointez sur une propriété.

L'info-bulle comporte également un lien En savoir plus qui vous permet d'accéder à une documentation de référence CSS MDN sur cette propriété.

Si vous connaissez bien le langage CSS, les info-bulles peuvent être gênantes. Pour les désactiver toutes, cochez Ne pas afficher.

Pour les réactiver, cochez Settings > Preferences > Elements > Show CSS documentation tooltip (Paramètres > Préférences > Éléments > Afficher l'info-bulle de la documentation CSS).

Problème Chromium: 1401107.

Prise en charge de l'imbrication CSS

Le volet Éléments > Styles reconnaît désormais la syntaxe d'imbrication CSS et applique les styles imbriqués aux éléments appropriés.

Problème Chromium: 1172985.

Marquage des points de journalisation et des points d'arrêt conditionnels dans la console

Pour améliorer encore l'expérience utilisateur améliorée des points d'arrêt, la console marque désormais les messages déclenchés par des points d'arrêt:

• Appels console.* dans les points d'arrêt conditionnels avec un point d'interrogation orange ?
• Messages Logpoint avec deux points roses ..

La console fournit désormais des liens d'ancrage appropriés vers les points d'arrêt dans les fichiers sources au lieu des scripts VM<number> créés par Chrome pour exécuter n'importe quel élément JavaScript sous V8.

Cliquez sur le lien à côté du message du point d'arrêt pour accéder directement à l'éditeur de points d'arrêt.

Problème Chromium: 1027458.

Ignorer les scripts non pertinents lors du débogage

Pour vous aider à vous concentrer sur les parties les plus importantes de votre code, vous pouvez désormais ajouter des scripts non pertinents à la liste d'ignorer directement dans l'arborescence de fichiers du volet Sources > Page.

Effectuez un clic droit sur un script ou un dossier, puis sélectionnez l'une des options permettant d'ignorer les erreurs. Des options permettant d'ajouter ou de supprimer le script ou le dossier dans la liste peuvent s'afficher. Le débogueur ignore les scripts ajoutés à la liste et les omet dans la pile d'appels.

Tous les scripts et dossiers figurant dans la liste d'ignorement sont grisés dans l'arborescence des fichiers.

Si vous sélectionnez un script ignoré, le bouton Configurer vous permet d'accéder à Settings > Ignore List (Paramètres > Liste d'ignorer). Vous pouvez également masquer les sources ignorées dans l'arborescence de fichiers en sélectionnant > Masquer les sources figurant dans la liste des éléments à ignorer .

Problème Chromium: 883325.

Début de l'abandon du Profileur JavaScript

Dès Chrome 58, l'équipe DevTools a prévu d'abandonner le profileur JavaScript et de demander aux développeurs Node.js et Deno d'utiliser le panneau Performances pour profiler les performances du processeur JavaScript.

Cette version de DevTools (112) marque le début de l'abandon en quatre phases du profileur JavaScript. Le panneau Profileur JavaScript affiche désormais la bannière d'avertissement correspondante.

Au lieu d'utiliser Profiler, utilisez le panneau Performances pour profiler le processeur.

Pour en savoir plus et envoyer vos commentaires, consultez la RFC et la page crbug.com/1354548 correspondantes.

Problème Chromium: 1417647.

Émuler le contraste réduit

L'onglet Rendering (Rendu) ajoute une nouvelle option à la liste Émuler les déficiences visuelles : Contraste réduit. Cette option vous permet de découvrir comment votre site Web s'affiche pour les personnes dont la sensibilité au contraste est réduite.

Notez que les options de la liste ont été mises à jour pour vous indiquer l'insensibilité des couleurs représentées par les options.

Les outils de développement vous permettent de détecter et de résoudre tous les problèmes de contraste en même temps. Pour en savoir plus, consultez Rendre votre site Web plus lisible.

Problèmes Chromium: 1412719, 1412721.

Phare 10

Le panneau Lighthouse exécute désormais Lighthouse 10.0.1. Pour en savoir plus, consultez Nouveautés de Lighthouse 10.0.1.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Lighthouse >  > L'ancienne navigation est désormais désactivée par défaut. Cette option utilise l'ancienne configuration Lighthouse en mode navigation.

Lighthouse 10 utilise désormais le Moto G Power comme appareil d'émulation par défaut. Les outils de développement ont ajouté cet appareil à Paramètres > Appareils.

Problème Chromium : 772558.

Avertissement dans la console vous invitant à supprimer le gestionnaire d'extraction de service worker no-op

Chrome 112 ignore les gestionnaires de récupération de service worker sans opération, car ils peuvent ralentir la navigation, mais n'ont aucune utilité. Ces gestionnaires ne sont plus nécessaires pour que votre site Web soit considéré comme une progressive web app.

La console affiche désormais un avertissement si elle détecte un gestionnaire d'extraction no-op sur votre site Web. Nous vous conseillons de la supprimer.

Problème Chromium: 1347319.

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

• Le volet Sources > Points d'arrêt affiche désormais des chemins de fichiers distincts à côté des noms de fichiers ambigus (1403924).
• La section principale du graphique en forme de flamme du panneau Performances désigne désormais CpuProfiler::StartProfiling comme Profiler Overhead (1358602).
• Amélioration de la saisie semi-automatique dans les outils de développement :
  • Sources: terminaisons cohérentes de n'importe quel mot (1320204).
  • Console: Arrow down sélectionne la première suggestion et les suggestions obtiennent Tab suggestions (1276960).
• Les outils de développement ont ajouté un point d'arrêt de l'écouteur d'événements pour vous permettre de suspendre l'exécution lorsque vous ouvrez une fenêtre Picture-in-picture de document (1315352).
• Les outils de développement ont configuré une solution de contournement qui affiche correctement les artefacts Webpack Vue2 au format JavaScript (1416562).
• Un paramètre de la console reçoit un meilleur nom : "Développer automatiquement les messages console.trace()". (1139616).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome 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 plate-forme 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, des mises à jour ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en sélectionnant more_vert Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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 concernant les outils de développement