Google Chromeのブレークポイント

Google ChromeのデバッグツールにはJavaScriptの処理を一時停止させることができるブレークポイントという機能があるので利用方法を解説いたします。

まずは基本的な使い方から。ブレークポイントを利用したいページでデベロッパーツールを開き「Sources」タブを表示し、左メニューのSourcesタブを選択し、ブレークポイントを利用したいファイルを開きます。

次に一時停止させたいコードの行番号をクリックすると、行番号に青いマークが付きます。その後、スクリプトを実行するとJavaScriptのスクリプトがその行で停止します。

ステップオーバー(ステップオーバー)のアイコンをクリックすると処理が1行づつ実行されます(正確にはちょっと違うけど)。

操作内容をアニメーションGifにしてみたのでご確認ください。

ブレークポイント

このようにコードを1行づつ実行し、現在の状態やソースコードを確認することができます。

ステップオーバー以外にも以下の様な方法でスクリプトを実行していくことができます。

レジューム レジューム

停止したスクリプトを再開します。

ステップオーバーステップオーバー

停止したスクリプトを1行づつ実行します。スクリプト内に関数があった場合でも関数にはジャンプしません。jQueryなどを利用している場合はこの方法がよいでしょう。

ステップインステップイン

停止したスクリプトを1行づつ実行します。スクリプト内に関数があった場合その関数の定義元にジャンプします。

ステップアウトステップアウト

停止したスクリプトの行を実行しスクリプト内に関数があった場合その関数の定義元にジャンプします。

ソースコード上にブレークポイントを設定

デベロッパーツール上からブレークポイントを設定するのが難しい場合は、JavaScriptのソースコード中に「debugger」キーワードを埋め込むことでもブレークポイントを指定することができます。

関連エントリー

jQueryで指定されたイベントの定義場所を取得する方法
Google Chrome 32でスマホのエミュレーションを行う
Google Chromeでスマホサイト制作
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
Google PageSpeed Insights でパフォーマンスチューニング

スポンサードリンク

«jQueryで指定されたイベントの定義場所を取得する方法 | メイン | CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」»