はじめに

Webサービスの開発をしていると、要件によっては様々なデバイス、ブラウザをサポートしなければならないことがあります。動作確認時や不具合の検証をする際は、それらのブラウザの開発ツールなどを使用してコンソール上のメッセージやDOMを確認することと思いますが、そのような手法が使えないケースも存在します。

モバイル端末における動作を確認したいけどケーブルが無い、検証対象のブラウザが機器に組み込まれたものである、などのパターンがそれに該当することでしょう。そして、そのような場合の動作確認は決して容易ではありません。SentryやRollbarといったバグトラッキングを使用して細かく情報を送信するという方法も考えられますが、インタラクティブな情報取得はできないため、何度もトライアンドエラーを繰り返すことになってしまう可能性もあります。

そこで解決策の1つになり得るのが RemoteJS です。

RemoteJSとは

RemoteJSは、動作検証をしたいブラウザとの間でセッションを確立することで、対象のブラウザでJSコードの実行といった操作を行うことが可能になります。

RemoteJSを使用することで、以下のようなことが実現できます。

ブラウザでの任意のJavaScriptコードの実行
スナップショットの取得
発生したイベントの監視

また、これらの機能は無料で利用することが可能です。

それでは、以下のセクションで使い方を見てみましょう。

使い方

セッションの確立

RemoteJSを利用するには、トップページの「Start Debugging」のボタンをクリックします。これによって、エージェントをインストールするためのコードが含まれたモーダルが表示されるので、必要なものをコピー&ペーストして使用します。

このモーダルでは、 Tag、JavaScript、Bookmarklet のいずれかを選択することが可能であり、それぞれ次のように利用します。

種類	用途
Tag	Webページ(HTMLファイル)に埋め込むことが可能な `script` タグです。このscriptにより、必要なJavaScriptコードのダウンロードと実行が行われます。以下に示すいずれの方法も使えない場合などに有用です。
JavaScript	検証対象のブラウザのコンソールで実行するJavaScriptコードです。コードをコンソールから実行するだけなので、非常に簡単に検証を開始することができます。
Bookmarklet	ブラウザのブックマークレートとして使用可能なコードです。

モーダルの表示例

RemoteJSによるデバッグ

上述したいずれかの方法で検証対象のブラウザとのセッションを開始すると、RemoteJSのデバッグ機能が利用可能となります。ここではいくつかの機能を見てみましょう。

JavaScriptコードの実行

RemoteJSの画面下部のエリアでは、任意のJavaScriptコードを実行することができます。例えば、以下のような button 要素の状態を確認したいとしましょう。

そのために、以下の querySelector を実行して要素を取得してみます。

document.querySelector('button.start-button')

すると、次のように対象のブラウザにおけるコードの実行結果が表示されます。

さらに、次のようなコードをRemoteJSから実行すると、

ブラウザ側の表示結果も変更されました。

このように、RemoteJSを利用することで、ローカルブラウザのコンソールを使用した場合とほぼ同等のインタラクションが可能となります。これによって、特定のオブジェクトの値の確認や、任意のイベントをトリガーさせることもでき、問題の特定に役立ちます。

スナップショット

RemoteJS上部のエリアからはスナップショットを撮影することも可能であり、リモートブラウザでの表示内容を確認することもできます。

最後に

この記事では、RemoteJSを利用することでデバッグが困難な端末、ブラウザでリモートデバッグする方法を紹介しました。通常の開発ツールや、バグトラッキングシステムを利用したトラブルシュートが最も一般的な不具合の原因究明方法となると思いますが、それらの手段が利用できない時の手段として、RemoteJSを選択肢に入れておくと良いかもしれません。