Web開発者ツールといえば、ブラウザに付属されている開発ツールやFirebug、Dragonflyなどを思い浮かべる方が多いでしょう。これらの開発ツールはブラウザに大きく依存しています。
今回紹介するのは、プラットフォームに依存しないリモートWeb開発者ツール「Vorlon.JS」です。
Vorlon.JSは、Microsoftが開発しているオープンソースプロジェクトです。node.jsとsocket.ioが利用されています。
このツールは、ChromeのDevToolsなどと同様にDOMやネットワークなどの情報を確認するための開発ツールです。
Vorlon.JSの特徴は、ブラウザ上で開発ツールが動作します。そのためブラウザやOSに依存することなく、1つの開発ツールの画面から複数の閲覧環境を同時にデバッグすることができます。
具体的に、WindowsやMac、スマートフォンのブラウザを、ひとつのWeb開発ツールで確認できるということです。
主な機能に以下のものがあります。
「Dom Explorer」の見た目
ブラウザ付属の開発ツールと同様に、HTMLやCSSの編集も可能
「My Device」では閲覧環境を確認できる
これらの機能以外にプラグインを作成すれば、タブを追加することもできます。
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でデバッグ」みたいなことをやっており、非常に面倒でした。
これで楽できそう。