ブラウザで見つかった問題をブラウザ ベンダーに伝えることは、ウェブ プラットフォームを改善するうえで不可欠です。
適切なバグを報告するには、少し手間がかかります。ブラウザ エンジニアが、不具合をできるだけ簡単に見つけ、根本原因を突き止め、最も重要なこととして、修正方法を見つけられるようにすることが目標です。迅速に解決されるバグは、再現が容易で、期待される動作が明確な傾向があります。
バグであることを確認する
最初のステップは、「正しい」動作がどのようなものであるかを把握することです。
正しい動作はどのようなものですか？
MDN で関連する API ドキュメントを確認するか、関連する仕様を探します。この情報は、実際に破損している API、破損している場所、想定される動作を判断するのに役立ちます。
別のブラウザでは動作しますか？
ブラウザ間で異なる動作は、一般的に相互運用性の問題として優先度が高くなります。特に、バグを含むブラウザが他と異なる場合は、優先度が高くなります。BrowserStack などのツールを使用して、Chrome、Firefox、Safari、Edge の最新バージョンでテストしてみてください。
可能であれば、ユーザー エージェント スニッフィングによってページが意図的に異なる動作をしていないことを確認します。Chrome DevTools で、User-Agent 文字列を別のブラウザに設定してみます。
最近のリリースで問題が発生したか？
以前は期待どおりに動作していたが、最近のブラウザ リリースで動作しなくなった。 このような回帰は、特に正常に動作したバージョン番号と失敗したバージョン番号を指定すると、より迅速に対応できます。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">を追加して、バグがローカルに存在することを確認します。URL で HTTPS が使用されている場合は、ライブ 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 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)
詳細については、MDN のバグレポート作成ガイドラインをご覧ください。
ボーナス: 問題のスクリーンショットまたはスクリーンキャストを追加する
必須ではありませんが、問題のスクリーンショットやスクリーンキャストを追加すると、多くの場合、問題の解決に役立ちます。これは、複数のステップや通常とは異なるアクティビティの後にバグが発生した場合に特に役立ちます。スクリーンキャストやスクリーンショットは、ブラウザ エンジニアに何が起こったかをより明確に示すことができます。
環境の詳細を含める
バグによっては、特定のオペレーティング システムでのみ、または特定の種類のディスプレイ（低 DPI や高 DPI など）でのみ再現可能なものがあります。使用したテスト環境の詳細を必ず含めてください。
バグを送信する
最後に、バグを送信します。バグに関する返信が届いていないか、定期的にメールをご確認ください。 通常、調査中にエンジニアから追加の質問を受けることがあります。問題の再現が困難な場合は、連絡が来ることがあります。