DevTools

スマホには DevTools がありません。PC と USB でつないでリモートデバッグする以外に手がなく、外出先で「この要素の CSS が知りたい」「この API が何を返しているか見たい」というときに詰みます。

このブックマークレットは、ページの中に DevTools 相当のパネルを描画します。Chrome 本体の DevTools を開くわけではありませんが、日常のデバッグで使う情報はひと通り取れます。

外部スクリプトを一切読み込まず、すべてページ内で完結します。ネットワークにも送信しません。localhost や社内ページ、そして CSP (Content-Security-Policy) が厳しくて Eruda などの CDN 注入が弾かれるサイトでも動きます。

パネルのスタイルも <style> タグやインラインの style 属性ではなく CSSOM (constructable stylesheet) 経由で当てているため、style-src 'self' のように unsafe-inline を許可していないページでもレイアウトが崩れません。

使い方

登録したブックマークを開くとページ下部にパネルが出ます。もう一度開くか × で閉じます（Esc でも閉じます）。

• 上端のグリップを上下にドラッグすると高さが変わります
• ▁ で最小化すると右下の丸ボタンになります。ページを操作しながら畳んでおけます

パネル

Console

console.log / info / warn / error / debug と、キャッチされなかった例外・Promise の reject を記録します。行をタップすると値を展開表示します。

下の入力欄から JavaScript を実行できます。返り値は緑で表示され、Promise なら解決後の値も追記されます。

Elements

DOM ツリーを展開して辿れます。行をタップすると選択され、ページ上でその要素がハイライトされ、下部に属性・サイズ・computed style・outerHTML が出ます。

「要素を選ぶ」ボタンを押すとパネルが一時的に隠れ、ページを直接タップして要素を選べます。スマホではこれが一番速いです。

Network

fetch と XMLHttpRequest をフックして、メソッド・ステータス・所要時間・リクエスト/レスポンスボディを記録します。行をタップで詳細が開きます。

「読み込み済み」フィルタでは、ブックマークレット起動前に読み込まれたリソースも PerformanceResourceTiming から一覧できます（こちらは本文を取れず、サイズと時間だけです）。

Sources

読み込まれている JS / CSS と、インラインの <script> / <style>、現在の DOM 全体 (outerHTML) を一覧します。行をタップするとソースを取得して表示します。

Application

Cookie / localStorage / sessionStorage の中身、IndexedDB のデータベース名、Cache Storage のキー、Service Worker の登録状況を表示します。「ストレージを全削除」で一括クリアもできます（確認ダイアログが出ます）。

Info

URL の分解、UA、画面とビューポートのサイズ、DPR、navigation timing (DNS / TCP / TTFB / DOMContentLoaded / load)、DOM の要素数などをまとめて表示します。

制限

• Chrome 本体の DevTools ではありません。 ブックマークレットにブラウザ UI を開く権限はないため、Performance プロファイラや Lighthouse、ブレークポイントによるステップ実行はできません
• Console / Network はブックマークレットを開いた後の分だけ記録します。ページ読み込み時のログや通信はさかのぼれません（一度開けばフックは残るので、閉じている間の分も記録されます）
• Console の実行は eval を使うため、サイトの CSP 設定によってはブロックされることがあります（その場合はエラーとして表示されます）
• Sources の外部ファイルは CORS の制限を受けます。別オリジンのファイルは取得できないことがあります
• <iframe> の中と Shadow DOM の内側は Elements ツリーで辿れません
• レスポンスボディの記録はテキスト系のみ、1 件あたり 20000 文字までです