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

この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出

[kazuhi_ra]

マジか

[mizdra]

良い…

[efcl]

Chromeの開発者ツール自体のソースコードを見ていく話。

[sh19910711]

"DevTools の設定や Console の入力履歴 (JavaScript の REPL のアレ)、ブレークポイントの設定などは DevTools の localStorage に永続化 / DevTools を DevTools で inspect / localStorage を適当に書き換えることでそのあたりを自由に改変できます"

[koba789]

再帰構造を見るとつい楽しくなってしまう人向けだ

[mangano-ito]

「inspect している画面を inspect している様子」が良すぎる．古くは Mozilla の XUL など，ブラウザ自体が Web 技術でできていて見ることができるのはカッコよさにあふれている．

[utgwkk]

何かあるとすぐにNetworkタブを見がち

[nabeop]

Devtools の様子を DevTools で観察するの面白いな