Chrome Developer Tools の使い方 02 – Scripts パネルを使ってみよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回は Scripts パネルについてです.

VIDEO

チュートリアルムービー

EXPLANATION

動画解説中にタイプしてたテキストです.

Chrome Developer Tools の使い方

Script パネルを使ってみよう!!

以前制作した tm.mario.js というスクリプトを
デバッグしてみましょう.

おっと. エラーがありますね.
「Merio というメソッドはありません」というエラーが出ています.

綴りミスですね. こういったミスは Scripts パネルを見れば簡単にわかります.

あれ? 次は左を押しても左に進んでくれません.
こういう時は Breakpoints が有効です.

左に進む処理を行なっている箇所に Breakpoint を仕掛けてみましょう.

通っていませんね. どうやら key code が違うようです.

きました.ちゃんと動きました.
この機能はコードを辿る際にも有効です.

ちなみに, コード内に debugger; と書くと Breakpoint 同様そこで止まってくれます.
これを使えば簡単に条件付き Breakpoint を設定することができ
非常に効率的に開発することができます.

試しに地面についた瞬間にブレークするようにしてみましょう.
止まりましたね.

他にもスコープ内の変数を見たり, Call Stack を見ることもできます.
もはや IDE ですね!!

他にもまだまだ便利な機能が沢山あるので色々と試してみてください.

以上, ありがとうございました.

TIPS

Break Point の設置

Break したい箇所の行番号をクリックするとそこにBreak Point(青いアイコン)が設置されます. そこを処理が通ると一時停止します.

停止中は変数にマウスを乗っけると変数のプロパティがツールチップ表示されます. 他にも右側の Scope Variables でスコープ内の変数を見たり, Call Stack でどういう経由でその Break Point にたどり着いたのかをさかのぼって追うことができます.

また コード内に debugger; と書くとそこを Break Point として認識してくれるので, 条件分岐 Break をしたい際などに活用してください.

Pause, resume and step through code controls

右側のパネル上部にあるボタンで処理の停止, 続行やステップ実行を行うことができます.

左から

"続行/停止", "ステップオーバー", "ステップイン", "ステップアウト", "Break Point の無効化"

になっています.

Scripts パネルでのショートカットキー一覧

Windows Mac その他のプラットフォーム
続行 F8 Command-/(forward slash) Control-/(forward slash)
ステップオーバー F10 Command-'(apostrophe) Control-'(apostrophe)
ステップイン F11 Command-;(semi-colon) Control-;(semi-colon)
ステップアウト Shift-F11 Shift-Command-;(semi-colon) Shift-Control-;(semi-colon)
次の呼び出しフレーム Control-.(period)
前の呼び出しフレーム Control-.(comma)

次回は Console パネルについてです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT

  • DQNEO より:

    こんにちわ。
    大変勉強になりました。

    “Debugger;” とありますが、先頭大文字だとエラーになりました。
    “debugger;” ならいけました。

    • phi より:

      こんにちは.
      ご指摘ありがとうございます.
      修正しました.

      あと, ブログでの紹介ありがとうございます.
      今後ともよろしくお願いします.