リモートWeb開発者ツール「Vorlon.JS」

2015-11-18

Web開発者ツールといえば、ブラウザに付属されている開発ツールやFirebug、Dragonflyなどを思い浮かべる方が多いでしょう。これらの開発ツールはブラウザに大きく依存しています。
今回紹介するのは、プラットフォームに依存しないリモートWeb開発者ツール「Vorlon.JS」です。

Vorlon.JSについて

Vorlon.JSは、Microsoftが開発しているオープンソースプロジェクトです。node.jsとsocket.ioが利用されています。
このツールは、ChromeのDevToolsなどと同様にDOMやネットワークなどの情報を確認するための開発ツールです。

Vorlon.JSの特徴は、ブラウザ上で開発ツールが動作します。そのためブラウザやOSに依存することなく、1つの開発ツールの画面から複数の閲覧環境を同時にデバッグすることができます。
具体的に、WindowsやMac、スマートフォンのブラウザを、ひとつのWeb開発ツールで確認できるということです。

主な機能に以下のものがあります。

• DOM Explorer
• Obj. Explorer
• XHR
• Network Monitor
• Resources Explorer
• My Device
• Unit Test
• Best practices
• Interactive Console パネル
• Modernizr パネル

「Dom Explorer」の見た目

ブラウザ付属の開発ツールと同様に、HTMLやCSSの編集も可能

「My Device」では閲覧環境を確認できる

これらの機能以外にプラグインを作成すれば、タブを追加することもできます。

Vorlon.JSを立ち上げる

Vorlon.JSを立ち上げてみます。

Windowsやnodebrewを使っている方は、ターミナルに下記のコマンドを入力します。

$ npm i -g vorlon
$ vorlon

Macにnode.jsをインストーラーなどを使用してインストールした方は、sudoを追記して立ち上げます。

$ sudo npm i -g vorlon
$ sudo vorlon

サーバーが立ち上がったら、http://localhost:1337にアクセスし、ダッシュボードを確認します。

次に、Vorlon.JSのダッシュボードに記載されているscript要素をHTMLファイルに追加すれば、Vorlon.JSを立ち上げたパソコンで開発ツールを利用できるようになります。

ただしどのscript要素よりも一番上にvorlon.jsを読み込むようにしましょう。一番下にvorlon.jsを読み込んでしまうと、console.logを記述してもコンソールに表示されません。
必ずどのscript要素よりも一番上にvorlon.jsを読み込みましょう。

Vorlon.JSに記載されているscript要素

<script src="http://localhost:1337/vorlon.js"></script>

スマートフォンでも使えるようにする

先ほどの方法はVorlon.JSを立ち上げたパソコンで動作しますが、他のパソコンやスマートフォンなどでは動作しません。サーバーを別に立ち上げ、script要素に手を加える必要があります。

今回サーバーは、BrowserSyncを利用します。
BrowserSyncをグローバルにインストールした状態で、確認したいWebサイトのディレクトリに移動し、下記のコマンドを入力します。

$ browser-sync start --server --files="./*.html"

BrowserSyncが立ち上がったら、下記のようなAccess URLsが発行されるはずです。

[BS] Access URLs:

       Local: http://localhost:3000
    External: http://192.168.xx.xx:3000

          UI: http://localhost:3001
 UI External: http://192.168.xx.xx:3001

「External」に記述されているIPアドレス（192.168.xx.xx）をコピーし、HTMLに記述しているscript要素の「localhost」をコピーしたIPアドレスに置き換えます。

<script src="http://localhost:1337/vorlon.js"></script>

IPアドレスに置き換えた例

<script src="http://192.168.xx.xx:1337/vorlon.js"></script>

HTMLのscript要素を書き換えたら、パソコンと同じWi-Fiにつながっているスマートフォンから、BrowserSyncのExternalのURL（例: http://192.168.xx.xx:3000）にアクセスします。

うまく動作すれば、Vorlon.JSのダッシュボードの「CLIENT LIST」に端末名が追加されます。

むすび

スマートフォンのデバッグをするときに、「iOS Sumilatorを立ち上げて、Safariでデバッグ」みたいなことをやっており、非常に面倒でした。
これで楽できそう。

ツイート