開発者のための便利なブックマークレット5選

ブックマークレットとは、URLがjavascript:で始まる1行のJavaScriptコードで構成されたブックマークです。クリックすると、別のページへ遷移する代わりに、そのコードが現在のページに対して実行されます。これにより、ブックマークレットはインストール不要で最も手軽に、ページのライブ編集、レイアウトのデバッグ、マスクされた入力の表示、カラーの取得などを行える手段となります。拡張機能も、DevToolsのパネルも、ビルドステップも一切不要です。本記事では、現行のChromiumブラウザで動作する実用的なブックマークレットを5つ紹介し、それぞれの使いどころを解説するとともに、よくある落とし穴（1行パース、Content-Security-Policyによるブロック、同一オリジン制限）についても説明した上で、独自のブックマークレットの作成方法をお伝えします。

インストール方法は2通りあります。新しいブックマークを作成してURLとしてjavascript:コードを貼り付けるか、hrefにそのコードが設定されたリンクをブックマークバーにドラッグする方法です。以下の各スニペットはすでに1行になっているため、そのまま貼り付けてください。

1. デザインモードでページをライブ編集する

ページ全体を編集可能なドキュメントに変換し、DevToolsを開かずにライブサイト上でコピー、スペーシング、レイアウトをテストできます。

javascript:document.designMode="on";void 0;

document.designModeを"on"に設定すると、ドキュメント全体が編集可能になります。これはcontenteditable="true"と同じ効果ですが、1つの要素ではなくページ全体に適用されます。任意の見出しや段落をクリックして入力できます。「このボタンのテキストをXにしたらどうなるか」とステークホルダーから聞かれたときや、長いプロダクト名がナビゲーションバーを崩さないか確認したいときに、コードベースに一切触れることなく活用できます。

末尾のvoid 0は重要です。文字列で終わるjavascript: URLは、ブラウザがHTMLドキュメントとして遷移先として扱います。void 0を付けることで、文字列以外の完了値を強制し、ページがそのまま維持されます。特定の領域のみを編集したい場合は、javascript:void(document.body.contentEditable=true)に変更してください。

2. 全要素を色付けしてレイアウトをデバッグする

すべての要素のボックス境界を一度に確認できます。オーバーフロー、位置ずれ、余分なマージンの発見に非常に役立ちます。

javascript:document.querySelectorAll("*").forEach(e=>e.style.background="rgb(0 0 0 / 10%)");void 0;

このコードは、ページ上のすべての要素に透明度10%の黒い背景を適用します。半透明のレイヤーが重なるため、ネストされた要素は徐々に暗くなり、DOMの深さを視覚的に把握できます。また、どのコンテナが親要素より広いかも一目でわかります。塗りつぶしではなく明確な境界線を好む場合は、背景の行をアウトラインに変更してください。e.style.outline="1px solid rgb(255 0 0 / 40%)"とすることで、ボーダーと異なりアウトラインはレイアウトに影響を与えないため、デバッグ中のページのジオメトリが維持されます。

3. マスクされたパスワードフィールドを表示する

すべてのパスワードフィールドをプレーンテキストに切り替えます。

javascript:(()=>{document.querySelectorAll('input[type=password]').forEach(el=>el.type='text')})();

このコードはすべてのinput[type=password]を走査し、typeをtextに変更して現在の値を表示します。認証フォームのデバッグ時、パスワードマネージャーやブラウザのオートフィルが実際に入力した内容の確認、または貼り付け時に末尾のスペースが混入していないかの確認に活用できます。ページ内デバッガーと同様にライブDOMを読み取ります。ログイン失敗のセッションリプレイを分析すると、オートフィルが微妙に誤った値を入力していたケースが頻繁に見つかりますが、このブックマークレットはそのようなバグを手動で最も素早く確認する方法です。

4. ネイティブのアイドロッパーで画面上の色を取得する

画面上の任意のピクセルをクリックして、そのHEX値を取得します。

javascript:void(async()=>{try{prompt('HEX:',(await new EyeDropper().open()).sRGBHex)}catch(e){alert(e)}})()

このコードはEyeDropper APIを呼び出し、カーソルを拡大鏡付きのカラーピッカーに変換します。選択した色はsRGBHexとして返され、コピー可能なpromptに表示されます。注意点として、EyeDropper APIはChromiumブラウザのみ（ChromeおよびEdge）で、セキュアコンテキスト（HTTPS）でのみ利用可能です。2026年時点では、FirefoxとSafariはこれをサポートしていません。また、ユーザー操作が必要で、open()は一時的なユーザーアクティベーションによってトリガーされない限り例外をスローしますが、ブックマークレットのクリック自体がユーザージェスチャーとして認識されるため、問題なく動作します。try/catchは、色を選択せずにEscキーを押した場合に発生する拒否エラーを処理します。

