Chrome デベロッパーツールでのJavaScriptデバッグ方法

Chrome デベロッパーツールでは、強力なJavaScriptデバッグ機能をもっています。
ブレークポイント設定やステップ実行で、効率的にバグの原因を見つけることができます。

【コンテンツ】

  1. パネル外観
  2. ブレークポイントを設定する
  3. サイドバーにある各ペインの説明

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Google Chrome 35

パネル外観

JavaScriptのデバッグは、Sourcesパネルで行います。
右サイドバーには一番上に実行を制御するボタンがあり、その下にデバッグ情報がいくつかのペインに分かれて表示しています。

デバッグパネル外観

各制御ボタンの説明は以下になります。

Pause script execution ボタン:Pause script execution(F8)
実行を停止します。

Resume script execution ボタン:Resume script execution(F8)
次のブレークポイントまで実行を再開します。
ブレークポイントで実行が停止すると、[Pause script execution]がこのボタンに変わります。

Step over ボタン:Step over next function call(F10)
1行ずつコードを実行しますが、関数処理も1行とみなし呼び出した関数の中には移動しません。

Step into ボタン:Step into next function call(F11)
1行ずつコードを実行しますが、呼び出した関数の中にも移動します。

Step out ボタン:Step out of current function(Shift + F11)
関数の処理を終え、呼ばれた親の関数に戻ります。

Deactivate breakpoints ボタン:Deactivate breakpoints
ブレークポイントを無効にします。

Activate breakpoints ボタン:Activate breakpoints
ブレークポイントを有効にします。
このボタンは、Deactivate breakpoints ボタンとトグルになっています。

Pause on exceptions ボタン:Pause on exceptions
例外発生時の処理方法を指定します。

ブレークポイントを設定する

ブレークポイントを設定するには、行番号をクリックします。
設定したブレークポイントは青く表示されますが、サイドバーの[Breakpoints]ペインにも現れます。

ブレークポイントを解除するには、もう一度行番号をクリックします。

[Breakpoints]ペインの中にあるチェックを外すと、ブレークポイントは解除されませんが無効となります。そのとき色は薄い青に変わります。

ブレークポイント設定画面

設定したブレークポイントの上で右クリックするとメニューが表示され、ブレークポイントの解除や無効化ができます。

ブレークポイント設定メニュー

ブレークポイントは条件付きで設定できます。
行番号の上で右クリックし、[Add conditional breakpoint]を選択するか、
設定済みのブレークポイントの上で右クリックし、[Edit breakpoint]を選択します。

条件を入力するボックスが現れますので、真偽値を返す条件式を入力します。

条件入力ボックス画面

条件付きブレークポイントは色がオレンジになります。

条件付きブレークポイント画面

JavaScriptが実行されブレークポイントで停止すると、変数の値は[Scope Variables]ペインに表示されます。
またマウスカーソルをコード中の変数の上に合わせると、変数の値がバルーンで表示されます。

ブレーク時の変数値の確認画面

サイドバーにある各ペインの説明

Watch Expressions

任意の式や変数を登録すると、その内容が実行時に追跡できます。
登録は、+アイコンをクリックします。

Call Stack

関数内でさらに関数を呼び出したときに、スタックに積まれた実行途中の情報を確認することができます。

Scope Variables

実行中のスコープにある変数と値を確認できます。

Breakpoints

どこにブレークポイントを設定したか確認できます。

DOM Breakpoints

ElementsパネルでDOMエレメントに設定したブレークポイントを確認できます。

XHR Breakpoints

XHR(XMLHttpRequest)でsendを送ったときに停止するブレークポイントです。
+アイコンをクリックしてURLを設定します。

Event Listener Breakpoints

チェックを入れたイベントが発生したときにブレークします。

Event Listener Breakpoints リスト

Workers

Shared Web Workersの開始時に停止するかどうかを設定します。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