今はWebブラウザの種類も増え、かつスマートフォンまであるなどWebサイトの作成も大変になっています。しかも開発ツールの使いやすいブラウザ、使いづらいブラウザもあり、開発に時間がかかります。
そんな現状を打破できるかも知れないのがVorlon.JSです。Vorlon.JSを使うと多くのWebブラウザのデバッグを一元管理できるようになります。
Vorlon.JSはnpmでインストールできます。
$ npm install vorlon
そしてvorlonコマンドでサーバが立ち上がります。
$ vorlon
後はこのVorlon.JSが出しているJavaScriptをデバッグしたいWebページ内に組み込みます。
<script src="http://localhost:1337/vorlon.js"></script>
これで準備は完了です。例えば以下のようになります。左側のブラウザがWebページにアクセスしていて、右側がVorlon.JSの画面になります。コンソールやDOM構造が見られるようになっています。
iOSのブラウザでアクセスしました。クライアントリストが2つになっています。Vorlon.JS上で切り替えてデバッグができます。
クライアントの画面に数字を出すこともできます。これで見分けがつきます。
DOMをクリックすると該当部分が赤い枠で囲まれます。
スタイル設定を確認することも可能です。
コンソールからJavaScriptを実行することもできます。
Vorlon.JSはWebSocketを使ってデバッグ情報をやり取りしています。Vorlon.JSが機能追加されてデバッグ機能が充実すれば、すべてのブラウザ（デスクトップもスマートフォンも）のデバッグセンター的な位置づけになりそうです。
Vorlon.JSはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。