Chrome DevTools

Chrome DevTools での JS の debug について

JavaScript のデバッグ内容は以下の通りです

• ブレークポイントの設定: ソースコードの特定の行にブレークポイントを設定して、実行を一時停止します。ブレークポイントでコードの状態や変数の値を確認できます。

• ステップ実行: コードのステップごとに実行を進めます。ステップイン（関数内に入る）、ステップオーバー（現在の行を実行し、関数内には入らない）、ステップアウト（現在の関数から抜け出す）の操作を使用して、コードのフローをトラッキングできます。

• 変数の監視: 実行中の変数の値を監視できます。ブレークポイントで変数の値を確認したり、ウォッチ式を設定して特定の変数を監視したりできます。

• コンソールの使用: デバッガのコンソールパネルを使用して、コードの実行中に JavaScript の式やコマンドを評価できます。変数の値の表示や操作、関数の呼び出し、エラーメッセージの表示などが可能です。

• エラーログの表示: コンソールパネルやエラーパネルを使用して、JavaScript のエラーメッセージや警告を表示できます。エラーや問題を特定できます。

これらの機能を使用することで、Google Chrome の開発者ツールを活用して JavaScript のデバッグを行うことができます。

Debug 手順

• 開発者ツールを開き Sources → 確認したいファイルを選択

ブレークポイント（Breakpoints）

• 停止位置の指定

ステップ実行

• Resume 押下で次のステップに進む

変数の監視

• ブレークポイント時点での各変数の確認が可能

コンソールの使用

• Console に直接 js を記述する事で挙動の確認が可能

エラーログの表示

• Console で js のエラーログの確認が可能