17 Dec 2012

ブラウザのバグを見つけたときにやること

five browsers logo paulirish/browser-logos · GitHub

  1. バグを見つける
    • 表示系のものならスクリーンショットをとっておく
  2. すでに報告されていないか調べる
    • ブラウザごとのバグトラッカーで検索してみる
    • サポートフォーラムなどコミュニティに相談してみる
  3. ブラウザの種類とバージョンの絞込み
    • 他のブラウザでは発生するか. 他のバージョンでも発生するか (stable を使っているなら beta や nightly でも見てみる等)
  4. テストケースの最小化
    • バグを再現させる最小のテストケースを作ります
    • 今回出会ったのは表示系のバグだったので, html / css を削りながら現象を再現させていき, 同じ現象が起こる最小の html を作りました
  5. バグの報告先とフォーマットの確認
    • ブラウザごとにバグ報告のガイドラインがあるはずなので, それを読めばどのように報告すればよいかわかるはずです
    • chromium は選択肢を選ぶといい感じに報告してくれるウィザードを用意していたりします
    • chrome / safari のバグの場合, どちらか特有のものなのか or いずれも再現するかに応じて, 報告先が chromium / webkit と変わります.
  6. レポートを書く
    • バグを発生させる操作手順
    • 発生する事象
    • 期待している動作
    • 上記を再現する最小のテストケース
    • 必要に応じてスクリーンショット
    • その他ガイドラインに応じて
  7. 報告する

主要ブラウザの報告ガイドラインと報告先

各ブラウザのリリースチャンネル

普段から開発チャンネルを使ってデバッグに協力するのはよい習慣だと思います. 異なるバージョンの共存はこちらが参考になります (Mac の場合)

MacをJavaScriptの開発環境にするメモ - os0x.blog

今回報告したバグ

Bug 102402 – REGRESSION (Subpixel layout): Gray vertical lines appear when moving insertion point to right on Mac