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

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

Sofia Emelianova

Suppression progressive des cookies tiers

Il est possible que votre site utilise des cookies tiers. Le moment est venu de prendre des mesures, car leur abandon approche. Pour savoir comment traiter les cookies concernés, consultez Préparer l'arrêt des cookies tiers.

La case à cocher Inclure les problèmes liés aux cookies tiers a été cochée par défaut pour tous les utilisateurs de Chrome. L'onglet Problèmes vous indique donc désormais les cookies qui seront affectés par l'abandon et l'abandon à venir des cookies tiers. Vous pouvez décocher la case à tout moment pour que ces problèmes ne s'affichent plus.

Avertissement concernant l'abandon prochain des cookies tiers dans l'onglet "Problèmes".

Problème Chromium: 1466310.

Analyser les cookies de votre site Web avec Privacy Sandbox Analysis Tool

L'extension Privacy Sandbox Analysis Tool pour les outils de développement est en cours de développement avec la dernière version préliminaire 0.3.2. Cet outil vous permet de comprendre comment votre site Web utilise les cookies et fournit des conseils sur les nouvelles API Chrome protégeant la confidentialité.

Pour analyser vos cookies:

Installez l'extension dans Chrome.
Ouvrez votre site Web dans un seul onglet pour une analyse optimale.
Ouvrez les outils de développement et accédez au panneau Privacy Sandbox. Ce panneau est peut-être masqué derrière le bouton déroulant en haut.
Ouvrez la section Cookies et cliquez sur Analyze this tab (Analyser cet onglet). Si l'outil n'a trouvé aucun cookie, essayez d'actualiser la page.

Privacy Sandbox Analysis Tool

Pour en savoir plus sur l'utilisation de Privacy Sandbox Analysis Tool (PSAT), consultez les pages suivantes:

Tutoriel de PSAT.
Pour prévoir ce qui se passera une fois l'abandon effectif, configurez un environnement d'évaluation.
Pour identifier les aspects concernés, consultez la section Actions d'analyse générales.
Pour apprendre à analyser des scénarios courants, tels que l'analyse de données, l'e-commerce, les services SSO, le contenu intégré, etc., consultez les exemples de démonstration de la section Scénarios d'analyse.

Pour en savoir plus, consultez Signaler des problèmes.

Liste d'éléments à ignorer améliorée

Format d'exclusion par défaut pour `node_modules`

Cette version active l'expression régulière par défaut en tant que règle d'exclusion personnalisée dans Paramètres > Liste des éléments à ignorer. Pour vous aider à vous concentrer uniquement sur votre code, Debugger ignore désormais par défaut les scripts de /node_modules/ et /bower_components/. Vous pouvez désactiver cette règle à tout moment dans les paramètres.

Avant et après l'ajout d'une expression régulière.

Problème Chromium: 1496301.

Les exceptions arrêtent désormais l'exécution si elles sont détectées ou transmises via du code non ignoré

Lorsque vous déboguez du code avec l'option Mettre en pause sur les exceptions détectées cochée, Debugger arrête désormais l'exécution des exceptions détectées suivantes, à la fois synchrones et asynchrones:

Exceptions détectées dans les cadres non ignorés de la pile d'appel.
Exceptions détectées qui passent par des cadres non ignorés dans la pile d'appel. Par exemple, consultez la capture d'écran.

Suspendez-vous sur une exception interceptée transmise via du code non ignoré.

Pour tester ce comportement, ouvrez cette page de démonstration:

Ouvrez DevTools > Sources, ajoutez le dossier hidden à la liste des éléments à ignorer, puis cochez la case Mettre en veille sur les exceptions interceptées.
Sur la page, sous le libellé "Pêché", des scénarios, cliquez sur les différents boutons et observez l'exécution interrompue dans les cas mentionnés.

Pour suspendre l'exécution sur les exceptions interceptées et/ou non interceptées (lorsqu'elles sont cochées) dans les appels asynchrones, Debugger recherche des gestionnaires de refus dans les promesses. À partir de cette version, Debugger ne prédit plus que Promise.finally() intercepte une exception, de la même manière que le bloc try...finally n'en intercepte aucune.

