Einen guten Browser-Programmfehler melden

Zur Verbesserung der Webplattform ist es wichtig, Browseranbieter über Probleme zu informieren, die in ihrem Browser auftreten.

Pete LePage
Robert Nyman

Einen guten Fehler zu melden ist nicht schwer, erfordert jedoch ein wenig Arbeit. Ziel ist es, das Aufspüren von Problemen, das Ermitteln der Ursache und vor allem einen Weg zu finden, das Problem zu beheben. Fehler, die einen schnellen Fortschritt machen, lassen sich in der Regel leicht reproduzieren, ohne dass ein eindeutiges erwartetes Verhalten gegeben ist.

Prüfen, ob es sich um einen Programmfehler handelt

Der erste Schritt besteht darin, herauszufinden, was das „richtige“ Verhalten sein sollte.

Wie verhält sich das?

Sehen Sie in der entsprechenden API-Dokumentation auf MDN nach oder suchen Sie nach verwandten Spezifikationen. Anhand dieser Informationen können Sie entscheiden, welche API tatsächlich fehlerhaft ist, wo sie fehlerhaft ist und wie das erwartete Verhalten ist.

Funktioniert das auch in einem anderen Browser?

Unterschiedliches Verhalten zwischen Browsern wird in der Regel als Interoperabilitätsproblem höher priorisiert, insbesondere wenn der Browser, der den Fehler enthält, nicht zutreffend ist. Testen Sie die aktuellen Versionen von Chrome, Firefox, Safari und Edge, möglicherweise mit einem Tool wie BrowserStack.

Prüfen Sie nach Möglichkeit, ob sich die Seite absichtlich aufgrund des User-Agent-Sniffings verändert. Versuchen Sie, in den Chrome-Entwicklertools einen anderen Browser für den User-Agent-String festzulegen.

Gab es bei einer neuen Version Fehler?

Hat dies in der Vergangenheit erwartungsgemäß funktioniert, in einer neuen Browserversion aber Fehler? Solche "Regressionen" können viel schneller umgesetzt werden, insbesondere wenn Sie eine Versionsnummer angeben, bei der die Funktion funktioniert hat, und eine Version, in der sie fehlgeschlagen ist. Tools wie BrowserStack können das Prüfen alter Browserversionen erleichtern und das bisect-builds-Tool (für Chromium) ermöglicht eine sehr effiziente Suche nach Änderungen.

Wenn ein Problem eine Regression ist und reproduziert werden kann, lässt sich die Ursache in der Regel schnell finden und beheben.

Sehen andere das gleiche Problem?

Wenn Sie auf Probleme stoßen, ist es sehr wahrscheinlich, dass dies auch bei anderen Entwicklern der Fall ist. Versuchen Sie zunächst, auf Stack Overflow nach dem Programmfehler zu suchen. So können Sie ein abstraktes Problem in eine bestimmte fehlerhafte API umwandeln und eine kurzfristige Problemumgehung finden, bis der Fehler behoben ist.

Wurde es schon einmal gemeldet?

Sobald Sie eine Vorstellung davon haben, was der Fehler ist, sollten Sie prüfen, ob er bereits gemeldet wurde. Dazu durchsuchen Sie die Fehlerdatenbank des Browsers.

Wenn Sie auf einen vorhandenen Fehler stoßen, der das Problem beschreibt, können Sie den Fehler markieren, zu Ihren Favoriten hinzufügen oder ihn kommentieren. Auf vielen Websites kannst du dich selbst auf die CC-Liste setzen und Benachrichtigungen erhalten, wenn sich der Fehler ändert.

Wenn Sie den Fehler kommentieren möchten, machen Sie Angaben dazu, wie sich der Fehler auf Ihre Website auswirkt. Vermeiden Sie Kommentare im Stil von „+1“, da Fehler-Tracker normalerweise eine E-Mail für jeden Kommentar senden.

Fehler melden

Wenn der Fehler noch nicht gemeldet wurde, ist es an der Zeit, den Anbieter des Browsers darüber zu informieren.

