Comment nous avons créé l'onglet "Problèmes" des outils pour les développeurs Chrome

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider
X

Au dernier trimestre 2019, l'équipe des outils pour les développeurs Chrome a commencé à améliorer l'expérience des développeurs dans les outils pour les développeurs concernant les cookies. Cela était particulièrement important, car Google Chrome et d'autres navigateurs avaient commencé à modifier leur comportement par défaut concernant les cookies.

Lorsque nous recherchions les outils que DevTools propose déjà, nous nous sommes souvent retrouvés dans la situation suivante:

Problèmes dans le panneau "Console"

😰 La console était remplie d'avertissements et de messages d'erreur, qui contenaient des explications plutôt techniques et parfois des liens vers chromestatus.com. Tous les messages semblaient à peu près aussi importants, ce qui rendait difficile de déterminer quels problèmes traiter en premier. Plus important encore, le texte ne renvoyait pas vers des informations supplémentaires dans DevTools, ce qui rendait difficile de comprendre ce qui s'était passé. Enfin, les messages laissaient souvent au développeur Web le soin de résoudre le problème ou même de se renseigner sur le contexte technique.

Si vous utilisez également la console pour les messages de votre propre application, vous aurez parfois du mal à les trouver parmi tous les messages du navigateur.

Les processus automatisés ont aussi du mal à interagir avec les messages de la console. Par exemple, les développeurs peuvent utiliser Chrome sans interface utilisateur et Puppeteer dans un scénario d'intégration/déploiement continus. Comme les messages de console ne sont que des chaînes, les développeurs doivent écrire des expressions régulières ou un autre analyseur pour extraire des informations exploitables.

La solution: des rapports structurés et exploitables sur les problèmes

Afin de trouver une meilleure solution aux problèmes que nous avons découverts, nous avons commencé par réfléchir aux exigences et les avons rassemblées dans un document de conception.

Notre objectif est de présenter les problèmes de manière à expliquer clairement le problème et comment le résoudre. Au cours de notre processus de conception, nous avons réalisé que chaque problème devait contenir les quatre éléments suivants:

  • Titre
  • Description
  • Liens vers les ressources concernées dans DevTools
  • et un lien vers des conseils supplémentaires

Le titre doit être court et précis pour aider les développeurs à comprendre le problème principal et indiquer souvent déjà la solution. Par exemple, un problème de cookie s'affiche désormais simplement comme suit:

Marquer les cookies intersites comme sécurisés pour permettre de les définir dans des contextes intersites

Chaque problème est associé à une description plus détaillée qui explique ce qui s'est passé, fournit des conseils pratiques pour le résoudre et propose des liens vers d'autres panneaux dans DevTools pour comprendre le problème dans son contexte. Nous fournissons également des liens vers des articles détaillés sur web.dev pour permettre aux développeurs Web d'en savoir plus sur le sujet.

La section Ressources concernées est importante pour chaque problème. Elle contient des liens vers d'autres parties de DevTools et permet d'effectuer des recherches plus approfondies. Pour l'exemple de problème de cookie, une liste des requêtes réseau ayant déclenché le problème devrait s'afficher. Si vous cliquez sur la requête, vous êtes redirigé directement vers le panneau "Network" (Réseau). Nous espérons que cette fonctionnalité sera non seulement pratique, mais aussi qu'elle vous aidera à identifier les panneaux et les outils de DevTools que vous pouvez utiliser pour déboguer un certain type de problème.

À long terme, nous imaginons l'évolution suivante de l'interaction des développeurs avec l'onglet "Problèmes" :

  • Lorsqu'un développeur Web rencontrait un problème particulier pour la première fois, il lisait l'article pour le comprendre en détail.
  • Lorsque vous rencontrerez le problème pour la deuxième fois, nous espérons que sa description permettra au développeur de mieux comprendre le problème, et lui permettra de l'examiner immédiatement et de prendre les mesures nécessaires pour le résoudre.
  • Après avoir rencontré un problème plusieurs fois, nous espérons que le titre du problème suffira au développeur pour identifier le type de problème.

Un autre aspect important que nous souhaitions améliorer était l'agrégation. Par exemple, si un même cookie a causé le même problème plusieurs fois, nous ne voulions le signaler qu'une seule fois. En plus de réduire considérablement le nombre de messages, cette méthode permet souvent d'identifier plus rapidement l'origine d'un problème.

Problèmes agrégés

L'implémentation

L'équipe a commencé à réfléchir à la façon d'implémenter la nouvelle fonctionnalité en tenant compte de ces exigences. Les projets pour les outils pour les développeurs Chrome couvrent généralement trois domaines différents:

L'implémentation comprenait alors trois tâches:

  • Dans Chromium, nous avons dû identifier les composants qui contiennent les informations que nous souhaitons faire apparaître et les rendre accessibles via le protocole DevTools, sans compromettre la vitesse ni la sécurité.
  • Nous avons ensuite dû concevoir le protocole Chrome DevTools (CDP) pour définir l'API qui expose les informations aux clients, tels que l'interface frontale DevTools.
  • Enfin, nous avons dû implémenter un composant dans le frontend DevTools qui demande les informations au navigateur via le CDP et les affiche dans une UI appropriée afin que les développeurs puissent facilement les interpréter et interagir avec elles.

Côté navigateur, nous avons d'abord examiné la façon dont les messages de console sont gérés, car leur comportement est très semblable à ce que nous avions en tête pour les problèmes. CodeSearch est généralement un bon point de départ pour ce type d'exploration. Il vous permet de rechercher et d'explorer l'intégralité du code source du projet Chromium en ligne. De cette façon, nous avons appris à implémenter les messages de la console et avons pu élaborer une méthode parallèle, mais plus structurée, autour des exigences que nous avons recueillies pour ces problèmes.