Problèmes Chromium: 1489312, 1291064.

Changement de nom : `x_google_ignoreList` devient `ignoreList` dans les mappages sources.

La spécification des cartes sources a adopté le champ ignoreList à la place de x_google_ignoreList. Les outils de développement acceptent désormais le nouveau nom et l'ancien nom est remplacé par une valeur de remplacement. Les frameworks et les bundlers peuvent désormais utiliser le nouveau nom de champ.

Les mappages sources vous permettent de déboguer le code que vous avez écrit plutôt que de réduire la taille du code diffusé par votre site Web.

Pour en savoir plus sur les mappages sources, consultez les pages suivantes:

Nouveau bouton d'activation/désactivation du mode de saisie lors du débogage à distance

Vous pouvez désormais basculer entre la saisie tactile et la saisie à la souris lorsque vous déboguez un onglet Chrome à distance. Par exemple, lorsque vous exécutez une instance Chrome avec --remote-debugging-port=<port> et que vous vous connectez à ce réseau cible via chrome://inspect/#devices.

Regardez la vidéo pour voir comment activer ou désactiver le mode de saisie.

Problème Chromium: 1410433.

Le panneau "Éléments" affiche désormais les URL pour `#document` nœuds

Pour faciliter le débogage des iFrames, le panneau Éléments affiche désormais documentURL à côté des nœuds #document.

Les avant et après affichent "documentURL" à côté du nœud #document.

Problème Chromium: 1376976.

Règle de sécurité du contenu en vigueur dans le panneau "Application"

Vous pouvez maintenant afficher les détails de la Content Security Policy (CSP) d'un frame inspecté. Pour afficher les détails, accédez à Application > Frames, sélectionnez un frame et faites défiler la page jusqu'à la section Content Security Policy (CSP).

Section "Content Security Policy" située dans l'onglet "Application"

Problème Chromium: 1424714.

Amélioration du débogage des animations

Dans l'onglet Animations, vous pouvez maintenant:

Cliquez n'importe où sur l'en-tête de la timeline pour définir la tête de lecture. La lecture de l'animation se poursuit si elle était déjà en cours et s'arrête dans le cas contraire. Auparavant, il fallait la faire glisser.
Redimensionnez la colonne des noms pour afficher les noms complets des animations.

Problèmes Chromium: 1492460, 1489721.

"Faites-vous confiance à ce code ?" boîte de dialogue "Sources" et avertissement pour auto-XSS dans la console

Le test Afficher un avertissement concernant l'auto-XSS lors du collage du code est activé par défaut. Self-XSS (self-XSS) est une attaque qui vous incite à coller du code malveillant dans les outils de développement et permet à un pirate informatique de prendre le contrôle de vos comptes Web et de vos informations personnelles.

Si vous êtes un nouvel utilisateur des outils de développement et que vous essayez de coller du code, le panneau Sources affiche désormais la boîte de dialogue Faites-vous confiance à ce code ? et la console affiche un avertissement similaire. Collez uniquement le code que vous comprenez et que vous avez examiné vous-même. Pour coller, saisissez allow pasting lorsque vous y êtes invité. Une fois que le collage a été autorisé, l'avertissement ne s'affichera plus.

La question "Faites-vous confiance à ce code ?" lorsque vous collez du code dans "Sources".

Problème Chromium: 345205.

Points d'arrêt de l'écouteur d'événements dans les nœuds de calcul Web et les Worklets

Lorsque vous définissez un point d'arrêt d'événement dans Sources > Points d'arrêt de l'écouteur d'événements : outre la mise en pause de cet événement sur votre site Web, Debugger s'interrompt désormais lorsque l'événement correspondant se produit dans un nœud de calcul Web ou un worklet de n'importe quel type, y compris le Worklet de stockage partagé.

