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