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

Sofia Emelianova
Sofia Emelianova
GitHub

Suppression progressive des cookies tiers

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

La case à cocher 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 DevTools 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 vous donne 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 de développement et accédez au panneau Privacy Sandbox. Ce panneau peut être masqué derrière le bouton déroulant Plus d'onglets. en haut.
  4. 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 ressources suivantes:

  • Guide du 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 savoir comment analyser des scénarios courants, y compris les données analytiques, l'e-commerce, les services d'authentification unique, le contenu intégré, etc., consultez les exemples de démonstration dans la section Scénarios d'analyse.

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

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

Modèle 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. Settings > Ignore List (Paramètres > Liste d'ignorer). Pour vous aider à vous concentrer uniquement sur votre code, le débogueur ignore 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.

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 si elles passent par du code non ignoré.

Lorsque vous déboguez du code avec Case à cocher. Suspendre en cas d'exception détectée cochée, le débogueur arrête désormais l'exécution en cas d'exception détectée, à la fois synchrone et asynchrone, dans les cas suivants:

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

Suspendre sur une exception détectée qui a traversé du code non ignoré.

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

  1. Ouvrez DevTools > Sources, ajoutez le dossier hidden à la liste d'éléments à ignorer, puis cochez Case à cocher. Suspendre en cas d'exception détectée.
  2. Sur la page, sous la liste des scénarios "Interceptés", cliquez sur les différents boutons et observez l'exécution mise en pause 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.

x_google_ignoreList a été renommé ignoreList dans les cartes sources.

La spécification des cartes sources a adopté le champ ignoreList au lieu de x_google_ignoreList. DevTools est désormais compatible avec le nouveau nom, avec un retour en arrière pour l'ancien. 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 source, consultez les ressources suivantes:

Nouveau bouton d'activation/de 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 le basculement du mode de saisie en action.

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.

La comparaison avant/après montre documentURL à côté du nœud #document.

Problème Chromium: 1376976.

Stratégie Content Security Policy en vigueur 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 > Cadres, sélectionnez un cadre, puis faites défiler la page jusqu'à la section Content Security Policy (CSP) (Règles de sécurité du contenu).

Section &quot;Content Security Policy&quot; (Stratégie de sécurité du contenu) de l&#39;onglet &quot;Application&quot;.

Problème Chromium: 1424714.

Amélioration du débogage des animations

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

  • Cliquez n'importe où dans 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 de lecture, sinon elle s'arrête. Auparavant, vous deviez le faire glisser.
  • Redimensionnez la colonne "Nom" pour afficher le nom complet 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

Le test Case à cocher. Afficher un avertissement concernant l'auto-XSS lors du collage de code a été activé par défaut. L'auto-XSS (auto-script intersites) est une attaque qui vous incite à coller du code malveillant dans DevTools 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 de DevTools et que vous essayez de coller du code, le panneau Sources affiche désormais la boîte de dialogue Avez-vous confiance en 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'affiche plus.

Boîte de dialogue &quot;Faites-vous confiance à ce code ?&quot; lorsque vous collez du code dans &quot;Sources&quot;.

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 des écouteurs d'événements, en plus de suspendre l'exécution de cet événement sur votre site Web, le débogueur se met é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 de stockage partagé.

Le débogueur est mis en pause lorsqu&#39;un service worker appelle la fonction de délai avant expiration.

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 accédez au panneau Média, qui vous permet de déboguer ces éléments.

Nouveau badge multimédia pour les balises audio et vidéo activé.

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

Problème Chromium: 1448214.

Le préchargement a été 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 un chargement de page quasi instantané en fonction de règles de spéculation que vous pouvez définir pour que votre site Web prégénère et précharge la plupart des pages vers lesquelles vous naviguez.

Avant et après le changement de nom 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 comprend 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, la jauge de score de performances inclut des informations plus détaillées sur l'impact de chaque métrique sur le score.

Avant et après la refonte des performances

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é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) 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 forts

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 :
    • Correction de la couverture ligne par ligne pour le code mis en forme (1464974).
    • Les informations sur la couverture sont désormais mises à jour lors de l'actualisation de la page (1494457).
  • Console :
    • Correction de la sélection partielle du texte dans les messages (1487449).
    • Correction du clignotement du menu déroulant de 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é using TypeScript (1490515).
  • Le menu Ouvrir rapidement affiche désormais les méthodes privées (1492957).
  • Application > Services d'arrière-plan: le texte est désormais renvoyé automatiquement dans la barre d'action supérieure lors du redimensionnement (1487276).
  • Éléments > Styles :
    • Correction de la résolution des variables CSS héritées pour les éléments à emplacements (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 une info-bulle contenant des informations sur la priorité initiale (la même information s'affiche lorsque l'option Grandes lignes de requête est cochée) (1495735).
  • Abandons :
    • Le paramètre Format de couleur, qui était désactivé dans les versions précédentes, a été supprimé.
    • L'option "Supprimer tous les forçages" dans Sources a été supprimée en raison de son faible utilisation après la simplification des forçages (1473681).

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.

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.