Chrome/Firefox の JavaScript Debugger でステップ実行時にライブラリ・フレームワークをスキップする

  • 142
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

JavaScript のデバッガ、便利ですよね。つかって、ますよね!

Chrome, Firefox 両方の Developer Tool (Web Inspector) には JavaScript デバッガが付属しています。両者には Event Listener Breakpoints 機能が存在し、特定イベントのリスナ全部にブレークポイントを仕掛ける事が可能です。

しかし、jQuery の $.on, $.bind, その他 $.click(fn) 等でイベントハンドラを定義すると jQuery の中で addEventListeners が呼ばれ内部で処理をした後に実際に jQuery に渡した関数が呼ばれます。
そのため、JavaScript デバッガは jQuery 内部でブレークし本来飛んでほしいはずの関数に一発で飛んでくれません。

そこで Firefox には Library black boxing, Chrome には Developer Tools experimentals の一つに Skip stepping through sources with particular names という機能が存在します。

Firefox は UI がもう整っていてスキップしたいファイルの横にあるボタンを押す事で black box とする事ができて、black box されているソースはステップ実行でスルーされる仕様のようです。こちらは既に公式のドキュメントが存在するためリンクに留め、詳細な手段は割愛します: https://developer.mozilla.org/en-US/docs/Tools/Debugger#Black_boxing

Chrome はまだ Experimental 扱い (chrome://flags からの有効化が必要) でドキュメントもなさそうなので以下に。

  1. chrome://flags で "Enable Developer Tools experiments." を有効化する
  2. Chrome を再起動
  3. Developer Tool を開いて、右上歯車→Experiments→Enable frameworks debugging support をオン
  4. Developer Tool を一度 閉じてもういちど開く
  5. Developer Tool 右上歯車→General→Sources→Skip stepping through sources with particular names のチェックを入れる
  6. Pattern にスキップしたいファイルの一部を入れる (jquery 等)

これでとりあえず jQuery 等をステップ実行時にスルーする事ができました。Firefox みたいに UI ととのって non experimental になるのが待ち遠しい。

確認

  • Chrome Version 34.0.1797.2 dev

参考