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

Sofia Emelianova
Sofia Emelianova

Mises à jour de l'Enregistreur

Compatibilité avec les extensions de nouvelle lecture

L'Enregistreur est compatible avec les options de relecture personnalisées que vous pouvez intégrer dans les outils de développement à 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.

UI de relecture personnalisée

Pour personnaliser 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 Pierce

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

Démarrez un nouvel enregistrement sur une page à l'aide du Shadow DOM et cochez la case Case à cocher. Pierce dans Sélecteurs de types à enregistrer. Enregistrez votre interaction avec les éléments du Shadow DOM et inspectez l'étape correspondante.

Configurer l'Enregistreur pour utiliser les sélecteurs Pierce Le sélecteur Pierce en action.

Problème Chromium: 1411188.

Exporter sous forme de script Puppeteer avec l'analyse Lighthouse

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

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

Exporter Puppeteer (y compris l'analyse Lighthouse)

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

Le rapport Lighthouse s'est ouvert dans Chrome.

Obtenir des extensions

Explorez des options pour personnaliser votre utilisation de l'Enregistreur (avec des options d'exportation personnalisées, par exemple). Pour obtenir les extensions de l'Enregistreur, cliquez sur le bouton Exporter. Exporter > Obtenir des extensions dans un enregistrement

Option "Obtenir des extensions" dans le menu déroulant "Exporter"

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 > Modifications apportées aux styles

Documentation CSS

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

Info-bulle contenant de la documentation sur une propriété CSS.

L'info-bulle comporte également un lien En savoir plus qui vous redirige vers une référence CSS MN sur cette propriété.

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

Pour les réactiver, accédez à Paramètres. Paramètres > Préférences > Éléments > Case à cocher. Afficher l'info-bulle de la documentation CSS

Problème Chromium: 1401107.

Prise en charge de l'imbrication CSS

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

Problème Chromium: 1172985.

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

Amélioration de l'expérience utilisateur améliorée au niveau des points d'arrêt : la Console marque désormais les messages déclenchés par des points d'arrêt :

Modifications apportées à la façon dont la console affiche désormais les messages déclenchés par des points d'arrêt: avec des icônes et un lien source approprié.

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.

Lien d&#39;ancrage à côté d&#39;un message de point de journalisation qui ouvre l&#39;éditeur de points d&#39;arrêt.

Problème Chromium: 1027458.

Ignorer les scripts non pertinents pendant le débogage

Pour vous aider à vous concentrer sur les parties les plus importantes de votre code, vous pouvez désormais ajouter les scripts non pertinents à la liste des éléments à ignorer directement depuis l'arborescence de fichiers, sous Sources > Volet 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. Debugger ignore les scripts ajoutés à la liste et les omet dans la pile d'appel.

Menus contextuels d&#39;un dossier et d&#39;un script avec des options relatives aux éléments à ignorer.

Tous les scripts et dossiers figurant dans la liste des éléments à ignorer sont grisés dans l'arborescence de fichiers.

Les scripts et les dossiers ajoutés à la liste d&#39;omissions sont grisés. Vous pouvez les masquer à l&#39;aide d&#39;une option expérimentale dans le menu déroulant Autres options .

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

Problème Chromium: 883325.

Début de l'abandon du Profileur JavaScript

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

Cette version des outils de développement (112) commence l'abandon du Profileur JavaScript en quatre phases. Le panneau Profileur JavaScript affiche désormais la bannière d'avertissement correspondante.

Bannière d&#39;abandon en haut de Profiler.

Au lieu du Profiler, utilisez le panneau Profiler 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 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.

L&#39;option de contraste réduit sélectionnée dans &quot;Émuler les déficiences visuelles&quot; de Google Cloud.

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 Améliorer la lisibilité de votre site Web.

Problèmes Chromium: 1412719, 1412721.

Lighthouse 10

Le panneau Lighthouse utilise 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.

Phare > Paramètres. > Case vide. L'ancienne fonctionnalité de navigation est désormais désactivée par défaut. Cette option utilise l'ancienne configuration Lighthouse en mode de navigation.

Ancienne navigation désactivée.

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. Paramètres > Appareils.

Moto G Power dans la liste des 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 d'extraction de service worker no-op (aucune opération), car ils peuvent ralentir la navigation, mais ils ne sont pas 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 d'extraction no-op sur votre site Web. Nous vous conseillons de la supprimer.

Un gestionnaire d&#39;extraction no-op et l&#39;avertissement correspondant dans la console

Problème Chromium: 1347319.

Points importants divers

Voici quelques correctifs importants dans cette version:

  • La page Sources > Le volet Breakpoints (Points d'arrêt) affiche désormais des chemins d'accès différenciés à côté des noms de fichiers ambigus (1403924).
  • La section Principal du graphique de flammes du panneau Performances désigne désormais CpuProfiler::StartProfiling par Profiler Overhead (1358602).
  • Amélioration de la saisie semi-automatique dans les outils de développement: <ph type="x-smartling-placeholder">
      </ph>
    • Sources: achèvements cohérents d'un 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 d'écouteur d'événements pour vous permettre de marquer une pause lorsque vous ouvrez une fenêtre Picture-in-picture du 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 Console porte un meilleur nom: il permet de développer automatiquement les messages console.trace(). (1139616).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

  • Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
  • Signalez un problème lié aux outils de développement en cliquant sur Autres options   Plus > Aide > Signalez un problème dans les outils de développement.
  • Tweetez à l'adresse @ChromeDevTools.
  • Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement