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). Puppeteer vous permet d'automatiser et de 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 de l'Enregistreur. Nous avons hâte de vous voir sur la 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 CSS, les info-bulles peuvent vous sembler 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.

Marquer 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 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 code JavaScript sur 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 d'ignorement. Des options peuvent s'afficher pour ajouter ou supprimer le script ou le dossier de 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 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 de l'arborescence de fichiers avec  > Masquer les sources de 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 Profiler 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 des commentaires, consultez la RFC et crbug.com/1354548 correspondantes.

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 voir à quoi ressemble votre site Web pour les personnes ayant une sensibilité au contraste réduite.

Notez que les options de la liste ont été mises à jour pour indiquer l'insensibilité aux couleurs qu'elles représentent.

Avec les outils pour les développeurs, vous pouvez identifier et 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 DevTools, consultez Lighthouse: optimiser la vitesse de votre 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. DevTools a ajouté cet appareil à Settings > Devices (Paramètres > Appareils).

Problème Chromium: 772558.

Avertissement de la console vous invitant à supprimer votre gestionnaire de récupération du service worker sans opération

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 de récupération sans opération 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 reçoivent des indices Tab (1276960).
• Les outils de développement ont ajouté un point d'arrêt d'écouteur d'événement 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é un correctif qui affiche correctement les artefacts webpack Vue2 en tant que 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

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 plates-formes 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'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 éléments abordés dans la série Nouveautés des outils pour les développeurs.