Einen guten Browser-Programmfehler melden

Wenn Sie Browseranbieter auf Probleme in ihren Browsern hinweisen, tragen Sie dazu bei, die Webplattform zu verbessern.

Pete LePage
Robert Nyman

Das Erfassen eines guten Bugs erfordert etwas Arbeit. Ihr Ziel sollte es sein, es den Browserentwicklern so einfach wie möglich zu machen, herauszufinden, was kaputt ist, die Ursache zu finden und vor allem eine Möglichkeit zu finden, das Problem zu beheben. Fehler, die schnell Fortschritte machen, lassen sich in der Regel schnell reproduzieren und haben ein klares erwartetes Verhalten.

Prüfen, ob es sich um einen Fehler handelt

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

Was ist das richtige Verhalten?

Lesen Sie die relevanten API-Dokumente auf der MDN oder suchen Sie nach ähnlichen Spezifikationen. Anhand dieser Informationen können Sie feststellen, welche API tatsächlich nicht funktioniert, wo das Problem liegt und wie sie sich eigentlich verhalten sollte.

Funktioniert es 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, falsch ist. Führe Tests mit den neuesten Versionen von Chrome, Firefox, Safari und Edge durch, z. B. mit einem Tool wie BrowserStack.

Prüfen Sie nach Möglichkeit, ob sich die Seite nicht absichtlich aufgrund von User-Agent-Sniffing anders verhält. Legen Sie in den Chrome-Entwicklertools den String „User-Agent“ auf einen anderen Browser fest.

Gab es bei einer neuen Version Fehler?

Hat dies in der Vergangenheit wie erwartet funktioniert, in einer neuen Browserversion aber Fehler? Solche Rückschritte können viel schneller behoben werden, insbesondere wenn Sie eine Versionsnummer angeben, bei der es funktioniert hat, und eine Version, bei der es fehlgeschlagen ist. 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, kann die Ursache in der Regel schnell gefunden und behoben werden.

Tritt das Problem auch bei anderen auf?

Wenn Sie Probleme haben, ist die Wahrscheinlichkeit hoch, dass auch andere Entwickler betroffen sind. Versuchen Sie zuerst, 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 das Problem 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 den Favoriten hinzufügen oder kommentieren. Auf vielen Websites können Sie sich der CC-Liste hinzufügen und sich benachrichtigen lassen, 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 wie „+1“, da Bug-Tracker in der Regel E-Mails für jeden Kommentar senden.

Fehler melden

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

Minimierten Testfall erstellen

Mozilla hat einen guten Artikel zum Erstellen eines minimierten Testfalls. Kurz gesagt: Eine Beschreibung des Problems ist ein guter Anfang, aber nichts ist besser als eine verlinkte Demo im Fehlerbericht, die das Problem veranschaulicht. Um die Chance auf einen schnellen Fortschritt zu maximieren, sollte das Beispiel den geringstmöglichen Code enthalten, der zur Veranschaulichung des Problems erforderlich ist. Ein minimales Codebeispiel ist die beste Möglichkeit, die Wahrscheinlichkeit zu erhöhen, dass Ihr Fehler behoben wird.

Hier sind einige Tipps zum Minimieren eines Testfalls:

  • 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.
  • Testen Sie die lokalen Dateien mit den neuesten Builds möglichst vieler Browser.
  • Versuchen Sie, alles in einer Datei zusammenzufassen.
  • Entfernen Sie Code (beginnend mit Elementen, von denen Sie wissen, dass sie nicht erforderlich sind), bis der Fehler nicht mehr auftritt.
  • Verwenden Sie die Versionskontrolle, damit Sie Ihre Arbeit speichern und rückgängig machen können, wenn etwas schiefgeht.

Minimierten Testfall hosten

Wenn Sie nach einem geeigneten Ort zum Hosten Ihres minimierten Testfalls suchen, haben Sie mehrere Möglichkeiten:

Beachte, dass einige dieser Websites Inhalte in einem Iframe anzeigen. Dies kann dazu führen, dass Funktionen oder Fehler anders funktionieren.

Problem melden

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

Fügen Sie klare Beschreibungen und Schritte zur Reproduktion hinzu.

Geben Sie zuerst eine klare Beschreibung an, damit die Entwickler schnell verstehen können, was das Problem ist, und es priorisieren 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 der minimierte Testfall 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 Erstellen von Fehlerberichten auf MDN.

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

Es ist zwar nicht erforderlich, aber oft hilfreich, einen Screenshot oder Screencast des Problems hinzuzufügen. Dies ist besonders hilfreich, wenn Fehler nach mehreren Schritten oder ungewöhnlichen Aktivitäten auftreten. Mit Screencasts und Screenshots lässt sich oft besser demonstrieren, was passiert ist.

Details zur Umgebung angeben

Einige Fehler sind nur unter bestimmten Betriebssystemen oder nur auf bestimmten Bildschirmen (z. B. Low-DPI oder High-DPI) reproduzierbar. Geben Sie dabei unbedingt die Details zu allen von Ihnen verwendeten Testumgebungen an.

Fehler melden

Senden Sie dann den Fehler. Achten Sie auf E-Mails zu diesem Fehler. Während der Untersuchung stellen die Entwickler in der Regel zusätzliche Fragen. Wenn das Team Schwierigkeiten hat, das Problem zu reproduzieren, meldet es sich möglicherweise bei dir.