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. Il est temps d'agir, car ils seront bientôt abandonnés. Pour savoir comment procéder, consultez Se préparer à la fin des cookies tiers.

La case Inclure les cookies tiers a été cochée par défaut pour tous les utilisateurs de Chrome. Par conséquent, l'onglet Problèmes vous avertit désormais des cookies qui seront affectés par l'abandon et l'abandon progressif des cookies tiers. Vous pouvez décocher cette case à tout moment pour ne plus voir ces problèmes.

Avertissement concernant l'abandon à venir des cookies tiers dans l'onglet "Problèmes"

Problème Chromium: 1466310.

Analyser les cookies de votre site Web avec l'outil d'analyse Privacy Sandbox

L'extension Outil d'analyse Privacy Sandbox 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.
Pour une analyse optimale, ouvrez votre site Web dans un onglet unique.
Ouvrez les outils de développement, puis accédez au panneau Privacy Sandbox. Ce panneau peut être masqué par le bouton déroulant en haut.
Ouvrez la section Cookies, puis cliquez sur Analyser cet onglet. Si l'outil n'a détecté aucun cookie, essayez d'actualiser la page.

Outil d'analyse de la Privacy Sandbox.

Pour en savoir plus sur l'utilisation de l'outil d'analyse de la Privacy Sandbox (PSAT), consultez les ressources suivantes:

Guide d'utilisation du programme PSAT
Pour prévoir ce qui est susceptible de se produire une fois l'abandon effectif, configurez un environnement d'évaluation.
Pour identifier les aspects concernés, consultez la section Actions générales d'analyse.
Pour découvrir comment analyser des scénarios courants, y compris l'analyse, l'e-commerce, les services SSO, le contenu intégré, etc., consultez les exemples de démonstration dans Scénarios d'analyse.

Consultez également les conseils sur Signaler des problèmes.

Fiche améliorée pour les éléments à ignorer

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 d'éléments à ignorer. Pour vous aider à vous concentrer uniquement sur votre code, Debugger ignorera désormais les scripts de /node_modules/ et /bower_components/ par défaut. Vous pouvez désactiver cette règle à tout moment dans les paramètres.

Expression régulière 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 Suspendre les exceptions interceptées cochée, Debugger arrête désormais l'exécution des exceptions interceptées suivantes, synchrones et asynchrones:

Exceptions détectées dans les cadres non ignorés de la pile d'appel.
Les exceptions qui passent par des cadres non ignorés dans la pile d'appel ont été capturées. Par exemple, reportez-vous à la capture d'écran.

Arrêtez une exception interceptée qui a transmis du code non ignoré.

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

Ouvrez les Outils de développement > Sources, ajoutez le dossier hidden à la liste des éléments à ignorer, puis cochez la case Suspendre les exceptions interceptées.
Sur la page, sous la liste des scénarios "Pêchés", cliquez sur les différents boutons. L'exécution est alors suspendue dans les cas mentionnés.

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

Problèmes Chromium: 1489312, 1291064.

Remplacement du nom `x_google_ignoreList` par `ignoreList` dans les cartes sources

La spécification des cartes sources a adopté le champ ignoreList au lieu de x_google_ignoreList. Les outils de développement acceptent désormais le nouveau nom avec une valeur de remplacement pour l'ancien. Les frameworks et les bundlers peuvent désormais utiliser le nouveau nom de champ.

Les mappages source 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 cartes sources, consultez les ressources suivantes:

Nouveau bouton d'activation/de désactivation du mode d'entrée 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 le --remote-debugging-port=<port> et que vous vous connectez à ce réseau cible via chrome://inspect/#devices.

Regardez la vidéo pour voir concrètement comment activer le mode de saisie.

Problème Chromium: 1410433.

Le panneau "Elements" affiche désormais les URL de `#document` nœuds

Pour vous permettre de déboguer plus facilement les iFrames, le panneau Éléments affiche désormais documentURL à côté de #document nœuds.

L'avant et l'après affichent documentURL à côté du nœud #document.

Problème Chromium: 1376976.

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

Vous pouvez désormais 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 cadre 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ù dans 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 elle s'arrête dans le cas contraire. Auparavant, il fallait le faire glisser.
Redimensionnez la colonne des noms pour afficher le nom complet des animations.

Problèmes Chromium: 1492460, 1489721.

Boîte de dialogue "Faites-vous confiance à ce code ?" dans les sources et avertissement auto-XSS dans la console

Le test Afficher un avertissement concernant auto-XSS lors du collage du code est activé par défaut. L'auto-script intersite (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 n'avez jamais utilisé les outils de développement et que vous tentez de coller du code, le panneau Sources affiche désormais la boîte de dialogue Do you trust this code? (Faites-vous confiance à ce code) et la console affiche désormais un avertissement similaire. Collez uniquement le code que vous comprenez et que vous avez examiné. Pour coller, saisissez allow pasting lorsque vous y êtes invité. Une fois le collage autorisé, l'avertissement ne s'affichera plus jamais.

Boîte de dialogue "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 workers et les Worklets Web

Lorsque vous définissez un point d'arrêt pour un événement dans Sources > Points d'arrêt de l'écouteur d'événements, en plus de mettre en veille cet événement sur votre site Web, Debugger s'interrompt désormais également 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é.

Le débogueur est suspendu lorsqu'un service worker appelle la fonction "setTimeout"

Problème Chromium: 1445175.

Nouveau badge multimé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 Elements (Éléments). Lorsque vous cliquez sur le badge, vous êtes redirigé vers le panneau Multimédia, où vous pouvez déboguer ces éléments.

Cette fonctionnalité est en cours de développement et sera améliorée. L'équipe DevTools aimerait remercier Junseo (Jeremy) Yoo pour cette amélioration.

Problème Chromium: 1448214.

Le préchargement a été renommé "Chargement spéculatif".

Pour éviter d'utiliser le terme précédent et mieux refléter le comportement, Application > Préchargement a été renommé Chargements spéculatifs. Le chargement spéculatif permet de charger presque instantanément les pages en fonction de règles de spéculation que vous pouvez définir pour votre site Web afin de précharger et de précharger les pages les plus visitées.

Changement de nom : préchargement avant et après renommage en chargement spéculatif.

Problème Chromium: 1478888.

Lighthouse 11.2.0

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

Cette mise à jour inclut une refonte de la catégorie "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, l'indicateur de score de performance inclut des informations plus détaillées sur l'impact de chaque métrique sur le score.

La refonte des performances avant/après.

Pour découvrir les bases 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 de l'accessibilité

Cette version propose 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 les problèmes similaires à l'aide du clavier.

Problèmes Chromium: 1488645, 1484918.

Points forts divers

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

Performance: correction de l'indicateur LCP parfois manquant dans l'enregistrement (1487136).
Chargements spéculatifs: correction des URL complètes des cibles dans le menu déroulant du panneau Réseau. (1471020)
Couverture :
- Correction de la couverture ligne par ligne pour le code correctement imprimé (1464974).
- Les informations de couverture ont été mises à jour lors de l'actualisation de la page. (1494457)
Console:
- Correction de la sélection de texte partielle dans les messages. (1487449)
- Correction du clignotement du menu déroulant 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 Ouverture rapide affiche désormais les méthodes privées. (1492957)
Application > Services d'arrière-plan: lors du redimensionnement, la barre d'action supérieure enveloppe le texte. (1487276)
Éléments > Styles :
- Correction de la résolution des variables CSS héritées pour les éléments positionné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 (la même chose s'affiche lorsque les lignes de Big request sont cochées) (1495735).
Abandons :
- 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

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.