Tag ➽ devtools

Solid.js の Playground では ページ内に Chrome の DevTools が埋め込まれています（右下）
https://playground.solidjs.com/

どうなってるのと思ってソースコードを見てました
https://github.com/solidjs/solid-playground

chii というプロジェクトで DevTools の画面を作ってるようです
ウェブフロントエンドで動くようにパッチを当てていますが DevTools のソースコードが使われてます
また DevTools と接続するページ側では chobitsu というライブラリを使って DevTools との通信を管理してるようです
chobitsu は CDP の JavaScript 実装らしく CDP ライブラリなら他にも類似のものは色々ありそうですが chii との通信専用に独自の部分があるのかもです

Vue にしてもそうですが中国のライブラリって日本アニメの名前が使われる傾向があるみたいですね

Solid.js の Playground のページは Solid.js が前提になっていたり外部から更新できる画面になっていて複雑だったのでシンプルに最低限の機能で動くページを作ってみました
Solid.js の Playground のページから多くコードを流用してます
https://nexpr.gitlab.io/public-pages/chrome-devtools/

仕組みとしてはメインのページがあってその中に 2 つの iframe があります
片方が DevTools の画面で もう片方が DevTools と接続する画面です
それぞれの画面が親フレームにメッセージを送るようになっているので メインのページではメッセージを相手側に送信するようします

Elements タブで要素にマウスを乗せると対応する部分に色がついたり要素サイズが表示されたり ちゃんと DevTools の動きをしています
Console タブで JavaScript コードを実行できますし DOM を更新すればそれに対応して画面も変わります

ほとんどいつもの DevTools と変わらないですが 制限も色々あります
コンソールから Sources タブに飛んでエラー箇所を確認できなかったり
デバッグ実行ができなかったり
Elements タブで一部のスタイルが適用されているのに確認できなかったり（外部 CSS がだめなのかも）

すごいライブラリではあるのですが 制限があることで中途半端になりますし普通に DevTools を出せばいいかなと思うので今後使うかというと使わないかもです

いつのころからかコンソールでプライベートプロパティを直接操作できるようになってました

