BT

JavaScriptのコードフローを視覚化するTraceGL

| 作者: Zef Hemel フォローする 0 人のフォロワー , 翻訳者 徳武 聡 フォローする 1 人のフォロワー 投稿日 2013年5月7日. 推定読書時間: 5 分 |

原文(投稿日:2013/04/23)へのリンク

Rik Arends氏がTraceGLをリリースした。これは、トレースでバッキングを利用してJavaScriptアプリケーションをデバッグするツールだ。ブラウザベースのアプリケーションやNode.jsを使ったアプリケーションのデバッグを簡単にするため、このツールはアプリケーションの実行をキャプチャし視覚化する

 

TraceGLはふたつの部分で構成されている。Node.jsベースのサーバとブラウザで動作するWebGLベースのクライアントだ。クライアントは4つの部分に分割されており、左上にトレースマップ、右上にトレースのズームイン、左下にスタックトレース、右下にコードが表示される。変数の上にマウスを置くと、変数の値を表示する。加えて、実行パスの制御フローを視覚化する。

このツールについて、作者であるRik Arends氏に話を聞いた。

なぜTraceGLが必要なのでしょうか。ブラウザに搭載されているデバッガでは不十分なのですか。

ブラウザのデバッガは次第に高機能になっていますが、'ブレイクポイント/ステップ'モードで動作します。まず、どこにブレイクポイントを置けばいいか把握しなければなりませんし、調べたい関数をステップオーバしてしまったら、最初からやり直さなければなりません。トレースを使えばすべての実行は記録されます。つまり、ステップを使わずに、すべてのロジックを一度に把握し、変数、関数の引数を見ることができるのです。検索やデータ集約の視覚化もできます。何かを見逃すことはありません。また、レコードなので、プログラムを中断する必要がありません。とりわけ、イベントベースのコードでは、ブレイクポイントを置いても振る舞いを確認するのは難しいですが、コードをトレースすでば振る舞いはより自然に把握できます。レコード結果は共有できるので、品質保証プロセスでデバッグを支援する新しい方法を生み出せます。

TraceGLは私自身のコードやjQueryのようなライブラリについてたくさんのことを教えてくれました。

特にどのようなアプリケーションで利用すると便利ですか。

コードがたくさんあればあるほどトレースは便利になります。特にすべてを自分で書いていないコードの場合はそうです。複雑なHTML5アプリケーションに使えば、そのアプリのコードについてたくさんのことがわかるでしょう。UI周りの作業をしているときにコードがどのように動いているか確認できるのは素晴らしいことです。また、Node.jsに利用するのも便利です。Node.jsは完全にイベント駆動なので、ブレイクポイントを使ったデバッグではなくトレースを使ったデバッグの方が自然です。クロージャスタックが利用できるので関数をクリックするだけで、コールバックに入ったり、コールバックから抜けたりできます。これはとても便利です。

TraceGLはどのように動作しているのでしょうか。JavaScriptのVMに統合されているのですか。トレース対象のコードをインストルメント化するのですか。

TraceGLはプロキシそしてファイルサーバとして動作します。そして、トレース対象のJavaScriptをインストルメント化します。CoffeeScriptがJavaScriptをコンパイルするのと同じ方法です。私はMarijn Haverbekeが作った素晴らしいパーサーであるAcorn JSを使い、ソースを壊さないように変更しています。変更したソースを実行するときは、すべてのコードフローはWeb Socketコネクション経由でノードのプロセスからUIへログ出力され視覚化されます。つまりTraceGLはJavaScriptのVMへのデバッグようのコネクションを必要としないのです。モバイル上のコードもNode.jsのバックエンドも同じように簡単にトレースできます。

TraceGLのUIはどのような技術を使っていますか。

TraceGLには多量のデータが流れ込んできますので、大量のテキストを表示しスクロールする必要がありました。試しにUIをすべてWebGLで記述し、すべてのテキストを静的なVertexBufferで描画しようと決めました。つまり、スクロールやズーミングをしたときに、テキストの大きな塊を描画するドローコールを1回だけするようにして、JavaScriptの処理がほとんど発生しないようにしたのです。そして、ダーティリージョンを処理するUIツールキットとUIのスタイリングのためのGLSLシェーダコンパイラを書きました。つまり、一切CSSを使っていないのです。しかし、シェーダのフレグメントはかけます。すべてのインタラクションはレイピッキングとJavaScript DOMのシェーダ変数へのデータバインディングが実現しています。これを実現しようとすると、Retinaスクリーンを扱わなければなりませんが、上手く動作しています。私は元々、C++のグラフィックコーダーだったので、HTMLのリフレッシュを抑えて高速なブラウザUIを実現できました。

CoffeeScriptのようなJavaScriptへのコンパイルを行う言語でも利用できますか。

CoffeeScriptコンパイラの出力結果をインストルメント化し表示できます。しかし、オリジナルのCoffeeScriptコードへマッピングする機能はサポートしていません。

TraceGLはエディタでもIDEでもない。LightTableのような"ライブプログラミング"のような使用感を与えてくれる。LightTableが個々のクロージャ関数の結果を表示し編集して表示結果を変えることができるのに対して、TraceGLは自身のエディタとTraceGLのUIを使って、コードフローを視覚化できる。

TraceGLはウェブサイトから入手できる。価格は14.99ドル。単一のJavaScriptファイルとして配布され、Node.jsとWebGLをサポートするブラウザが動作する環境で動作する。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT