外出先でWebサイトをデバッグする

4050 ワード
ブラウザ Shortcuts eruda JavaScript iOS JavaScript テキストリンク

はじめに

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の歯車アイコンが表示されます。

作成したショートカットの詳細については、インストールしたショートカットの内部を参照してください。

参考サイト