このページは Cloud Translation API によって翻訳されました。

ブラウザのバグの報告方法

ブラウザで検出された問題をブラウザベンダーに通知するがウェブプラットフォームの改善に欠かせません。

Pete LePage

Robert Nyman

優れたバグの報告は容易ではありませんが、大変な作業が必要です。目標は、生成 AI を破損箇所の特定根本原因の特定そして最も重要なこととして、いくつかあります。進展が早いバグは確認します。

バグであることを確認する

最初のステップは、「正しい」答えを見つけることです。判断できます

正しい動作はどれですか。

MDN で関連する API ドキュメントを確認するか、関連仕様をご覧ください。この情報は、どの API が実際に問題がある場所、想定される動作について記述します。

別のブラウザで機能しますか？

ブラウザによって異なる動作は、一般にブラウザによって相互運用性の問題が発生する可能性があります。特に、バグを含んだブラウザが変わってるね。Chrome、Firefox、Safari の最新バージョンでテストし、 BrowserStack などのツールを使用する場合もあります。

可能であれば、コンテンツパターンが原因で意図的にページの動作がスニッフィングしていますChrome DevTools で、User-Agent 文字列を設定してみます。別のブラウザに移動します。

最近のリリースで不具合が生じましたか？

以前は正常に機能していましたが、ブラウザの最近のリリースで機能しなくなりましたか？このような「回帰」はより迅速に対応できます。特に、API にエラーが発生しているバージョンのバージョン番号です。次のようなツール BrowserStack を使用すると、ブラウザのバージョンと bisect-builds ツール（Chromium の場合）変更の検索を非常に効率的に行うことができます。

問題が回帰であり、再現できる場合、通常、根本原因迅速に発見して修正できます

他のメンバーも同じ問題に遭遇していますか？

他のデベロッパーでも問題が発生している可能性があります。まず、Stack Overflow でバグを検索してみてください。これは、抽象的な問題を特定の破損した API に転換するのに役立つことがあります。バグが修正されるまでの短期的な回避策が見つかる場合もあります。

以前に報告したことがあるか？

バグを把握したら、次はそのバグがブラウザのバグデータベースを検索してもすでに報告されています。

Chromium ベースのブラウザ: https://crbug.com
Firefox: https://bugzilla.mozilla.org/
Safari とWebKit ベースのブラウザ: https://bugs.webkit.org/

問題を表す既存のバグが見つかった場合は、サポートを追加します。スターを付ける、お気に入りに追加、コメントするなどの操作を行えます。多くのサイトでは自分を CC リストに追加して、バグが変更されたときに更新情報を受け取ることができます。

バグにコメントする場合は、そのバグがどのように役立つかに関する情報を含めてください。影響するためです「+1」を追加しないスタイルコメントをバグトラッカーとして使用通常はコメントごとにメールを送信します

バグを報告

バグがこれまでに報告されていない場合は、ブラウザベンダーに伝える必要があります。説明します。

最小化されたテストケースを作成する

Mozilla には、最小化されたテストケースを作成する方法をご覧ください。イベントを要するに、問題の説明は素晴らしいスタートです。バグ内でリンクのデモをご覧いただき、困難です。迅速な処理の可能性を最大化するには、この例に以下を含めます。問題を再現するために最低限のコードを使用することをおすすめします最小限のコード最も確率が高いことがわかれば説明します。

テストケースを最小限にするためのヒントを以下に示します。

ウェブページをダウンロードして <base href="https://original.url"> バグがローカルに存在することを確認します。必要に応じてライブ HTTPS サーバー URL では HTTPS を使用しています。
ローカルファイルは、できるだけ多くのブラウザの最新のビルドでテストしてください。
すべてを 1 つのファイルにまとめます。
バグが発生するまでコードを削除する（不要であることがわかっているものから始める）表示されなくなります。
バージョン管理を使用して、作業内容を保存したり、間違いです

圧縮されたテストケースのホスティング

圧縮されたテストケースをホストするのに適した場所としていくつかの便利な場所があります。

なお、一部のサイトでは、コンテンツを iframe に表示しているため、機能やバグの動作が異なる場合があります。

問題を報告する

テストケースを最小化したら、バグを報告する準備は完了です。適切なバグトラッキングサイトに移動して、新しい問題を作成します。

Chromium ベースのブラウザ - https://crbug.com/new
Firefox - https://bugzilla.mozilla.org/
Safari とWebKit ベースのブラウザ - https://bugs.webkit.org/

明確な説明と、問題を再現するために必要な手順を入力してください

まず、エンジニアが何をすぐに理解できるよう、わかりやすい説明をします。特定し問題のトリアージに役立てることができます

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

次に、問題を再現するために必要な詳細な手順を提供します。このような場合に役立つのが、圧縮されたテストケースです。

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.

最後に、期待される結果と実際の結果を記述します。

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)

詳しくは、バグレポートの作成に関するガイドラインをご覧ください。ご覧ください

参考: 問題のスクリーンショットまたはスクリーンキャストを追加する

必須ではありませんが、スクリーンショットや画像を追加しておくと、スクリーンショットを撮っておきますこれは、バグやバグが再現するためにおかしな手順が必要になる場合があります。環境内で起きることをスクリーンキャストやスクリーンショットが役立つ場合がよくあります。

環境の詳細を含める

バグによっては、特定のオペレーティングシステムでのみ再現するか、特定の種類のディスプレイ（低 dpi、高 dpi など）。必ず使用したテスト環境の詳細を含めてください。

バグを送信する

最後に、バグを報告します。メールをチェックして回答が返されます。通常、調査時やバグの修正時は、エンジニアが追加の質問をしたり、問い合わせてくる場合があります。