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

Sofia Emelianova

Jecelyn Yeen

Nouveautés de l'Enregistreur

Compatibilité avec les extensions de replay

L'Enregistreur est désormais compatible avec 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 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 perforation

En plus des sélecteurs personnalisés, CSS, ARIA, de texte et XPath, vous pouvez désormais enregistrer des tests à l'aide de sélecteurs pierce. Ces sélecteurs se comportent comme des sélecteurs CSS, mais peuvent également traverser les racines fantômes.

Démarrez un nouvel enregistrement sur une page avec shadow DOM et cochez Pierce dans Types de sélecteurs pour l'enregistrement. Enregistrez votre interaction avec les éléments du shadow DOM et inspectez l'étape correspondante.

Problème Chromium : 1411188.

Exporter en tant que script Puppeteer avec l'analyse Lighthouse

L'Enregistreur propose une nouvelle option d'exportation : Puppeteer (y compris l'analyse Lighthouse). Puppeteer vous permet d'automatiser et de contrôler Chrome. Lighthouse vous permet de capturer et d'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 permettant de personnaliser votre expérience avec l'enregistreur, par exemple avec des options d'exportation personnalisées. Pour obtenir des extensions pour l'enregistreur, cliquez sur Exporter > Obtenir des extensions dans un enregistrement.

N'hésitez pas à ajouter votre propre extension à la liste des extensions de l'enregistreur. Nous avons hâte de découvrir le vôtre !

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 contient également un lien En savoir plus qui vous redirige vers une documentation de référence MDN sur le CSS concernant cette propriété.

Si vous maîtrisez bien les CSS, vous trouverez peut-être les info-bulles gênantes. Pour les désactiver tous, cochez Ne pas afficher.

Pour les réactiver, cochez Paramètres > Préférences > Éléments > Afficher l'info-bulle de documentation CSS.

Problème Chromium : 1401107.

Compatibilité avec l'imbrication CSS

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

Problème Chromium : 1172985.

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

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

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

La console vous 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> que Chrome crée pour exécuter n'importe quel élément JavaScript sur V8.

Cliquez sur le lien à côté du message de 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'exclusion directement depuis l'arborescence des fichiers dans le volet Sources > Page.

Effectuez un clic droit sur un script ou un dossier, puis sélectionnez l'une des options liées à l'ignorance. Vous pouvez ajouter ou supprimer le script ou le dossier dans la liste. Le débogueur ignore les scripts ajoutés à la liste et les omet dans la pile d'appels.

Tous les scripts et dossiers ajoutés à la liste d'exclusion sont grisés dans l'arborescence des fichiers.

Si vous sélectionnez un script ignoré, le bouton Configurer vous redirige vers Paramètres > Liste des éléments ignorés. Vous pouvez également masquer les sources ignorées dans l'arborescence des fichiers en cliquant sur  > Masquer les sources de la liste des éléments à ignorer .

Problème Chromium : 883325.

Début de l'abandon du profileur JavaScript

Depuis Chrome 58, l'équipe des outils pour les développeurs prévoyait de supprimer 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 des outils de développement (112) marque le début de la suppression en quatre phases du profileur JavaScript. Le panneau Profileur JavaScript affiche désormais la bannière d'avertissement correspondante.

Au lieu du Profileur, utilisez le panneau Performances pour profiler le processeur.

Pour en savoir plus et envoyer des commentaires, consultez la RFC correspondante et crbug.com/1354548.

Problème Chromium : 1417647.

Émuler le contraste réduit

L'onglet Rendering (Rendu) ajoute une nouvelle option à la liste Emulate vision deficiencies (Émuler les déficiences visuelles) : Reduced contrast (Contraste réduit). Cette option vous permet de découvrir l'apparence de votre site Web 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 le type d'insensibilité aux couleurs qu'elles représentent.

Les outils de développement vous permettent d'identifier 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.

Lighthouse 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 bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.

Lighthouse > > 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 de la console pour supprimer votre gestionnaire de récupération de service worker no-op

Chrome 112 ignore les gestionnaires de récupération de service worker no-op (sans opération), car ils peuvent ralentir la navigation sans être utiles. 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 de récupération no-op sur votre site Web. Envisagez de la supprimer.

Problème Chromium : 1347319.

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

• Le volet Sources > Points d'arrêt affiche désormais des chemins d'accès aux fichiers distincts à côté des noms de fichiers ambigus (1403924).
• La section Main du graphique en flammes du panneau Performances désigne désormais CpuProfiler::StartProfiling comme Profiler Overhead (1358602).
• Amélioration de l'autocomplétion dans les outils de développement :
  • Sources : complétions cohérentes de n'importe quel mot (1320204).
  • Console : Arrow down sélectionne la première suggestion et les suggestions reçoivent des indications Tab (1276960).
• Les outils de développement ont ajouté un point d'arrêt d'écouteur d'événement pour vous permettre de faire une pause lorsque vous ouvrez une fenêtre Picture-in-picture de document (1315352).
• Les outils de développement ont mis en place une solution de contournement qui affiche correctement les artefacts webpack Vue2 en tant que JavaScript (1416562).
• Un paramètre de la console est renommé "Développer automatiquement les messages console.trace()". (1139616).

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 Chrome DevTools

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.

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