Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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のあちこちを一度クリックしてみると面白いです.

yaotti
Qiitaを作っているIncrements株式会社の創業者
http://yaotti.hatenablog.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした