ITエンジニア/デザイナ向けにオープンソースを毎日紹介

今はWebブラウザの種類も増え、かつスマートフォンまであるなどWebサイトの作成も大変になっています。しかも開発ツールの使いやすいブラウザ、使いづらいブラウザもあり、開発に時間がかかります。

そんな現状を打破できるかも知れないのがVorlon.JSです。Vorlon.JSを使うと多くのWebブラウザのデバッグを一元管理できるようになります。

Vorlon.JSの使い方

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のオープンソース・ソフトウェアです。

Vorlon.JS

MicrosoftDX/Vorlonjs

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2