Web制作ツール、アプリ

ChromeデベロッパーツールでWebサイトのJavaScript処理をBreakpointsで止める方法

Webサイト制作でページ上に演算処理や演出等を付ける場合JavaScriptを使って構築します。
JavaScript構築中にエラーが発生したり演出が上手く動かないことがあると、そのエラー箇所を探す必要があります。そんな時にChromeのデベロッパーツールのBreakpointsを使うとJavaScript処理を止めたい箇所で止めることが可能です。
今回はChromeデベロッパーツールでWebサイトのJavaScript処理をBreakpointsで止める方法をご紹介します。

Chrome DevTools(デベロッパーツール)を起動

ChromeブラウザでJavaScript処理を止めたい構築中のWebサイトを表示します。
Chromeブラウザでキーボードの「F12」キーをクリックするとDevTools(デベロッパーツール)が起動します。(Windows環境)

(デベロッパーツール起動イメージ)
デベロッパーツール起動イメージ

JavaScriptのBreakpoints(ブレークポイント)を設定

DevTools(デベロッパーツール)より、以下の通りBreakpoints(ブレークポイント)を設定します。

  • 1.「Sources」タブを表示します
  • 2.左の「Page」エリアから階層ページまたはJsファイルを探します
  • 3.ページまたはJsファイル内のJavaScript処理より、止めたい箇所をクリックします
  • 4.DevToolsの「Breakpoints」でブレークポイント箇所にチェックが入ってるか確認します

(ブレークポイント箇所にチェックイメージ)
ブレークポイント箇所にチェックイメージ

ページを更新(F5キーをクリック)して再表示

ブレークポイントを設定したら、ページを更新(F5キーをクリック)して再表示します。

(ブレークポイント設定後のページ再表示イメージ)
ブレークポイント設定後のページ再表示イメージ

JavaScript処理のBreakpoints箇所で処理がストップします。
ページ上部に再生「▶」マークが表示されるのでクリックするとブレークポイント処理を通過しそのままページが表示されます。再生「▶」マーク右の「矢印」マークをクリックするとJavaScript処理の次の処理に進みます。

JavaScript内でエラー発生または演出が上手く動かない箇所の当たりをつけて、ブレークポイントを設定すると原因が見つかる可能性が高いです。

 
※流用される場合は自己責任でお願いします。