Problèmes: identifiez et corrigez les problèmes

Sam Dutton

Sofia Emelianova

Le panneau Issues (Problèmes) des outils pour les développeurs Chrome réduit la fatigue et l'encombrement des notifications de la console. Utilisez-le pour trouver des solutions aux problèmes détectés par le navigateur, tels que les problèmes liés aux cookies et au contenu mixte.

Remarque :Le panneau Issues (Problèmes) continue d'ajouter de nouveaux types de problèmes.

À l'heure actuelle, le panneau Issues (Problèmes) prend en charge les éléments suivants:

• Problèmes liés aux cookies
• Contenu mixte
• Problèmes COEP
• Erreurs CORS
• Problèmes liés au mode "quirks"
• (Aperçu) Problèmes de faible contraste
• Problèmes liés à l'activité Web sécurisée
• Problèmes de chargement de la feuille de style
• Règles CSS @property non valides
• Non-respect de la Content Security Policy
• Problèmes liés aux attributs de la saisie semi-automatique

Les futures versions de Chrome prendront en charge d'autres types de problèmes.

Ouvrir le panneau "Problèmes"

1. Consultez une page présentant des problèmes à résoudre, par exemple samesite-sandbox.glitch.me.
2. Accédez aux outils de développement.

3. Cliquez sur le bouton Problèmes en cours à côté de Paramètres dans l'angle droit de la barre d'action en haut de la page. Selon la gravité du problème, le bouton peut être associé à une rouge, un jaune ou une icône bleue.

   

   Vous pouvez également sélectionner Problèmes dans le menu Plus d'outils .

   

4. Une fois dans le panneau Issues (Problèmes), vous pouvez actualiser la page pour détecter encore plus de problèmes, mais cette fois-ci au moment du chargement de la page.

   

La console peut également afficher les problèmes signalés par le navigateur. Toutefois, vous remarquerez que ces problèmes (comme l'avertissement lié aux cookies dans la capture d'écran ci-dessous) sont difficiles à comprendre. La marche à suivre pour résoudre le problème n'est pas claire.

En revanche, le panneau Problèmes vous fournit des insights exploitables.

Afficher les éléments dans le panneau "Problèmes"

Le panneau Issues (Problèmes) présente les avertissements du navigateur de manière structurée, agrégée et actionnable.

1. Cliquez sur un élément dans le panneau Issues (Problèmes) pour développer le problème et obtenir des conseils pour le résoudre et rechercher les ressources concernées.

   

   Chaque élément comporte quatre éléments:

   • Un titre décrivant le problème.
   • Description fournissant le contexte et la solution
   • Une section RESSOURCES AFFECTÉES qui renvoie vers les ressources présentes dans le contexte approprié des outils de développement, telles que Network, Sources, Elements et d'autres panneaux.
   • Liens vers des conseils supplémentaires

2. Cliquez sur les éléments dans RESSOURCES CONCERNÉES pour afficher les problèmes en contexte.

Regrouper les problèmes par genre

Remarque:Cette fonctionnalité en preview est désactivée par défaut. Pour l'activer, accédez à Paramètres > Tests > Autoriser le regroupement et le masquage des problèmes par type de problème.

Le panneau Issues (Problèmes) compte le nombre de ressources concernées par chaque problème et l'affiche à côté de leur titre. Vous pouvez également classer les problèmes en fonction de leur gravité dans trois types de groupes:

• Erreurs de page signalées par Chrome.
• Modifications destructives, telles que les abandons.
• Améliorations suggérées par les outils de développement.

Pour regrouper les problèmes, cochez la case Group by kind (Regrouper par genre) dans la barre d'action en haut du panneau Issues (Problèmes).

Inclure les problèmes tiers

Le panneau Problèmes affiche par défaut les problèmes de cookies tiers.

Vous trouverez les problèmes liés aux cookies tiers dans la section RESSOURCES CONCERNÉES sans lien.

Pour masquer ces problèmes, désélectionnez Inclure les problèmes liés aux cookies tiers dans la barre d'action en haut du panneau Problèmes.

Masquer les problèmes

Pour masquer un problème, sélectionnez Masquer les problèmes similaires dans le menu à trois points à côté du problème.

Pour consulter la liste des problèmes masqués, faites défiler la page jusqu'à la section Problèmes masqués, puis développez-la.

Pour afficher tous les problèmes, cliquez sur Tout afficher. Pour afficher un problème spécifique, sélectionnez Afficher les problèmes similaires dans le menu à trois points à côté du problème.

De plus, lorsque le regroupement est activé, vous pouvez masquer des groupes entiers de problèmes à l'aide du même menu à trois points situé à côté d'un groupe.

Afficher les problèmes en contexte

Pour analyser un problème :

1. Dans la section RESSOURCES CONCERNÉES, cliquez sur le lien d'une ressource pour afficher l'élément dans le contexte approprié dans les outils de développement. Dans cet exemple, cliquez sur samesite-sandbox.glitch.me pour afficher les cookies associés à cette requête. Le lien vous redirige vers le panneau Network (Réseau).

   

2. Faites défiler la page pour afficher l'élément présentant un problème. Dans ce cas, il s'agit du cookie ck02. Pointez sur l'icône d'informations à droite pour afficher le problème et savoir comment le résoudre.