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

Suppression progressive des cookies tiers

Votre site utilise peut-être des cookies tiers. Le moment est venu de prendre des mesures, car ils seront bientôt abandonnés. Pour savoir comment gérer les cookies concernés, consultez Préparer l'arrêt des cookies tiers.

La case à cocher Inclure les problèmes des cookies tiers de est activée par défaut pour tous les utilisateurs de Chrome. L'onglet Problèmes vous avertit désormais des cookies qui seront affectés par l'arrêt et l'abandon progressif des cookies tiers. Vous pouvez décocher la case à tout moment pour ne plus voir ces 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. La dernière version préliminaire 0.3.2 est disponible. Cet outil vous permet de comprendre comment votre site Web utilise les cookies et vous fournit des conseils sur les nouvelles API Chrome axées sur la protection de la confidentialité.

Pour analyser vos cookies :

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

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

• How To de PSAT
• Pour prédire ce qui se passera probablement une fois l'arrêt effectif, configurez un environnement d'évaluation.
• Pour identifier les aspects concernés, consultez Actions d'analyse générales.
• Pour savoir comment analyser des scénarios courants, y compris les services d'analyse, d'e-commerce, SSO, de contenu intégré et plus encore, consultez les exemples de démonstration dans Scénarios d'analyse.

Consultez également les conseils sur le signalement des problèmes.

Liste améliorée des éléments à ignorer

Modèle d'exclusion par défaut pour node_modules

Cette version permet d'utiliser l'expression régulière par défaut comme règle d'exclusion personnalisée dans Paramètres > Liste des éléments à ignorer. Pour vous aider à vous concentrer uniquement sur votre code, le 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.

Problème Chromium : 1496301.

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

Lorsque vous déboguez du code avec l'option Mettre en pause sur les exceptions interceptées cochée, le Débogueur arrête désormais l'exécution sur les exceptions interceptées suivantes, qu'elles soient synchrones ou asynchrones :

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

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

1. Ouvrez les outils de développement > Sources, ajoutez le dossier hidden à la liste des éléments à ignorer, puis cochez Mettre en pause sur les exceptions détectées .
2. Sur la page, sous la liste des scénarios "Détecté", cliquez sur les différents boutons et voyez l'exécution se mettre en pause dans les cas mentionnés.

Pour mettre en pause l'exécution sur les exceptions interceptées et/ou non interceptées (lorsqu'elles sont cochées) dans les appels asynchrones, le Debugger recherche les gestionnaires de rejet dans les promesses. À partir de cette version, le 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.

x_google_ignoreList renommé 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 sont désormais compatibles avec le nouveau nom, avec un nom 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 le code minimisé diffusé par votre site Web.

Pour en savoir plus sur les mappages source, consultez les ressources suivantes :

• Que sont les cartes sources ?
• Déboguer votre code d'origine au lieu de celui déployé avec des cartes sources

Nouveau bouton bascule 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 à cette cible réseau via chrome://inspect/#devices.

Regardez la vidéo pour voir comment basculer entre les modes de saisie.

Problème Chromium : 1410433.

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

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

Problème Chromium : 1376976.

Stratégie 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 frame et faites défiler la page jusqu'à la section Content Security Policy (CSP).

Problème Chromium : 1424714.

Débogage des animations amélioré

Dans l'onglet Animations, vous pouvez désormais :

• Cliquez n'importe où sur l'en-tête de la timeline pour définir la tête de lecture. L'animation continue de s'exécuter si elle était déjà en cours, et s'arrête dans le cas contraire. Auparavant, vous deviez le faire glisser.
• Redimensionnez la colonne "Nom" pour afficher les noms complets des animations.

Problèmes Chromium : 1492460, 1489721.

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

L'expérience Afficher un avertissement concernant le self-XSS lors du collage de code  a été activée par défaut. Le script intersites (XSS) auto-injecté est une attaque qui vous incite à coller du code malveillant dans les outils de développement. Il 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 désormais un avertissement similaire. Ne collez que 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 le collage autorisé, l'avertissement ne s'affichera plus jamais.

Problème Chromium : 345205.

Points d'arrêt de l'écouteur d'événements dans les workers Web et les worklets

Lorsque vous définissez un point d'arrêt d'événement dans Sources > Points d'arrêt du détecteur d'événements, en plus de mettre en pause cet événement sur votre site Web, le Débogueur se met désormais également en pause lorsque l'événement correspondant se produit dans un worker Web ou un worklet de n'importe quel type, y compris le worklet Shared Storage.

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 Média pour que vous puissiez déboguer ces éléments.

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

Problème Chromium : 1448214.

Le préchargement est renommé "chargement spéculatif"

Pour éviter de surutiliser 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 un chargement de page quasi instantané basé sur des règles de spéculation que vous pouvez définir pour que votre site Web précharge et récupère les pages les plus consultées.

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 "Performances". Les insights sur les performances sont désormais notés et classés par ordre de priorité en fonction de leur impact estimé sur les métriques de performances. De plus, le graphique du score de performances inclut des informations plus détaillées sur l'impact de chaque métrique sur le score.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problèmes Chromium : 772558.

Améliorations de l'accessibilité

Cette version présente les améliorations d'accessibilité suivantes :

• Les lecteurs d'écran annoncent désormais l'état (coché ou non coché) 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.

Autres points importants

Voici quelques corrections et améliorations importantes apportées à cette version :

• Performances : 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 mis en forme (1464974).
  • Les informations sur la couverture sont désormais actualisées lorsque la page est rechargée (1494457).
• Console :
  • Correction de la sélection partielle de texte dans les messages (1487449).
  • Correction du scintillement du menu déroulant de saisie semi-automatique (1487453).
  • Prise en charge des parenthèses dans les chemins de pile et les URL des traces de pile (1473926).
• Sources : prise en charge de la mise en surbrillance syntaxique du mot clé TypeScript using (1490515).
• Le menu Ouvrir rapidement affiche désormais les méthodes privées (1492957).
• Application > Services en arrière-plan : la barre d'action supérieure renvoie désormais le texte à la ligne lors du redimensionnement (1487276).
• Éléments > Styles :
  • Correction de la résolution des variables CSS héritées pour les éléments insérés (1492162).
  • Lorsque vous désactivez une propriété CSS, ses commentaires sont désormais supprimés pour corriger les erreurs de syntaxe (1101224).
• Réseau : la colonne Priorité affiche désormais un info-bulle contenant des informations sur la priorité initiale (les mêmes que celles affichées lorsque l'option Lignes de demandes volumineuses est cochée) (1495735).
• Obsolescences :
  • Le paramètre Format de couleur a été désactivé dans les versions précédentes et est désormais supprimé.
  • L'option "Supprimer toutes les substitutions" de Sources a été supprimée, car elle était peu utilisée après la simplification des substitutions (1473681).

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 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 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 de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés des outils pour les développeurs.