Le travail ici est particulièrement difficile en raison de toutes les implications de sécurité que nous devons toujours garder à l'esprit. Le projet Chromium s'efforce de séparer les éléments en différents processus et de ne les faire communiquer que via des canaux de communication contrôlés afin d'éviter les fuites d'informations. Les problèmes peuvent contenir des informations sensibles. Nous devons donc veiller à ne pas les envoyer à une partie du navigateur qui ne devrait pas en avoir connaissance.

Dans l'interface utilisateur de DevTools

DevTools est une application Web écrite en JavaScript et en CSS. Elle ressemble beaucoup à de nombreuses autres applications Web, à l'exception qu'elle existe depuis plus de 10 ans. Bien entendu, son backend est essentiellement un canal de communication direct avec le navigateur: le protocole Chrome DevTools.

Pour l'onglet "Problèmes", nous avons d'abord pensé aux histoires d'utilisateurs et à ce que les développeurs devraient faire pour résoudre un problème. Nos idées ont principalement évolué autour de l'idée que l'onglet "Problèmes" devait être le point de départ central des investigations, qui redirigeaient les utilisateurs vers les panneaux fournissant des informations plus détaillées. Nous avons décidé de placer l'onglet "Problèmes" avec les autres onglets en bas de DevTools afin qu'il puisse rester ouvert pendant qu'un développeur interagit avec un autre composant DevTools, tel que le panneau "Réseau" ou "Application".

Notre concepteur UX a compris ce que nous voulions et a prototypé les propositions initiales suivantes:

Prototypes

Après de nombreuses discussions sur la meilleure solution, nous avons commencé à implémenter la conception et à réitérer nos décisions afin d'arriver progressivement à l'apparence de l'onglet "Problèmes" aujourd'hui.

Un autre facteur très important était la visibilité de l'onglet "Problèmes". Auparavant, de nombreuses fonctionnalités intéressantes de DevTools n'étaient pas visibles sans que le développeur sache précisément quoi rechercher. Pour l'onglet "Problèmes", nous avons décidé de mettre en évidence les problèmes dans plusieurs domaines différents afin de nous assurer que les développeurs ne manqueraient pas les problèmes importants.

Nous avons décidé d'ajouter une notification au panneau de la console, car certains messages de la console sont désormais supprimés au profit des problèmes. Nous avons également ajouté une icône au compteur des avertissements et des erreurs en haut à droite de la fenêtre des outils de développement.

Notification de problème

Enfin, l'onglet "Problèmes" renvoie non seulement vers d'autres panneaux DevTools, mais les ressources associées à un problème renvoient également vers l'onglet "Problèmes".

Autres sujets

Dans le protocole

La communication entre le frontend et le backend s'effectue via un protocole appelé protocole Chrome DevTools (CDP). Le CDP peut être considéré comme le backend de l'application Web qu'est Chrome DevTools. Le CDP est subdivisé en plusieurs domaines, et chaque domaine contient un certain nombre de commandes et d'événements.

Pour l'onglet "Problèmes", nous avons décidé d'ajouter un nouvel événement au domaine "Audits" qui se déclenche chaque fois qu'un nouveau problème est détecté. Pour nous assurer que nous pouvons également signaler les problèmes qui surviennent lorsque DevTools n'est pas encore ouvert, le domaine "Audits" stocke les problèmes les plus récents et les distribue dès que DevTools se connecte. Les outils de développement collectent ensuite tous ces problèmes et les regroupent.

La CDP permet également à d'autres clients de protocole, tels que Puppeteer, de recevoir et de traiter des problèmes. Nous espérons que les informations structurées sur les problèmes envoyées via le CDP permettront et simplifieront l'intégration dans l'infrastructure d'intégration continue existante. De cette façon, les problèmes peuvent être détectés et résolus avant même le déploiement de la page.

Futur

Tout d'abord, de nombreux messages doivent être déplacés de la console vers l'onglet "Problèmes". Cela prendra un certain temps, car nous souhaitons fournir une documentation claire et pratique pour chaque nouveau problème que nous ajoutons. Nous espérons qu'à l'avenir, les développeurs chercheront à résoudre les problèmes dans l'onglet "Problèmes" plutôt que dans la console.

Nous réfléchissons également à la manière d'intégrer les problèmes provenant d'autres sources que le backend Chromium dans l'onglet "Problèmes".

Nous cherchons à organiser l'onglet "Problèmes" et à améliorer son utilisation. La recherche, le filtrage et une meilleure agrégation figurent sur notre liste pour cette année. Pour structurer le nombre croissant de problèmes signalés, nous introduisons actuellement des catégories de problèmes qui, par exemple, permettront de n'afficher que les problèmes concernant des abandons à venir. Nous envisageons également d'ajouter une fonctionnalité de répétition, que les développeurs pourront utiliser pour masquer temporairement les problèmes.

Pour que les problèmes restent exploitables, nous souhaitons faciliter la découverte de la partie d'une page qui a déclenché un problème. Plus précisément, nous réfléchissons à des moyens de distinguer et de filtrer les problèmes qui proviennent réellement de votre page (c'est-à-dire des problèmes propriétaires) de ceux qui sont déclenchés par des ressources que vous intégrez, mais qui ne sont pas directement sous votre contrôle (comme un réseau publicitaire). Dans un premier temps, il sera possible de masquer les problèmes liés aux cookies tiers dans Chrome 86.

Si vous avez des suggestions pour améliorer l'onglet "Problèmes", n'hésitez pas à nous en faire part en signalant un bug.

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.