traceGLでクライアントサイドのJavaScriptの動きを見てみる

satkakuです。

昨日に引き続きtraceGLを色々試してみます。

昨日はサーバーサイドJavaScriptの出力を試したので、今日はクライアントサイドJavaScriptの出力を試してみようと思います。こっちのほうが使う機会は多いと思います。

まずは、昨日作ったサンプルページで、JavaScriptを読み込むよう追記しておきます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="javascripts/main.js"></script>

一つは、GoogleでホスティングされているjQueryを読み込み、もう一つは/javascripts以下につくったmain.jsを読み込みます。

main.jsは以下の通りです。

(function(){
  $('button').on('click', function(e){
    call(function(){
      val = $('.source input').val();
      $('.dest').text(val);
    });
  });
})();

function call(func) {
  func();
}

ややこしい書き方をしていますが、要は、inputに書かれた文字をdestに表示するだけのコードです。

これを試してみます。

クライアントサイドJavaScriptをtraceGLで出力するようにするためには、プロキシを通してアクセスする必要がありますが、その辺はtraceGLがよしなにやってくれます。
では、やってみましょう。http://localhost:3000はあらかじめアクセス出来るようにしておきます。

% node tracegl http://localhost:3000

前回同様、traceGLの画面はhttp://localhost:2000で立ち上がっています。ここでhttp://localhost:3000にアクセスしても、traceGLの画面には変化がありませんので、プロキシが立っているhttp://localhost:2080にアクセスします。

traceGL画面に表示されました。
ここで、http://localhost:2080の画面上で「show」をクリックしてみます。

traceGL画面にon、callが実行されていく様子がリアルタイムで表示されました。右上の画面で行を選択すると、右下にそのコードが表示されます。左下はスタックトレースですね。

いい感じで実行状況をトレースできているようです。

ここで、試しにコンソールから直接JavaScriptをたたいてみましょう。

callが呼ばれたことが追加されました。実際にcallの引数に何が渡ったか見たかったのですが、それは表示されないようです。

では、Google上にホスティングされているjQueryの実行はどうなるでしょうか？

すると今度はtraceGLには何も変化がありません。ローカルにあるJavaScriptのみトレースしてくれるようです。

気になって、http://localhost:2080でmain.jsを見てみると……

書き換えられてる！

ちなみに、traceGL画面で、右下の領域の気になるところをダブルクリックすると、編集していたSublime Textの該当箇所にジャンプしました。どこまで賢くジャンプしてくれるかは、このコード量だとよく分かりませんが、これは便利そうです。

引き続き色々触ってみようと思います。