コンソールでのデバッグ | ブラウザ開発者ツールの使い方 | JavaScript 超完全入門基本から発展までのすべて

INDEX

コンソールでのデバッグとは？

ブラウザの開発者ツールには、JavaScriptコードを確認・検証するためのコンソール（Console）が備わっています。コンソールを利用すると、変数の値を表示したり、処理がどこまで実行されたかを確認したり、エラーの内容を調べたりできます。

JavaScriptのプログラムが思った通りに動かない場合は、まずコンソールを確認するのが基本です。本記事では、コンソールの開き方から、よく使うメソッド、エラーメッセージの見方までを初心者向けに解説します。

まずはブラウザの開発者ツールを開き、コンソールを表示してみましょう。主なブラウザでは次のショートカットキーが利用できます。

ブラウザ	ショートカット
Google Chrome	`Ctrl + Shift + I`（Windows）または `Cmd + Option + I`（Mac）
Firefox	`Ctrl + Shift + I`（Windows）または `Cmd + Option + I`（Mac）
Microsoft Edge	`Ctrl + Shift + I`（Windows）または `Cmd + Option + I`（Mac）
Safari	`Cmd + Option + C`（Mac）

WindowsではF12キーでも開発者ツールを開くことができます。開発者ツールが表示されたら、Consoleタブをクリックするとコンソールが表示されます。

コンソールでは、JavaScriptコードを直接入力して実行することもできます。また、プログラム内でconsole.log()などを使用すると、実行中の値やメッセージを表示できます。

// コンソールにメッセージを表示する
console.log("Hello, World!");

// 変数の値を確認する
let count = 5;
console.log("カウント:", count);

実行すると、「Hello, World!」と「カウント: 5」がコンソールに表示されます。

コンソールには、console.log()以外にも便利なメソッドが多数用意されています。代表的なものを紹介します。

メソッド	説明	使用例
`console.log()`	通常のメッセージや値を表示します。	`console.log("Hello");`
`console.error()`	エラーメッセージとして表示します。	`console.error("エラーが発生しました");`
`console.warn()`	警告メッセージとして表示します。	`console.warn("注意してください");`
`console.table()`	配列やオブジェクトを表形式で表示します。	`console.table([{name: "Alice", age: 30}, {name: "Bob", age: 25}]);`
`console.time()`	処理時間の計測を開始します。	`console.time("処理時間");`
`console.timeEnd()`	`console.time()`で開始した計測を終了し、経過時間を表示します。	`console.timeEnd("処理時間");`

初心者のうちは、まずはconsole.log()を使いこなせるようになるだけでも十分です。慣れてきたら、用途に応じて他のメソッドも活用すると、より効率よくデバッグできます。

JavaScriptでエラーが発生すると、コンソールにエラーメッセージが表示されます。エラーの種類や発生した行番号も表示されるため、原因を特定する大きな手掛かりになります。

// 存在しない変数を使用
console.log(undeclaredVariable);

このコードを実行すると、ReferenceErrorが表示されます。これは「その変数は定義されていません」という意味です。

デバッグでは、やみくもにコードを書き直すのではなく、コンソールを使って原因を一つずつ確認することが重要です。

コンソールを活用する習慣を身につけると、原因を素早く見つけられるようになり、プログラムの修正も効率よく進められます。