search
LoginSignup
124

More than 5 years have passed since last update.

posted at

updated at

色々なbreakpointを使ったJSデバッグ

Google Chromeのとても優秀なDeveloper Tools,の中でもよく使うブレークポイントの機能について簡単に紹介します.単純なブレークポイント以外にもJS特有の機能があるのだけれど,あまり使っている人を見ることがないので…
この投稿を読んだ後にはconsole.logやalertでprintデバッグをすることはないでしょう.

色々なBreakponts

Developer Toolsのブレークポイントは,ソースコードの特定の行でbreakするという一般的なブレークポイント以外にもいくつかあります.上部写真の右側のメニュー参照

  • Breakpoints
    • 普通のbreakpoint
  • DOM Breakpoints
    • Developer ToolsのElementsタブでDOMを右クリック→Break on...にて指定.特定のDOMのサブツリーや属性が変更されたとき,また該当DOMが削除されたときなどを指定してbreakする
  • XHR Breakpoints
    • 指定した文字列を含むURLにリクエストが飛んだときにbreak.
  • Event Listener Breakpoints

機能は名前とセクションを見た通りという感じです.

breakさせて何をするか

  • 右のScope Variablesセクションからそのスコープにある変数の値チェック
  • コンソールを開いてメソッド呼び出し
  • 右上メニューからステップ実行して動きを見る

など.色々試してみてください.

おまけ

右下の歯車をクリックすると色々設定できます.ショートカットキー一覧が見られるのも便利.

まとめ

JSデバッグ時になんとなく適当にconsole(+単純なbreakpoints)だけ使っている人も多いと思いますが,Developer Toolsのあちこちを一度クリックしてみると面白いです.

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
124