読者です 読者をやめる 読者になる 読者になる

シアトルコンサルティング サービス開発ブログ

シアトルコンサルティング株式会社プロダクトソリューション事業部の開発ブログです

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/ にアクセスしてみます。

f:id:seattleservice:20130508095512p:plain

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

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

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