Google Chromeのバグ修正に初めて貢献した体験の共有

• Chromium/Google Chromeウェブブラウザのバグを初めて修正し、大規模なオープンソースプロジェクトに貢献した。
• これまでのオープンソース作業とは大きく異なる、独特な体験だった。
• この過程を通じて、同様の作業に挑戦しようとする開発者の助けになるよう、全体の流れを記録した。

バグ

• 修正したバグは、Chromium Devtoolsと、メインスレッド外で実行されるAudioWorkletのようなworkletのネットワークリクエストとの統合に関する問題だった。
• Workletが作成したネットワークリクエストが、Devtoolsのネットワークタブにまったく表示されなかった。
• "Disable Cache"オプションが無視され、開発中に古いコードがキャッシュから取り除かれなかった。
• この問題はいくつかのプロジェクトで継続的に発生しており、少なくとも3件のバグ報告と一致していた。
• 最小限の再現手順は簡単で、キャッシュヘッダーが設定されたスクリプトを使ってAudioWorkletProcessorを生成し、ページを再読み込みすることで問題を再現できた。

Chromiumコードの取得とビルド

• バグを実際に修正するための最初のステップは、Chromiumをゼロからビルドすることだった。
• 幸い、主要なOS向けのビルド方法について詳細なドキュメントが用意されていた。
• 高性能なコンピュータを使ったが、最初のビルドには45分以上かかり、RAM使用量は50GB以上、ディスク容量も100GB以上必要だった。
• 増分ビルドは10秒以内で素早く完了した。
• ビルドには時間がかかるものの、必要な前提条件をすべてインストールしてしまえば、自動的に進む扱いやすい作業だった。

バグの特定と修正

• ビルド環境が動作した後、コード探索を始めた。
• Chromiumのコードベースは非常に巨大で、全体構造を把握するのが難しかった。
• コード内の多くの間接参照とモジュール化により探索が難しく、動的ディスパッチも広く使われていた。
• printfデバッグを使い、ネットワークリクエストが開始される地点から、実際にリクエストが作られるかキャッシュから取得されるまで追跡した。
• 問題は、InspectorNetworkAgentがworklet対象に対して生成されていなかったことにあった。
• これを修正するため、InspectorNetworkAgentがWorkerGlobalScopeではなくWorkerOrWorkletGlobalScopeを受け取るよう変更した。
• しかしこの修正だけでは不十分で、さらにDevtoolsフロントエンドのTypeScriptコードを確認したところ、Type.Workletに対してCapability.Networkingが欠けていることを発見した。
• これを追加した後、問題は完全に解決した。

テストとコードレビュー

• デバッグログを整理し、diffを最終確認した後、コードのレビューとマージの流れを調べた。
• Chromium Gerritのコードレビューサイトでアカウントを作成し、CLAに署名した。
• レビュアーを選定し、書いたコードを見直して必要なテストを追加した。
• Devtoolsのネットワーク検査機能をテストする複数のJavaScriptテストを参照して、新しいテストを書いた。
• 最終的にコードレビューで"LGTM"の承認を得て、PRはマージされた。

2つ目のCL

• devtools_frontendリポジトリで、workletのDevtools対象にCapability.Networkを追加する変更のため、もう1つのCLを書いた。
• 1つ目のPRと同様に進み、CIテスト通過後に自動でマージされた。

リリース

• 修正を含むバージョンがChrome Canaryで公開されるまで待った。
• Chrome Canaryは1日に2回更新され、最終的に修正内容を確認できた。
• 修正を完了するまでに1か月以上かかり、Chrome 130で安定版リリースチャネルに含まれる予定となった。

結果と振り返り

• バグ修正には時間がかかり、多くの努力も必要だったが、とても独特な体験だった。
• Chromiumの規模でソフトウェアがどのように開発されるのかを体験できた。
• 個人的には、自分のコードが世界中の数百万、あるいは数十億台のデバイスに組み込まれるという事実が大きなモチベーションになった。
• 今回の経験を通じてChromiumへの貢献方法を学び、今後もさらに多くのバグ修正に挑戦する予定だ。

[huiya]

すごいですね

[GN⁺]

Hacker Newsの意見

• Chromiumコードベースでの作業経験

  • Sublime Textを使ってコード作業をプレーンテキストとして処理している
  • VS Codeを使えば、関数定義や宣言へジャンプするなどの機能を利用できる
  • Chromiumベースのブラウザを作りたい人に自分の記事を勧めている

• VS CodeのC++拡張の問題

  • コードベースが大きすぎるため、VS CodeのC++拡張がまともに動作しない
  • CPUコア使用率が100%に張り付く問題が発生する
  • Chromium Code Searchツールが便利

• Chromeのバグ体験

  • LinuxでChromeベースのブラウザで「±±±±±±+...」と入力されるバグが発生
  • 他のアプリケーションでは発生しない
  • バグを再現して解決したいと思っている

• Chromiumコードベースの第一印象

  • 初めてChromiumコードベースを探索したが、それほど難しくなかった
  • Windowsでの画像貼り付けバグを修正するためにChromeのコードを参考にした

• Chromeのビルド要件

  • Chromeのビルド要件は非常に高い
  • 高性能なワークステーションが必要
  • Firefoxもビルド時間が長い

• printfデバッグ

  • printfデバッグを使うことを恥ずかしく思う必要はない
  • printfデバッグは非常に効果的

• オンラインコードブラウザの利用推奨

  • オンラインコードブラウザでコードを探索することを勧めている
  • cs.chromium.org のURLは覚えやすい

• WorkletGlobalScopeとWorkerGlobalScopeの違い

  • 2つの用語の違いを理解するのに時間がかかった
  • 命名規則がよくない

• Chromiumのバグ修正の提案

  • Chromiumのバグを修正することを勧めている
  • Chromeはすぐ更新されるので、4〜6週間以内にバグが修正される可能性がある
  • バグ修正に貢献してくれる人を探したいと思っている

• 画像コピーのバグ体験

  • Chromeベースのブラウザで画像をクリップボードにコピーするとUIがフリーズする
  • PNGエンコードの問題が原因で発生する
  • 圧縮レベルを0に変更して問題を解決した
  • Firefoxでは遅延がなく、元の画像ファイルをクリップボードに入れる