phpstorm8 や webstorm8 で spy-js が使えるようになったらしいので試しに cocos2d-js のサンプルで使ってみる．ココで使ってるのは Cocos2d-JS html5 engine の部分．
起動するまで
Intellij IDEA で git のリポジトリからプロジェクト作る機能を使うか下記のように手動で取ってきて Open する．
$ git clone git://github.com/cocos2d/cocos2d-js.git --recursive
起動するまではここらへんと同じ．
Chrome などで開くときは，サンプルは samples/js-moonwarriors などにあるのでこの index.html を開く．
起動すると下記のような感じで使うことが出来る．
Tracking Exclusion
イベントスタックが多い問題の対応
使ってみるとわかると思うが cocos2d-js で spy-js を使うとイベントの詳細を見ようとしても基本的に cocos2d-js で使われているファイルがイベントスタックに表示されるため，自分がコーディングした部分を見つけるのが大変だったりする．
そこで spy-js はTracking Exclusionで不要なイベントやファイルをフィルタすることが出来る． Exclude したものはそれ以下のものが全て表示されなくなるのではなく対象ファイルだけ表示されなくなるのでライブラリとかをトレースに表示する必要がないならライブラリごとフィルタしてしまってよさそう．
たとえばこのように設定すると
さっきの大量のトレースが減る．
イベントが貯まって消えてしまう問題の対応
また external や devicemotion などのイベントが大量に発行されてみたいイベントが見つけにくくなる．さらに一度に表示されるイベントは 1000 件程度で特定のイベントのトレース見てても 1000 件消えた時点で消えてしまう．消えてしまうとトレースもできなくなるのでとても面倒．
なのでほしいイベントがとれたら全部除外するフィルタを設定するとよさそう．
その他
- ちなみに socket.io のイベントも見られるので サーバクライアントで socket.io 使ってる場合は追跡めっちゃ楽になる．
- node.js をサーバ側のアプリとして使っててそちらでも spy-js を使ってる場合，このフィルタ選択は共有されてしまい，クライアントとサーバでそれぞれ別のフィルタを使えない．同時に使う場合はうまくしないとほしいイベントも消えてしまうかも．
- バグっぽいが ”Remove All” を使って消すとその後のイベントが全くキャッチされなくなる．されなくなったらブラウザで開いてるページを再読み込みするとまた表示される．
- フィルタ出来るのはイベント単位またはファイル単位となっている様子．なので同じファイル内で同じイベントの処理をいろいろ追加してる場合はファイルを分けるという対応をすることで対応はできる．うまく検索する機能がほしい場合はこのチケット に vote しよう．
参考文献
Spy-js: WebStorm secret service | JetBrains WebStorm Blog
http://blog.jetbrains.com/webstorm/2014/04/spy-js-webstorm-secret-service/#settingsWebStorm+Spy-jsの使い方 - Qiita
http://qiita.com/laco0416/items/985044f0019ebef6cb2c