5. erudaでモバイルDevToolsを注入する

スマートフォンなどDevToolsが使えない環境でも、任意のページにフルコンソールとDOMインスペクターを表示できます。

javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/eruda';s.onload=function(){eruda.init()};document.head.appendChild(s)})();

このコードはeruda（現在の安定版リリースは3.4.3）を読み込む<script>を追加し、ロード完了後にeruda.init()を呼び出して、ページ上にDevToolsパネルをフローティング表示します。デスクトップのインスペクターを接続できない実機デバイスでのデバッグに特に有効です。注意点が2つあります。バージョンを固定していないcdn.jsdelivr.net/npm/erudaのURLは常に最新のビルドを提供しますが、erudaのリリースサイクルは停滞しており（1年以上新しいnpmバージョンがリリースされていない）、安定しているものの積極的なメンテナンスは行われていない状態です。外部スクリプトを読み込むため、次に説明するCSPの制限を受けます。

ブックマークレットが動作しない場合

ほぼすべての「動かない」ケースは、次の4つの原因のいずれかに該当します。

特に覚えておきたいのはCSPのケースです。厳格なContent-Security-Policyが設定されているサイト（GitHubでerudaのブックマークレットを試し、制限の緩いページと比較してみてください）では、コンソールが表示されず、代わりにCSP違反が（本物の）コンソールに記録されます。javascript:ナビゲーション自体もscript-srcによってブロックされる場合があります。

独自のブックマークレットを作成するには

独自のブックマークレットを作成するには、コードをIIFEでjavascript: URL内にラップし、DOMを変更する式はvoid 0で終了させてページが文字列化された戻り値に遷移しないようにします。

javascript:(function(){/* your code here */})();

IIFEによってページのグローバルスコープから変数を隔離できます。また、javascript:foo()は、呼び出しが文字列を返した場合の意図しない遷移を防ぐために、慣例としてvoidを前置します。まずDevToolsコンソールでロジックを記述してデバッグし、その後//コメントを取り除いて1行に圧縮し、ブックマークのURLとして貼り付けてください。コンソールに入力できるものであれば、すべてワンクリックのブックマークレットとして持ち運ぶことができます。

よくある質問

ブックマークレットがコードの途中で動作しなくなるのはなぜですか？

ブックマークレットは1行であるため、//による行コメントはそれ以降のすべての文字（閉じ括弧や関数呼び出しを含む）をコメントアウトしてしまいます。//コメントはすべて/* ブロック */コメントに置き換えるか、完全に削除してください。複数行のコンソールコードをブックマークレットに圧縮する際は、まずすべての//コメントを取り除いてください。1行になると、通常コメントを終了させる改行が存在しなくなるためです。

ブックマークレットにおけるdesignModeとcontentEditableの違いは何ですか？

document.designModeを'on'に設定すると、1つの文でドキュメント全体が編集可能になります。一方、contentEditableは要素ごとに設定するため、document.body.contentEditable = trueはbody領域のみを編集可能にします。ページ全体の任意の見出し、段落、ボタンをクリックして編集したい場合はdesignModeを使用し、特定のコンテナのみに編集範囲を限定してページの他の部分は固定したい場合はcontentEditableを使用してください。

EyeDropperブックマークレットはFirefoxやSafariで動作しますか？

いいえ。EyeDropper APIはChromiumのみ対応しており、ChromeおよびEdgeでHTTPS接続のセキュアコンテキストでのみ動作します。2026年時点では、FirefoxとSafariはこれをサポートしていません。このAPIには一時的なユーザーアクティベーションが必要ですが、ブックマークレットのクリックはユーザージェスチャーとして認識されるため、その方法でトリガーされた場合はopen()が正常に動作します。サポートされていないブラウザでは、EyeDropperコンストラクターが未定義のためブックマークレットが例外をスローします。

ブックマークレットからクロスオリジンのfetchリクエストを行うことはできますか？

自由には行えません。ブックマークレット内のfetch()呼び出しは現在のページのコンテキストで実行されるため、同一オリジンポリシーおよびサイトのCSP connect-srcディレクティブの制約を受けます。対象のエンドポイントが適切なCORSヘッダーを返さない限り、異なるオリジンへのリクエストはブロックされます。ブックマークレットのネットワーク呼び出しは、ページと同一オリジンまたはCORSが有効なAPIに限定してください。サイトのポリシーに対するクライアント側の回避策はありません。