はじめに
スマートフォンでウェブサイトを閲覧しているときに、ページ内の要素を確認したり、JavaScriptを実行したいと思ったことはないでしょうか。
例えば、次のような場面です。
- サイトのHTMLやDOMを確認したい
- JavaScriptを実行して、ページ内の情報を抽出したい
- localStorageやCookieに保存されている値を確認したい
PCならブラウザのデベロッパーツールを使って簡単にできることも、スマートフォンでは難しい場合があります。
そこで便利なのが、Eruda です。
Erudaは、スマートフォンなどのブラウザ上で利用できる開発者向けツールです。JavaScriptの実行やDOMの確認、ストレージの参照など、ウェブサイトの調査に役立つ機能を備えています。
この記事では、Android版Chromeを使って、Erudaをブックマークレットから起動する方法を紹介します。
Erudaとは
Erudaは、モバイルブラウザ上で動作する開発者向けツールです。
主に次のような機能を利用できます。
- Console: JavaScriptを実行
- Elements: ページのDOMを確認
- Network: 通信状況を確認
- Resources: localStorage、Cookie、読み込まれたスクリプトとCSSなどを確認
- Sources: ソースコードの確認
- Info: ブラウザや端末の情報、Erudaのバージョンなどを確認
- Snippets: 境界線を表示する、サイトのテキストを編集可能にするなどのユーティリティを集めたもの
PCのデベロッパーツールを完全に再現するものではありませんが、スマートフォンからウェブサイトを調査したいときに便利です。
公式サイト:
GitHub:
Erudaの使い方
今回は、ブックマークレットを利用してErudaを起動する方法を紹介します。
ブックマークレットとは、ブックマークからJavaScriptを実行する仕組みです。
一度登録しておけば、対応するサイトを開いた状態でErudaを呼び出せます。
1. ブックマークを作成する
まず、Chromeで適当なウェブサイトを開き、ブックマークに登録します。
2. 作成したブックマークを編集する
ブックマーク一覧を開き、先ほど登録したブックマークを編集します。
3. ブックマークレットを設定する
ブックマークのタイトルを Erudaなど、好きなタイトルに変更します。
次に、URL欄に以下のコードを貼り付けます。
javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();
入力できたら、←を押して戻ります。
4. 調べたいサイトを開く
Erudaを使用したいサイトをChromeで開きます。
5. アドレスバーからブックマークレットを実行する
ブックマーク一覧から直接実行するのではなく、Chromeのアドレスバーから呼び出します。
- Chromeのアドレスバーをタップします。
- ブックマークレットに設定したタイトル（今回は
Eruda）を入力します。 - 表示された候補をタップします。
正常に実行されると、画面の右下にErudaの歯車アイコンが表示されます。
6. Erudaを開く
右下に表示された歯車アイコンをタップすると、Erudaのパネルが開きます。
パネル内のメニューから、ConsoleやElementsなどの機能を選択できます。
これで、Erudaが使えるようになりました。
注意点
Erudaは、すべてのウェブサイトで動作するわけではありません。
ウェブサイト側のCSP (Content Security Policy) などによって、Erudaが正常に起動しない場合があります。
また、ErudaはPCのデベロッパーツールと完全に同じ機能を備えているわけではありません。
あとがき
Erudaを使えば、パソコンを起動させなくても、スマートフォンからConsoleでJavaScriptを実行したり、サイトのDOMやストレージの値などを簡単に確認できます。
スマートフォンでウェブサイトを調査したいときに、試してみてはいかがでしょうか。