スマートデバイス用Webブラウザー向け開発コンソール「Eruda」
UI開発者 渡邉2018年5月現在、メジャーなデスクトップ用Webブラウザーには標準で開発コンソール（開発ツール）が付属しています。DOMインスペクター、コンソール、JavaScriptデバッガー、スタイルエディター、パフォーマンス測定、メモリービューアー、ネットワークモニター、ストレージ表示など、様々な機能が追加されており、今もなお各Webブラウザーベンダーによって開発が続けられています。
スマートデバイス用Webブラウザーにも同様の仕組みが存在しており、USBケーブルでコンピューターに接続することで、iOS Safari、Google Chrome、Firefox for Mobileはデスクトップ用Webブラウザーとほぼ同等の開発コンソールを利用することができます（リモートデバッグと呼ばれています）。
しかし、リモートデバッグには2つの欠点があります。1つ目は、ホストとなるコンピューターが必須であること（特にiOS Safariは、macOSマシンならびにMobile Safariと同一バージョンのデスクトップ版Safariが必須です）。2つ目は、iOS Safari、Google Chrome、Firefox for Mobile以外のスマートデバイス用Webブラウザー（特に、古いAndroidのWebViewを利用した、スマートデバイスメーカー独自のもの）ではリモートデバッグが利用できないことです。
そんなときに重宝するのが、これから紹介する「Eruda」というスマートデバイス用Webブラウザー向け開発コンソールです。昔利用されていた、「Firebug Lite」を高機能化したようなものだといえば、古くからWeb開発に従事されてきた方々にはわかりやすいと思います。
任意のスマートデバイス用Webブラウザーで、前述したEruda公式サイトを閲覧してみてください。「Trigger Error」ボタンがあるのでタップしてみると、デスクトップ用Webブラウザーに付属の開発コンソールのようなものが、スマートデバイスの画面下方に表示されます。
右下に薄く表示されている歯車アイコンをタップすると、コンソールの表示・非表示を切り替えることができます。
よく見てみると、DOMインスペクター (Elements)、ネットワークモニター (Network)、リソースビューアー (Resources)、ソースコードビューアー (Sources)、各種情報 (Info)、スニペット群 (Snippets)、設定 (Settings) といった項目があるのがわかります。
2018年5月現在、プラグイン（追加）機能としてFPS情報 (FPS)、実装機能チェック (FEATURES)、ベンチマーク (BENCHMARK)、位置情報 (GEOLOCATION)、各種タイミング測定 (TIMING)、メモリービューアー (MEMORY)、JavaScriptコード実行 (CODE)が用意されています。
Erudaのソースコードに付与されたソフトウェアライセンスはMIT Licenseであるため、プロジェクトへの組み込みも容易です。
JavaScriptブックマークレットにも対応しており、任意のページで簡単に開発コンソールを起動できる点もうれしいところです。
より詳細な利用方法は公式GitHubのREADME.mdに譲りますが、前述した機能だけでも非常に多様で、高機能であることがわかります。
Erudaは、開発環境に制限のある開発者の方々にぜひとも利用してみていただきたいツールの1つです。
Happy Hacking!