【Eruda】スマホのChromeやFirefoxで疑似開発者ツールを開けるブックマークレット
この記事では、Androidスマホアプリ版「Google Chrome」や「Firefox」で疑似的な開発者ツールを開けるオープンソースプロジェクト「Eruda」について書きます。
難しい知識は不要で、用意されたブックマークレットを保存して実行するだけです。
通常、スマホアプリの「Google Chrome」や「Firefox」では開発者ツールが開けません。
2025年1月に開発終了した「Kiwi Browser」ではメニューからすぐに開けていましたが、ChromeやFirefoxにはそういったメニューがないです。
調べてみると、PCと接続してADBコマンド？USBデバッグ？やらで開発者ツールを開くことは可能らしいですが、僕みたいな初心者がスマホのブラウザ上でPCなど頼らずに単体で開くことはできなさそうです。
その代わり、有志の方が開発されている「Eruda」というツールを使えば、本物の開発者ツールではないですが、疑似的な開発者ツールをスマホ上で開けます。PCなど不要です。
GitHubに公開されていて、利用するためにブックマークレット（JavaScriptコード）が用意されています。
①ブックマークに保存→②開発者ツールを開きたいサイトを開く→③ブックマークを実行の手順です。
PCブラウザで使うような本物の開発者ツールとは微妙にUIや操作性が異なりますが、スマホで簡易的にページの要素（HTMLやCSSのセレクタ）を確認したい時に便利です。
コンソール、エレメントの要素選択モード、ネットワークやソースなどを利用できます。
リリース元：LiriLiri/surunzi（GitHub、寄付、Open Collective）
記事執筆時のバージョン：3.4.3（2025年06月15日）
Erudaの使い方
ブックマークレットをコピーする
Erudaは、本来Webページに埋め込んで使うJavaScript製の開発者ツールですが、手軽に使う方法としてブックマークレットが用意されています。本記事ではその方法を紹介します。
ブックマークレットとは「javascript:」から始まるJavaScriptコードをブックマークとして登録し、そのブックマークを実行することで、今開いているページ上で任意のJavaScriptを一時的に実行できる仕組みです。
Erudaに限った話ではないです。「ブックマークレットって何？初めて聞いた」って方は先に「ブックマークレットとは？」で調べると理解度深まると思います。
以下のEruda公式ブログにアクセスします。
https://eruda.liriliri.io/docs/QRコードの下らへんにブックマークレット（「javascript:」から始まる一行のJavaScriptコード）が記載されているのでコピーします。
ブックマークとして登録する
以下記事で紹介している方法で適当なサイトをブックマークに追加して編集ページを開きます。
https://www.naporitansushi.com/android-firefox-bookmarklet-c...
名前を呼び出しやすい名前にします（例：開発者ツール）。URLの部分をこちらでコピーしたブックマークレットにします。
ブックマークレットを実行する
実行したいサイトを開いて、作成したブックマークレットを実行します。
Firefoxブラウザの場合は、アドレスバー横の三点ボタン（⋮）→「ブックマーク」から開けます。
Google Chromeブラウザでブックマークレットを実行する場合、ブックマークページからではなく、アドレスバーの検索候補から実行します。
ブックマークページからだと何も起きません。
詳しくは以下記事を参考にしてみてください。
作成したブックマークレットを実行します。
疑似開発者ツールを開く
ブックマークレットを実行すると開いていたサイトの右下に専用の歯車ボタンが表示されます。開いていたサイトのみで他のバックグラウンドタブには影響しません。
タップするとErudaで作られた開発者ツールが開きます。個人的には、完成度が高く従来の開発者ツールと遜色ない印象を受けました。
Elementsタブで要素選択モードを使う
通常の開発者ツール同様「Elements」タブに要素選択モードが用意されています。
左上のアイコン（
）をタップします。一時的に開発者ツールが閉じるので調べたい部分をタップします。再び開発者ツールが開いてその場所まで飛んでくれています。
動画も貼っておきます。
画像保存が禁止されているサイトで画像のソースを調べて直接開いて保存…みたいなことができるかもしれません。やっていないのであくまで想像ですが。
高さ調整
余談ですが、開発者ツールは上部の境目をうまく掴んでスワイプすると高さ調整できます。
Consoleタブでコマンド実行
コンソール（Console）タブも用意されているので、何かしらの任意コマンドを実行できます。
試しにChatGPTにお願いして作ってもらったサイト上の背景色を全て赤色に強制変更するコンソールコマンド（JavaScript）を実行してみます。
document.querySelectorAll('*').forEach(e=>{let s=getComputedStyle(e);if(s.backgroundColor!=='rgba(0, 0, 0, 0)'&&s.backgroundColor!=='transparent')e.style.background='red';});Console→下部の入力欄をタップ→実行したいコマンドを貼り付けます。貼り付けたり、確定ボタンを押した時点ではまだ実行されません。
実行したい場合キーボードを閉じて、下にある「Execute」をタップします。
そのページ上でコマンドが実行されます。コード通り、背景色が全部真っ赤になりました。
通常の開発者ツールと同様、別に永久的な反映ではないです。一時的なものです。
ページを閉じて開きなおしたり、リロードしたりすると元通りです。
もしJavaScriptを永久的に適用したい場合は「Tampermonkey」や「ScriptCat」などの拡張機能がいいかもです。
- 【Tampermonkey】ウェブサイトにJavaScriptを適用できる拡張機能 | ナポリタン寿司のPC日記
- 【ScriptCat】Manifest V3対応のスクリプト（JavaScript）適用拡張機能 | ナポリタン寿司のPC日記
感想
以上、Androidスマホアプリ版「Google Chrome」や「Firefox」で疑似的な開発者ツールを開けるオープンソースプロジェクト「Eruda」についてでした。
各種ブラウザに搭載されている本物の開発者ツールとは違うし、そもそもスマホ上だとPCのように大画面で操作できないので中々使いにくいですが、簡易的にパパっと要素調べたい時には便利かもしれません。
いちいちPCで調べなくてもスマホ上で完結します。