const x = new class { #p = 1 }
x.#p++
// 1
x.#p++
// 2
x.#p++
// 3

外部からのプライベートプロパティ操作なのでエラーになるはずなのにエラーが起きず読み書きできてます
最初はバグ？と驚きました
昔はコンソールでもちゃんとエラーになってたはずです

便利機能だとするといつ追加されたのか気になったので調べてみたら Chrome 111 らしいです
（Chrome 111 のリリースは去年の 3 月です）
https://developer.chrome.com/blog/new-in-devtools-111?hl=ja

「その他のハイライト」というところに

デバッグを容易にするため、DevTools でプライベート クラスメンバーを使用した式の評価がサポートされるようになりました。（1381806）

という形で記載されてました
重要だと思うのですがひっそりとしてます

個人的にはプライベートプロパティはほぼ使わないので全然知らなかったです

この便利機能が使えるのはコンソール内のみで eval や script タグ経由になると無効です

eval("x.#p++")
// Uncaught SyntaxError: Private field '#p' must be declared in an enclosing class

window.x = x
const script = document.createElement("script")
script.innerHTML = `window.x.#p++`
document.head.append(script)
// Uncaught SyntaxError: Private field '#p' must be declared in an enclosing class

デバッグし辛いというプライベートプロパティの最大の問題が解決されたのでこれまでより使いやすくなったと思います
ですが 使う側で回避策や機能追加のために直接プライベートプロパティを扱いたいってことはあるのでライブラリレイヤーであまり使ってほしくないというのは変わらないです

もう結構前からですが Edge で DevTools を起動すると日本語になってます
Chrome では上の方に日本語にもできますよって通知が出るだけでデフォルトは英語です

以前は英語に戻してましたが 環境ごとに毎回設定変更は面倒なので最近はそのままのことも増えました
ボタンなどの場所は変わらないので ネットで見かけた設定等を試す時以外は日本語でも困ってなかったです……が コマンドを使うと辛かったです

Ctrl-Shift-P で出るやつです
VSCode と同じ感じ

ここも日本語になってるので コマンドを日本語で打たないといけないです
選択肢の候補すら日本語です
漢字に変換しないと出てこないですし ひらがなカタカナも区別されています

最終的なコマンドが日本語なのは別にいいとしても フィルタして選択肢を出すところでは 元の英語版のコマンドからも検索してほしいですし ひらがなでカタカナと漢字も検索してほしいです
Microsoft あるあるかもですが必要以上のローカライズって不便になるだけだと思うんですよね

ポップアップで表示される部分の HTML 構造を確認したいとかありますよね
でも右クリックの「検証」を押したり devtools にフォーカスするとポップアップが閉じてしまうということがあります

原因は blur や focusout イベントを使って 要素がフォーカスを失ったらポップアップが閉じるようになっているから
devtools にフォーカスをあてるとページからはフォーカスが失われて このイベントが起きてポップアップが消えてしまいます

このためにけっこうな力技で対処していました

devtools の Elements タブですべての blur と focusout イベントのリスナを削除してから ポップアップを開きます
ポップアップの要素を消す処理が行われないので ポップアップは開いたままになります
本来の動作が行われなくなるので 確認後にリロードが必要です

別の手段では setTimeout で遅延して debugger を実行します
3 秒後に debugger を実行するようコンソールで実行してから 3 秒以内にポップアップを開きます
debugger が実行されると JavaScript の処理は実行されず固まるので ポップアップが開いたまま devtools を操作できます

こんな方法を使ってましたが 正当な方法がありました

devtools で Rendering タブを開きます
出てないならメニューの More tools から選択します
リストから「Emulate a focused page」を探してチェックを入れます
これでページにフォーカスが残るので devtools にフォーカスを当ててもポップアップは消えずに残ります

デフォルトで有効になってて欲しいくらいの機能です

devtools の内部動作を確認するために devtools の devtools を見てたら lit-html らしきコメントを Element タブで発見

↓

<!--?lit$008791353$-->

devtools のリポジトリ見てみると third_party ツールに含まれてた

https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/third_party/lit-html

あるページで devtools を出してコンソールに入力しているとページ内にエラーが通知されました
devtools を開くと詳しくない人向けにここにコードを貼り付けないでくださいみたいに書いてるサービスは見たことがありますがコンソールの入力でエラーを通知されるのは初めてでした
そもそもコンソールに入力があったことを ページ側でどうやって検知してるのでしょうか？
そんな API が追加されたという話は聞いていませんがひっそりと追加されたのでしょうか？

ネットで調べても見つからないですし 検知して実際に通知を行ってるページがあるのですからそこのソースを devtools で見てどうやってるのかを調査しました
結果は単純で window の error イベントを検知してるだけでした
特にコンソールの入力を禁止する目的ではなかったようです

考えてみるとエラーが通知されるタイミングは「1+」のように構文的にエラーになるタイミングでした
試しに

window.addEventListener("error", err => {
	console.log("ERR!", err)
})

というコードを設置したページを開いてコンソールに入力してみます
すると 「1+2」 と打とうとしたとき 「1+」 のタイミングでエラーがログに表示されました

入力中でも構文がチェックされて window の error として受け取れるようです
devtools のコンソールでしかも入力途中は不要だと思うのですけどね

気になるのはクライアントサイドのエラーを収集するために window の error イベントが起きたときにサーバにデータを送信するサービスがあるというところ
サービス側としてはコンソールで色々弄る人がいると大量のエラーが送信されます
ただこれはすでに拡張機能などによる DOM 編集でエラーが出るケースなどはあるので対処されてるでしょう

怖いのはコンソールに入力したものが意図せず送信されてるんじゃないかってところです
エラーが発生したコードも取れるかと ErrorEvent インスタンスの中を見てみました
見た感じでは error プロパティに Error オブジェクトが入っていて message に 「Unexpected end of input」 というのがあるくらいでした
もちろんエラー内容によっては null のプロパティを参照しようとしたなどもう少しわかるかもしれません
とりあえずコードの文字列への参照などはなく コンソールで色々するのを控える必要はなさそうです
ページからのエラー通知が邪魔なら devtools でコードを書き換えて error イベント時の処理の最初に return を追加するなどで回避できます

いつのまにか devtools で文字列を評価したときの結果表示がシングルクオートになってます

"a"+"b"

を入力すると表示されるのは

'ab'

昔はダブルクオートだっと思うのですけどね
プログラミング言語的にはダブルクオートのほうが一般的ですし JSON はダブルクオートのみなのでダブルクオートをデフォルトにしておいてほしいものです

なぜそんな変更をしたのかと思って調べたら文字列表現が JavaScript として有効な表示になるように変更があったようです
文字列の内部で使われていたら別のクオートに置き換えて全て使われていたらエスケープするようです

"'"
// "'"

"'\""
// `'"`

"'\"`"
// '\'"`'

コピペできるので便利といえば便利ですが エスケープされず直接表示してくれる昔のもののほうが読みやすくて好きでした
console.log を通せば今でも文字列にクオートがされずエスケープが行われないので エスケープなしでそのまま表示してほしい場合は console.log を通す必要があります

devtools の設定を開いて (F1 キーを押すかヘッダ右の歯車アイコン) Preferences ページの Elements セクションにある「Show user agent shadow DOM」のチェックを付ける

適当なページの video タグなどを見ると自作の ShadowDOM と同じように ShadowDOM の中が見える

Chrome が入ってない環境を使ったとき Edge があるし これでいいかと使ってました
なんとなく devtools を開くと……



日本語
違和感しかないです
そういえば Edge では devtools もローカライズするとか言う話ありましたっけ

日本語である必要がないですし 特にタブのところみたいなカタカナで並ぶようならもう英語でいいよって思うんです
devtools みたいなところの詳しい情報は基本英語で書かれてるので 自分の画面が日本語になってると対応するところを探す余計な手間が入って困ります
ググるときにも日本語名でググっても大した情報が出ないですし

英語に戻そうと思ったもののこれまで devtools の言語設定なんて見たことがないです
どこから戻せるのか調べてみました

Edge では設定画面に言語関係の設定が追加されていました
devtools 上で F1 キーを押して設定画面を出すと一番最初にあります



「ブラウザーの言語に合わせる」のチェックを外します
すると自動で devtools が自動で再起動して 再起動後にはいつもの英語版に戻っています

https じゃないと動かない機能をローカルで試したいけど 自作や適当なサーバからダウンロードした証明書だとエラーが出る
毎回無視するボタンを押せばいいんだけどこれも面倒だからエラーが出ないようにしたい
ちゃんとやるなら ドメインに合わせた証明書を自作して信頼されたルート証明機関のところにインポートすればいいんだけどこれが結構面倒

適当なサイトの証明書をダウンロードしてローカルのサーバに設置して hosts を編集してそのサーバへのアクセスを VM とか localhost に向ければ済むような……と思ったけどサーバ側には証明書以外に秘密鍵も必要で秘密鍵はさすがに公開されてないので この方法は無理そう

実在サーバの証明書を使うという方向で考えてみると devtools のローカルオーバーライドが良さそう
以前実装されたときに良さそうと思った割に結局使わず忘れてた

使い方は devtools を開いて Source タブを開く
左側のサイドバーのタブで Overrides を開いて ＋ ボタンを押す
フォルダ選択画面が出るので適当なところにフォルダを作って選択
devtools からそのフォルダへフルアクセスされるって警告が出るので許可

あとはそのフォルダ内にファイルを作れば devtools が開いてるときは本来のレスポンスの代わりに配置したファイルがレスポンスになる
例としてこのブログを使うと 「https://let.blog.jp/foo.html」 は 404 エラーになる
許可したフォルダの中に 「let.blog.jp/foo.html」 というファイルを配置する

<script>
crypto.subtle.digest("SHA-1", new ArrayBuffer()).then(buf => {
	alert(buf.byteLength) // 20
})
</script>

配置できたら foo.html の URL にアクセスすると配置した HTML ファイルが開かれ 20 というアラートが表示されるようになる
JavaScript で処理してるハッシュ値計算は https じゃないと使えない機能

これくらいなら適当な https ページで devtools 開いてコンソールにコピペでいいんだけど ちょっと長くなって HTML や JavaScript ファイルを開いて動作確認したいってときには便利

注意するなら localStorage などのデータは本来のサーバのエリアに保存される
オーバーライドしてないページを開いたときの処理で localStorage のデータをサーバに送信するとかあれば ローカル感覚で保存した情報が送信されることはあり得る
あと 本来のページが見えなくなったりもするけど 使うことなさそうなサイトの URL を使ったり そもそも devtools 開かなければいいのでこっちは問題なさそう

この方法だとサーバがいらずにブラウザのみで良くなったという利点はあるけど サーバ側の処理もしたい場合には使えないのが欠点

要素の位置がおかしくて CSS 的にありえないような場所にいる
リロードしても変わらなくて 別のページで同じ構造でシンプルにしたらなぜか再現しない
さらにスタイルをを devtools の Element タブで書き換えてもなにも変化しない

あれこれ試した結果 devtools の Animation タブが原因だった
知らないうちに Pause all を押してて全アニメーションが停止状態になってた
ページ開いたタイミングではアニメーションの初期状態になってて Element タブのスタイルではそれが見えないので CSS が正しく効いてないように見えてた
Animation タブ 気をつけよう

webpack とか rollup とかされて複雑になってる JavaScript のページで devtools 使うと Source タブでの表示がよくおかしくなってる

中でも面白かったのは

ソースの文字列が反転されて 表示されてたとき

一体なにがどうなってこんな現象が？？とちょっと理解出来ない

{()pop.yarra}()noitcnuf

↑ こういうの
反転してるって気づいたのは 「()noitcnuf」 という部分

そういう minify というか難読化なのかもと一瞬考えたけど pretty print すると普通に読めるコードになってたから devtools の問題だと思う