Débogueur suspendu lorsqu'un service worker appelle la fonction de délai d'expiration défini.

Problème Chromium: 1445175.

Nouveau badge média pour `<audio>` et `<video>`

Vous pouvez désormais activer le nouveau badge multimédia pour les éléments <audio> et <video> dans le panneau Éléments. Lorsque vous cliquez sur le badge, vous êtes redirigé vers le panneau Multimédia pour vous permettre de déboguer ces éléments.

Cette fonctionnalité est en cours de développement et sera améliorée. L'équipe DevTools souhaite exprimer sa gratitude à Junseo (Jeremy) Yoo pour cette amélioration.

Problème Chromium: 1448214.

"Préchargement" renommé "Chargement spéculatif"

Pour éviter toute utilisation abusive du terme précédent et mieux refléter le comportement, Application > Préchargement a été renommé Chargements spéculatifs. Le chargement spéculatif permet le chargement quasi instantané des pages en fonction de règles de spéculation que vous pouvez définir pour que votre site Web précharge et précharge la plupart des pages consultées.

Changement de nom (avant/après) du préchargement en chargement spéculatif.

Problème Chromium: 1478888.

Lighthouse 11.2.0

Le panneau Lighthouse exécute désormais Lighthouse 11.2.0. Consultez la liste complète des modifications.

Cette mise à jour inclut une refonte de la catégorie de performances. Les insights sur les performances sont désormais évalués et hiérarchisés en fonction de leur impact estimé sur les métriques de performances. De plus, la jauge de score de performance inclut des informations plus détaillées sur l'impact de chaque métrique sur le score.

Refonte des performances avant/après.

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.

Problèmes Chromium: 772558.

Amélioration des fonctionnalités d'accessibilité

Cette version comporte les améliorations d'accessibilité suivantes:

Les lecteurs d'écran annonceront désormais l'état (coché ou non) des cases à cocher sous Sources > Points d'arrêt.
Vous pouvez désormais accéder au menu déroulant Masquer ce type de problèmes avec le clavier.

Problèmes Chromium: 1488645, 1484918.

Points importants divers

Voici quelques correctifs et améliorations importants dans cette version:

Performances: correction de l'indicateur LCP parfois manquant dans l'enregistrement (1487136).
Chargements spéculatifs: correction des URL complètes pour les cibles dans le menu déroulant du panneau Network (1471020).
Couverture: <ph type="x-smartling-placeholder">
- Correction de la couverture ligne par ligne du code mis en forme correctement (1464974).
- Les informations de couverture sont désormais mises à jour lorsque vous actualisez la page (1494457).
Console: <ph type="x-smartling-placeholder">
- Correction de la sélection de texte partielle dans les messages (1487449).
- Correction du scintillement de la liste déroulante de la saisie semi-automatique (1487453).
- Parenthèses acceptées dans les chemins de pile et les URL dans les traces de pile (1473926).
Sources: prise en charge de la mise en surbrillance de la syntaxe du mot clé TypeScript using (1490515).
Le menu Quick Open (Ouverture rapide) affiche désormais les méthodes privées. (1492957)
Application > Services d'arrière-plan: désormais, le texte est renvoyé à la ligne dans la barre d'action supérieure lors du redimensionnement. (1487276)
Éléments > Styles: <ph type="x-smartling-placeholder">
- Correction de la résolution des variables CSS héritées pour les éléments insérés (1492162).
- Lors de la désactivation d'une propriété CSS, ses commentaires sont désormais supprimés pour corriger les problèmes de syntaxe (1101224).
Réseau: la colonne Priorité affiche désormais une info-bulle contenant des informations sur la priorité initiale (il en va de même lorsque la case Lignes de requête volumineuses est cochée) (1495735).
Abandons: <ph type="x-smartling-placeholder">
- Le paramètre Format de couleur a été désactivé dans les versions précédentes et a été supprimé.
- L'option "Supprimer tous les remplacements" dans Sources est désormais supprimée en raison de la faible utilisation après la simplification des remplacements (1473681).

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