トップ > テクノロジー > DevTools の Web 技術でできている部分を覗き見る

DevTools の Web 技術でできている部分を覗き見る

テクノロジー

この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。

昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。

Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。

f:id:polamjag:20211222005603p:plain
example.com を inspect している画面を inspect している様子

このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出来事に遭遇したのがきっかけでした。なんとかならないかと思ってごちゃごちゃ検索していたところ、次の Stack Overflow のページにたどり着きました。

stackoverflow.com

DevTools の設定や Console の入力履歴 (JavaScript の REPL のアレ)、ブレークポイントの設定などは DevTools の localStorage に永続化されています。したがって、DevTools を DevTools で inspect して、localStorage を適当に書き換えることで、そのあたりを自由に改変できます。……というわけで、Chrome の DevTools の UI 部分は Web 技術でできていることに改めて気づきます。

f:id:polamjag:20211222015552p:plain
マジです

ソースコードはこのあたり。

リポジトリルートに ARCHITECTURE.md というファイルがありそうなので眺めてみると、

https://github.com/ChromeDevTools/devtools-frontend/blob/09efec39cdd94dd63b375d2aaac08f7038a05741/ARCHITECTURE.md

  • Guiding principles
    • Web Platform Design Principles というドキュメントがあるらしく度々言及されている
    • DevTools はでかいから Load only what is necessary しようね、という話
    • DevTools ships every single day in Canary builds of Chromium-based browsers. It is therefore risky to halt development during a migration (even for a couple of weeks), as DevTools can cause Canary builds to break and effect not just end-users, but also engineers working on the web platform itself であることに気を遣おうという話
      • それはそうって感じもありますが、それ以上に尊さを感じます。実際 stable に降りてきてない機能を試すには Canary 使うしかないわけなので……
      • 闘うプログラマー的なエピソード感もありますね
    • 一方で Use flexible third_party libraries whenever necessary という話もあって柔軟
  • Startup process overview
  • 実際のフォルダ構造 (とビルドシステムとの連携) の説明

README から Chrome DevTools Contribution Guide というドキュメントが参照されていたのでこれも眺めてみます。これは Google ドキュメント

docs.google.com

"How DevTools Works" という見出し以下の箇所 に良いことが書いてありました:

DevTools is a web app that talks the DevTools Protocol over a WebSocket to a backend within Blink's C++. The devtools-frontend github wiki is the best current documentation on the various components of DevTools, including architecture, testing, etc

WebSocket! と思いコードベースを wss で検索してみたところ、いかにもそれらしいコードがありました

github.com

  • ES Class の private なフィールド (# 始まりのアレ) がめちゃくちゃ使われているのも目を引きます
    • TypeScript の private フィールドから移行するのが細切れに実施されているようでした https://crbug.com/1222126
  • というのを見ているあたりで Node.js のデバッガに DevTools を使うことができるという話を思い出した
  • これ WebSocket で実際にやり取りされてるメッセージを見たいよな〜と思ったんですが、ひとまず Remote Debugging の仕組みを使いつつパケットキャプチャを走らせると普通に確認できました。おもしろい
    • https://chromedevtools.github.io/devtools-protocol/#remote
    • 具体的には --remote-debugging-port オプションを指定して Chrome を起動しつつ、別の Chrome のインスタンスで chrome://inspect からそれにアタッチする、ということをやると通信が始まります。素朴に開始すると平文の HTTP + WebSocket で流れていくので、手元のマシン内で全部完結してる場合は Wireshark とかで loopback デバイスをキャプチャすると狙った状態になります

f:id:polamjag:20211222101602p:plain
適当な Web サイトを開いたときの流れの様子。React Developer Tools がインジェクトされましたという雰囲気

最初の話に戻ると、ブレークポイントの情報が localStorage に保存されている、というのはこのあたりでの出来事でした。

という感じで、普段 Web アプリケーションエンジニアとして仕事をしているうちの相応の時間は DevTools とともにあるわけですが、そんな DevTools も Web アプリケーションの一つの姿であることが垣間見れて面白かった、という話でした。

余談ですが、どうやら他のブラウザも似た感じの構造になっていそうな雰囲気を感じるので、次はこっちも眺めてみるか〜という気持ちになっています。

はてなでは、普段から Web ブラウジングをしているときに手癖で DevTools を起動してしまう Web アプリケーションエンジニアを募集しています。

hatenacorp.jp