Einen guten Browser-Programmfehler melden

Browseranbieter über Probleme zu informieren, die Sie in ihrem Browser finden, ist ein wichtiger Bestandteil der Verbesserung der Webplattform.

Pete LePage
Robert Nyman

Einen guten Fehlerbericht zu erstellen, erfordert etwas Aufwand. Ihr Ziel sollte es sein, es Browserentwicklern so einfach wie möglich zu machen, herauszufinden, was nicht funktioniert, die Ursache zu finden und vor allem eine Möglichkeit zu finden, das Problem zu beheben. Bugs, bei denen schnell Fortschritte erzielt werden, lassen sich in der Regel schnell reproduzieren und es gibt ein klares erwartetes Verhalten.

Prüfen, ob es sich um einen Fehler handelt

Der erste Schritt besteht darin, herauszufinden, wie sich die Funktion „richtig“ verhalten sollte.

Was ist das richtige Verhalten?

Sehen Sie in der relevanten API-Dokumentation auf MDN nach oder suchen Sie nach zugehörigen Spezifikationen. Anhand dieser Informationen können Sie entscheiden, welche API tatsächlich nicht funktioniert, wo sie nicht funktioniert und wie das erwartete Verhalten aussieht.

Funktioniert es in einem anderen Browser?

Verhalten, das sich zwischen Browsern unterscheidet, wird in der Regel als Interoperabilitätsproblem mit höherer Priorität eingestuft, insbesondere wenn der Browser mit dem Fehler der einzige ist, der sich anders verhält. Testen Sie mit den neuesten Versionen von Chrome, Firefox, Safari und Edge, eventuell mit einem Tool wie BrowserStack.

Prüfen Sie, ob sich die Seite aufgrund von User-Agent-Sniffing absichtlich anders verhält. Versuchen Sie, in den Chrome-Entwicklertools den User-Agent-String auf einen anderen Browser festzulegen.

Ist der Fehler in einer aktuellen Version aufgetreten?

Hat es in der Vergangenheit wie erwartet funktioniert, aber in einer aktuellen Browserversion nicht mehr? Solche Regressionen können viel schneller behoben werden, insbesondere wenn Sie eine Versionsnummer angeben, in der es funktioniert hat, und eine Version, in der es nicht funktioniert hat. Mit Tools wie BrowserStack können Sie alte Browserversionen prüfen. Verwenden Sie Tools wie das bisect-builds-Tool (für Chromium), um nach der Änderung zu suchen.

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

Haben andere Nutzer dasselbe Problem?

Wenn Sie Probleme haben, ist es sehr wahrscheinlich, dass auch andere Entwickler betroffen sind. Suchen Sie zuerst in Stack Overflow nach dem Fehler. So können Sie ein abstraktes Problem in eine bestimmte fehlerhafte API übersetzen und möglicherweise eine kurzfristige Problemumgehung finden, bis der Fehler behoben ist.

Wurde es schon einmal gemeldet?

Wenn Sie eine Vorstellung davon haben, was der Fehler ist, können Sie in der Browser-Fehlerdatenbank nachsehen, ob er bereits gemeldet wurde.

Wenn Sie einen vorhandenen Fehler finden, der das Problem beschreibt, können Sie ihn mit einem Sternchen, einem Favoriten oder einem Kommentar unterstützen. Auf vielen Websites können Sie sich selbst auf die CC-Liste setzen und erhalten dann Updates, wenn sich der Fehler ändert.

Wenn Sie den Fehler kommentieren möchten, geben Sie an, wie er sich auf Ihre Website auswirkt. Vermeiden Sie Kommentare wie „+1“, da in Bugtrackern in der Regel für jeden Kommentar E-Mails gesendet werden.

Fehler melden

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

Minimierten Testlauf erstellen

Mozilla hat einen guten Artikel zum Erstellen eines minimierten Testlaufs. Kurz gesagt: Eine Beschreibung des Problems ist ein guter Anfang, aber nichts geht über eine verlinkte Demo im Fehlerbericht, die das Problem zeigt. Damit das Problem schnell behoben werden kann, sollte das Beispiel den minimalen Code enthalten, der zur Veranschaulichung des Problems erforderlich ist. Ein minimales Codebeispiel ist das Wichtigste, was Sie tun können, um die Wahrscheinlichkeit zu erhöhen, dass Ihr Fehler behoben wird.

Hier sind 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. Wenn die URL HTTPS verwendet, ist möglicherweise ein aktiver HTTPS-Server erforderlich.
  • Testen Sie die lokalen Dateien mit den neuesten Builds so vieler Browser wie möglich.
  • Versuchen Sie, alles in einer Datei zusammenzufassen.
  • Entfernen Sie Code (beginnend mit Dingen, die Sie als unnötig erachten), bis der Fehler verschwindet.
  • Verwenden Sie die Versionsverwaltung, damit Sie Ihre Arbeit speichern und Änderungen rückgängig machen können, falls etwas schiefgeht.

Minimierten Testlauf hosten

Wenn Sie einen guten Ort für Ihren minimierten Testlauf suchen, haben Sie mehrere Möglichkeiten:

Beachten Sie, dass auf vielen dieser Websites Inhalte in einem iFrame angezeigt werden. Das kann dazu führen, dass Funktionen oder Fehler sich anders verhalten.

Problem melden

Sobald Sie den minimierten Testlauf haben, können Sie den Fehler melden. Rufen Sie die richtige Website zur Fehlerbehebung auf und erstellen Sie ein neues Problem.

Fügen Sie klare Beschreibungen und Schritte zum Reproduzieren hinzu.

Geben Sie zuerst eine klare Beschreibung an, damit die Techniker schnell verstehen, worin das Problem besteht, und es einordnen können.

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

Geben Sie als Nächstes die detaillierten Schritte an, die erforderlich sind, um das Problem zu reproduzieren. Hier kommt Ihr minimierter 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 schließlich 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 Fehlerberichten auf MDN.

Bonus: Screenshot oder Screencast des Problems hinzufügen

Es ist zwar nicht erforderlich, aber oft hilfreich, einen Screenshot oder Screencast des Problems hinzuzufügen. Das ist besonders hilfreich, wenn Fehler nach mehreren Schritten oder ungewöhnlichen Aktivitäten auftreten. Screencasts und Screenshots können Browserentwicklern oft besser zeigen, was passiert ist.

Details zur Umgebung angeben

Einige Fehler lassen sich nur auf bestimmten Betriebssystemen oder nur auf bestimmten Arten von Displays (z. B. mit niedriger oder hoher DPI) reproduzieren. Geben Sie unbedingt die Details aller verwendeten Testumgebungen an.

Fehler melden

Senden Sie den Fehlerbericht ab. Wir halten dich per E‑Mail auf dem Laufenden. Während der Untersuchung haben die Techniker in der Regel zusätzliche Fragen. Wenn sie Schwierigkeiten haben, das Problem zu reproduzieren, können sie sich an Sie wenden.