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内でエラー発生または演出が上手く動かない箇所の当たりをつけて、ブレークポイントを設定すると原因が見つかる可能性が高いです。
※流用される場合は自己責任でお願いします。
