はじめに
PCやUSBケーブルなどを使わずに、外出先でモバイルブラウザ向けの開発コンソールであるErudaを任意のWebサイトで呼び出します。このErudaを使うことでChrome Dev ToolsのようにDOMやリソースなどを表示することができます。
Erudaを使ったデバッグ方法については割愛しますが、
ブックマークレットとiOSのショートカットを使ってモバイルブラウザ上でErudaを簡単に呼び出すことができます。
ブックマークレット
最も簡単なのが、以下のGistにあるブックマークレットをブックマークに登録し、iPhoneやAndroidなどのモバイルブラウザから呼び出す方法です。一応、PCのブラウザからも呼び出せますが、素直にChrome Dev Tools を使った方が良いです。
Eruda Bookmarklet - GitHub Gist
任意のサイトを開いて、この登録したブックマークを呼び出すことで、ブラウザの右下にErudaの歯車アイコンが表示されます。
このアイコンをタップすることで、Erudaの開発コンソールが開きます。
iOSのショートカット
こちらは、iPhone限定(iOS12以上)の方法です。
主に、SafariブラウザやSFSafariViewController、ASWebAuthenticationSessionを使ったブラウザで利用することができます。
このショートカットでは、Erudaのjsライブラリを読み込むJavaScriptを任意のWebサイトで実行します。
JavaScriptの実行処理
以下のコード上のブラケットで囲っている部分は変数で、Erudaのjsライブラリ本体をテキストとしてショートカット内部で設定しています。
また、Eruda本体のjs以外に、eruda-dom.js、eruda-timing.js、erada-code.jsの３つのプラグインを上記のブックマークレットと同様に設定しています。プラグインの詳細はこちらを参照してください。
// eruda本体のjs
{eruda.js}
// erudaのプラグインのjs
{eruda-dom.js}
{eruda-timing.js}
{eruda-code.js}
// erudaの初期化
eruda.init();
// erudaのプラグインの読み込み
eruda.add(erudaDom);
eruda.add(erudaTiming);
eruda.add(erudaCode);
// JavaScriptの完了コールバックの呼び出し
completion(true);
ショートカットの実行方法
作成したショートカットの共有リンクをタップしてショートカットをインストールします。
その後、任意のWebサイトをSafariなどで開き、共有ボタンからErudaというショートカットを呼び出せば、ブラウザの右したにErudaの歯車アイコンが表示されます。
作成したショートカットの詳細については、インストールしたショートカットの内部を参照してください。