Signaler un bug de navigateur

Informez les fournisseurs de navigateurs des problèmes que vous rencontrez pour améliorer leur plate-forme Web.

Signaler un bon bug n'est pas compliqué, mais demande un peu de travail. L'objectif est de faciliter l'identification du problème, de déterminer la cause racine et, surtout, de trouver un moyen de le résoudre. Les bugs qui progressent rapidement sont généralement faciles à reproduire avec un comportement attendu clair.

Vérifier qu'il s'agit d'un bug

La première étape consiste à déterminer le comportement à adopter.

Quel est le comportement correct ?

Consultez la documentation pertinente de l'API sur MDN ou essayez de trouver les spécifications associées. Ces informations peuvent vous aider à déterminer quelle API est réellement défectueuse, où elle est défectueuse et quel est le comportement attendu.

Fonctionne-t-il dans un autre navigateur ?

Le comportement différent d'un navigateur à l'autre est généralement considéré comme un problème d'interopérabilité prioritaire, en particulier lorsque le navigateur contenant le bug est l'étrange problème. Essayez d'effectuer les tests sur les dernières versions de Chrome, Firefox, Safari et Edge, éventuellement à l'aide d'un outil comme BrowserStack.

Si possible, vérifiez que la page ne se comporte pas intentionnellement différemment en raison du reniflage par le user-agent. Dans les outils pour les développeurs Chrome, essayez de définir la chaîne User-Agent sur un autre navigateur.

S'est-il interrompu dans une version récente ?

Le problème a-t-il fonctionné comme prévu auparavant, mais a-t-il cessé de fonctionner dans une version récente du navigateur ? Ces "régressions" peuvent être traitées beaucoup plus rapidement, en particulier si vous indiquez un numéro de version où cela fonctionnait et une version où cela a échoué. Des outils tels que BrowserStack peuvent faciliter la vérification des anciennes versions du navigateur, tandis que l'outil Bisect-builds (pour Chromium) permet de rechercher la modification de manière très efficace.

Si un problème est une régression et peut être reproduit, sa cause racine est généralement déterminée et corrigée rapidement.

D'autres utilisateurs rencontrent-ils le même problème ?

Si vous rencontrez des problèmes, il est fort probable que d'autres développeurs le soient également. Commencez par rechercher le bug sur Stack Overflow. Cela peut vous aider à traduire un problème abstrait en une API défectueuse spécifique et à trouver une solution de contournement à court terme jusqu'à ce que le bug soit corrigé.

A-t-il déjà été signalé ?

Une fois que vous avez une idée de la nature du bug, vérifiez s'il a déjà été signalé en effectuant une recherche dans la base de données de bugs du navigateur.

Si vous trouvez un bug existant décrivant le problème, ajoutez votre aide en ajoutant le bug, en l'ajoutant aux favoris ou en commentant le bug. De plus, sur de nombreux sites, vous pouvez vous ajouter à la liste en copie et être informé lorsque le bug change.

Si vous décidez de commenter le bug, incluez des informations sur son impact sur votre site Web. Évitez d'ajouter des commentaires de type "+1", car les outils de suivi des bugs envoient généralement un e-mail pour chaque commentaire.

Signaler le bug

Si le bug n'a pas encore été signalé, vous devez en informer le fournisseur du navigateur.

Créer un scénario de test réduit

Mozilla propose un excellent article sur la création d'un scénario de test réduit. Pour résumer, bien qu'une description du problème soit un bon début, rien ne vaut une démo associée au bug qui montre le problème. Pour augmenter les chances de progression rapide, l'exemple doit contenir le minimum de code possible nécessaire pour illustrer le problème. Un exemple de code minimal est la première chose à faire pour augmenter les chances que votre bug soit corrigé.

Voici quelques conseils pour réduire au maximum un scénario de test:

  • Téléchargez la page Web, ajoutez <base href="https://original.url"> et vérifiez que le bug existe localement. Cela peut nécessiter un serveur HTTPS actif si l'URL utilise HTTPS.
  • Testez les fichiers locaux avec les dernières versions d'un maximum de navigateurs.
  • Essayez de tout condenser dans un seul fichier.
  • Supprimez le code (en commençant par les éléments que vous jugez inutiles) jusqu'à la disparition du bug.
  • Utilisez le contrôle des versions pour enregistrer votre travail et annuler les tâches erronées.

Héberger un scénario de test réduit

Si vous recherchez un bon emplacement pour héberger votre scénario de test réduit, plusieurs options sont disponibles:

Sachez que plusieurs de ces sites affichent du contenu dans un iFrame, ce qui peut entraîner un comportement différent des fonctionnalités ou des bugs.

Soumettre votre problème

Une fois que vous avez votre scénario de test réduit, vous pouvez signaler ce bug. Accédez au site de suivi des bugs approprié et créez un problème.

Fournissez une description claire ainsi que les étapes nécessaires pour reproduire le problème

Tout d'abord, fournissez une description claire pour aider les ingénieurs à comprendre rapidement la nature du problème et aider à le catégoriser.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

Indiquez ensuite en détail la procédure à suivre pour reproduire le problème. C'est là qu'intervient votre scénario de test réduit.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

Enfin, décrivez le résultat attendu et réel.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

Pour en savoir plus, consultez les consignes de rédaction de rapports de bug sur MDN.

Bonus: ajouter une capture d'écran ou un enregistrement d'écran du problème

Bien que cela ne soit pas obligatoire, dans certains cas, il peut être utile d'ajouter une capture d'écran ou un enregistrement d'écran du problème. Cela est particulièrement utile lorsque les bugs peuvent nécessiter des étapes inhabituelles pour être reproduits. Pouvoir voir ce qui se passe dans un enregistrement d'écran ou sur une capture d'écran est souvent utile.

Inclure des détails sur l'environnement

Certains bugs ne sont reproductibles que sur certains systèmes d'exploitation ou sur des types d'écrans spécifiques (par exemple, à faible PPP ou élevé). Veillez à inclure les détails de tous les environnements de test que vous avez utilisés.

Signaler le bug

Enfin, signalez le bug. Ensuite, surveillez vos e-mails pour vérifier si vous avez reçu des réponses au bug. Généralement, pendant l'enquête et la correction du bug, les ingénieurs peuvent avoir des questions supplémentaires. S'ils ont des difficultés à reproduire le problème, ils peuvent vous contacter.