traceGL導入編

satkakuです。

traceGLというJavaScriptアプリケーションのデバッグツールがリリースされました。クライアントサイドでもサーバーサイドでも、デバッグ結果をブラウザ上で出力してくれるらしいということで、試してみました。

とりあえず導入編ということで、Node.jsで動かしたアプリで試してみようと思います。

traceGLはここから購入できます。$14.99なので、今だと1500円くらいですね。only a few cups of coffeeと書いてありますが、マクドナルドなら15杯です。

購入処理が済むと（PayPalを使いました）、tracegl.jsがダウンロードできます。これ一つです。

それでは早速サンプルアプリを作って試してみます。

% express tracegl

expressでひな形作成後、npm installで必要なモジュールを入れておきます。
その後、出来上がったtraceglディレクトリの上の階層にtracegl.jsを置きます。

では起動してみましょう。

% node ../tracegl app.js
[trace.GL] See your code. This product has a commercial license.
[trace.GL] WebGL trace UI: http://localhost:2000
[trace.GL] Checking for update...Express server listening on port 3000
up to date.

これだけ！

expressのアプリケーションが3000番ポートで動いており、traceGLの画面は2000番ポートで動いています。

早速、ブラウザにて、http://localhost:3000/ と http://localhost:2000/ にアクセスしてみます。

表示されました！http://localhost:3000/ をリロードしてみると、リアルタイムでtraceGLの画面も更新されていきます。

右上部分のコードを一行クリックすると、左下にスタックトレース、右下にコードが表示されるようです。

とりあえず開発で使ってみて、色々と試していこうと思います。