デベロッパーツールでデバック chrome

デベロッパーツールでデバック chrome

デベロッパーツール

Sources]パネル

Sourcesパネルは、CSSやJavaScriptのコードをデバッグできる機能である

この例では、JavaScriptコードが開かれている。

  • 1ページのソースファイルを一覧表示するnavigatorを表示する。
  • 2ソースビュー。
  • 3サイドバー。
  • 4コード整形ボタン。

Chromeのデバッガーが他のブラウザーと比較して優れている点は、デバッグ機能が充実していることである。

Call Stackをさかのぼって、実行済みの呼び出し元をデバッグする機能

 まずはデバッグでブレイク(=停止)したときにスタックを逆回転できる機能だ。具体的には、停止したときにCall Stackグループには関数の呼び出し履歴が表示されているので、停止している関数よりも前の処理を右クリックして、表示されるコンテキストメニューから[Restart frame]をクリックする(次の画面を参照)。この手順により、呼び出し元にさかのぼってデバッグできる。

高度な条件付きブレイクポイント

 次に、ブレイクポイントについてはあえて説明は不要だと思うので、さらに高度な条件付きブレイクポイントの指定の仕方について、以下のスクリーンキャプチャ画像で説明しよう。