Minimierten Testlauf erstellen

Mozilla bietet einen praktischen Artikel zum Erstellen eines minimierten Testfalls. Um eine lange Geschichte kurz zu machen, ist eine Beschreibung des Problems ein guter Anfang. Nichts ist besser als eine verlinkte Demo im Bug, die das Problem zeigt. Um die Chance auf einen schnellen Fortschritt zu maximieren, sollte das Beispiel den geringstmöglichen Code enthalten, der zur Darstellung des Problems erforderlich ist. Ein minimales Codebeispiel ist die wichtigste Maßnahme, die Sie tun können, um die Wahrscheinlichkeit zu erhöhen, dass der Fehler behoben wird.

Hier einige Tipps zum Minimieren eines Testlaufs:

  • Laden Sie die Webseite herunter, fügen Sie <base href="https://original.url"> hinzu und prüfen Sie, ob der Fehler lokal auftritt. Dazu ist möglicherweise ein Live-HTTPS-Server erforderlich, wenn für die URL HTTPS verwendet wird.
  • Teste die lokalen Dateien in den neuesten Builds so vieler Browser wie möglich.
  • Versuchen Sie, alles in einer Datei zusammenzufassen.
  • Entfernen Sie Code (beginnen Sie mit Dingen, von denen Sie wissen, dass sie unnötig sind), bis der Fehler verschwindet.
  • Verwenden Sie die Versionsverwaltung, um Ihre Arbeit zu speichern und Fehler rückgängig zu machen.

Reduzierten Testlauf hosten

Wenn Sie nach einem guten Ort zum Hosten Ihres komprimierten Testfalls suchen, gibt es mehrere geeignete Orte:

Beachten Sie, dass einige dieser Websites Inhalte in einem iFrame anzeigen, was zu unterschiedlichem Verhalten von Funktionen oder Fehlern führen kann.

Problem einreichen

Sobald Sie Ihren minimierten Testfall haben, können Sie den Fehler melden. Rufe die richtige Website zur Fehlerverfolgung auf und erstelle ein neues Problem.

Beschreiben Sie klar und deutlich, welche Schritte erforderlich sind, um das Problem zu reproduzieren.

Geben Sie zuerst eine klare Beschreibung an, damit das Engineering-Team schnell das Problem verstehen und leichter einordnen kann.

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

Geben Sie als Nächstes die genauen Schritte an, die erforderlich sind, um das Problem zu reproduzieren. Hier kommt der minifizierte Testlauf ins Spiel.

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.

Beschreiben Sie abschließend das erwartete und das tatsächliche Ergebnis.

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)

Weitere Informationen finden Sie in den Richtlinien zum Schreiben von Fehlerbericht auf MDN.

Bonus: Fügen Sie einen Screenshot oder einen Screencast des Problems hinzu.

Auch wenn es nicht unbedingt erforderlich ist, kann es in einigen Fällen hilfreich sein, einen Screenshot oder einen Screencast des Problems hinzuzufügen. Dies ist besonders hilfreich, wenn Fehler möglicherweise einige merkwürdige Schritte erfordern, um sie zu reproduzieren. Es kann oft hilfreich sein, zu sehen, was in einem Screencast oder auf einem Screenshot passiert.

Details zur Umgebung angeben

Einige Fehler sind nur unter bestimmten Betriebssystemen oder nur bei bestimmten Bildschirmen (z. B. niedrige dpi oder hohe dpi-Werte) reproduzierbar. Geben Sie dabei unbedingt die Details zu allen von Ihnen verwendeten Testumgebungen an.

Fehler melden

Senden Sie dann den Fehler. Achten Sie dann auf Ihre E-Mails, um nach Antworten auf den Fehler zu suchen. In der Regel können Entwickler während der Untersuchung und Behebung des Fehlers weitere Fragen haben oder sich an sie wenden, wenn sie Schwierigkeiten haben, das Problem zu reproduzieren.