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, das Problem zu finden, die Ursache zu ermitteln und vor allem eine Lösung zu finden. 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?

Sehen Sie sich die relevanten API-Dokumente auf der MDN an 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?

Ein Verhalten, das sich zwischen Browsern unterscheidet, wird in der Regel als Interkompatibilitätsproblem priorisiert, insbesondere wenn der Browser mit dem Fehler ein Ausreißer 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.

Ist das Problem in einer der letzten Versionen aufgetreten?

Hat das in der Vergangenheit wie erwartet funktioniert, aber in einer aktuellen Browserversion nicht mehr? 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 es sich bei einem Problem um eine Regression handelt und es reproduzierbar ist, 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. Suchen Sie zuerst in Stack Overflow nach dem Fehler. 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 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 Stern markieren, zu Ihren 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 zeigt. Um die Chancen auf einen schnellen Fortschritt zu maximieren, sollte das Beispiel möglichst wenig Code enthalten, der zum Veranschaulichen 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 aktiver HTTPS-Server erforderlich, wenn die URL HTTPS verwendet.
  • 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 auf einigen dieser Websites Inhalte in einem iFrame angezeigt werden. 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. Rufen Sie die richtige Website für die Fehlerverfolgung auf und erstellen Sie 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. Das 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.

Umgebungsdetails angeben

Einige Fehler können nur auf bestimmten Betriebssystemen oder nur auf bestimmten Bildschirmen reproduziert werden (z. B. mit niedriger oder hoher Auflösung). Geben Sie unbedingt die Details aller verwendeten Testumgebungen an.

Fehler melden

Reichen Sie den Fehlerbericht ein. Behalten Sie Ihren Posteingang im Auge, um auf dem Laufenden zu bleiben. 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.