Signaler aux fournisseurs de navigateurs les problèmes que vous rencontrez dans leur navigateur est essentiel pour améliorer la plate-forme Web.
Signaler un bug correct, mais cela demande un peu de travail. Votre objectif doit être de rendre la tâche aussi simple que possible pour les ingénieurs du navigateur afin qu'ils puissent trouver ce qui ne fonctionne pas, identifier la cause du problème et, surtout, trouver un moyen de le résoudre. Les bugs qui progressent rapidement ont tendance à être faciles à reproduire et à présenter un comportement attendu clair.
Vérifier qu'il s'agit bien d'un bug
La première étape consiste à déterminer quel devrait être le comportement "correct".
Quel est le comportement correct ?
Consultez la documentation de l'API appropriée sur MDN ou essayez de trouver des spécifications associées. Ces informations peuvent vous aider à déterminer quelle API est réellement défectueuse, où elle l'est et quel est le comportement attendu.
Le problème se produit-il dans un autre navigateur ?
Les comportements qui diffèrent entre les navigateurs sont généralement considérés comme des problèmes d'interopérabilité et ont une priorité plus élevée, en particulier lorsque le navigateur contenant le bug est l'exception. Essayez de tester sur les dernières versions de Chrome, Firefox, Safari et Edge, éventuellement à l'aide d'un outil tel que BrowserStack.
Si possible, vérifiez que la page ne se comporte pas intentionnellement différemment en raison de l'analyse de l'agent utilisateur. Dans les outils pour les développeurs Chrome, essayez de définir la chaîne User-Agent sur un autre navigateur.
Le problème est-il apparu dans une version récente ?
Cela fonctionnait-il comme prévu par le passé, 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 fournissez un numéro de version où elles ont fonctionné et une version où elles ont échoué. Vous pouvez utiliser des outils tels que BrowserStack pour vérifier les anciennes versions de navigateur. Utilisez des outils tels que l'outil bisect-builds (pour Chromium) pour rechercher la modification.
Si un problème est une régression et peut être reproduit, la cause peut généralement être identifiée et résolue rapidement.
D'autres utilisateurs rencontrent-ils le même problème ?
Si vous rencontrez des problèmes, il est probable que d'autres développeurs le fassent é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 vous aider à trouver une solution temporaire jusqu'à ce que le bug soit corrigé.
A-t-il déjà été signalé ?
Une fois que vous avez une idée du bug, vérifiez s'il a déjà été signalé en effectuant une recherche dans la base de données des bugs du navigateur.
- Navigateurs basés sur Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- Safari et navigateurs basés sur WebKit: https://bugs.webkit.org/
Si vous trouvez un bug existant qui décrit le problème, ajoutez votre soutien en ajoutant une étoile, en l'ajoutant à vos favoris ou en commentant le bug. Sur de nombreux sites, vous pouvez vous ajouter à la liste de copie et recevoir des informations lorsque le bug est corrigé.
Si vous décidez de commenter le bug, indiquez comment il affecte votre site Web. Évitez d'ajouter des commentaires de type "+1", car les outils de suivi des bugs envoient généralement des e-mails pour chaque commentaire.
Signaler le bug
Si le bug n'a jamais été signalé auparavant, il est temps d'en informer le fournisseur du navigateur.
Créer un scénario de test minimisé
Mozilla propose un excellent article sur la création d'un cas de test minimisé. Pour faire court, bien qu'une description du problème soit un excellent point de départ, rien ne vaut une démonstration associée au bug qui montre le problème. Pour maximiser les chances d'avancer rapidement, l'exemple doit contenir le code minimal nécessaire pour illustrer le problème. Un exemple de code minimal est la première chose que vous pouvez faire pour augmenter les chances que votre bug soit corrigé.
Voici quelques conseils pour réduire un cas 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 sur les dernières versions d'autant de navigateurs que possible.
- Essayez de condenser tout cela dans un seul fichier.
- Supprimez du code (en commençant par les éléments que vous savez inutiles) jusqu'à ce que le bug disparaisse.
- Utilisez le contrôle des versions pour pouvoir enregistrer votre travail et annuler les erreurs.
Héberger un scénario de test minifié
Si vous recherchez un bon endroit pour héberger votre cas de test minifié, plusieurs options s'offrent à vous:
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.
Signaler votre problème
Une fois que vous avez votre cas de test minimisé, vous pouvez signaler le bug. Accédez au site de suivi des bugs approprié et créez un bug.
- Navigateurs basés sur Chromium : https://crbug.com/new
- Firefox : https://bugzilla.mozilla.org/
- Safari et navigateurs basés sur WebKit : https://bugs.webkit.org/
Ajoutez des descriptions claires et des étapes à suivre pour reproduire le problème
Tout d'abord, fournissez une description claire pour aider les ingénieurs à comprendre rapidement le problème et à le classer.
When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.
Indiquez ensuite la procédure détaillée à suivre pour reproduire le problème. C'est là qu'intervient votre cas 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 le résultat 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 d'écriture de rapports de bugs sur MDN.
Bonus: Ajoutez une capture d'écran ou une vidéo du problème
Bien que cela ne soit pas obligatoire, il est souvent utile d'ajouter une capture d'écran ou une vidéo de l'erreur. Cela est particulièrement utile lorsque des bugs se produisent après plusieurs étapes ou une activité inhabituelle. Les enregistrements d'écran et les captures d'écran peuvent souvent mieux montrer ce qui s'est passé aux ingénieurs du navigateur.
Inclure des détails sur l'environnement
Certains bugs ne sont reproductibles que sur certains systèmes d'exploitation ou sur certains types d'écrans spécifiques (par exemple, à faible ou à haute résolution). Veillez à inclure les détails de tous les environnements de test que vous avez utilisés.
Envoyer le bug
Enfin, envoyez le bug. Nous vous tiendrons informé par e-mail. En règle générale, les ingénieurs peuvent avoir des questions supplémentaires au cours de l'investigation. S'il a du mal à reproduire le problème, il peut vous contacter.