console.log()メソッドの値を確認する
JavaScriptの教本などでは「console.log()」を使ってプログラムの実行結果を表示させる方法などが紹介されていることがあります。しかし、このメソッドを使って値を表示させたい場合、ブラウザには直接表示されません。ここではGoogle Chromeでconsole.log()メソッドの値を確認する方法を紹介します。
デベロッパーツールの使用
console.log()の値を表示するにはデベロッパーツールを利用します。Google Chrome場合、Windowsであれば【F12】あるいは【Ctrl+Shift+i】、Macであれば【command+option+i】でデベロッパーツールを開くことができます。

写真の赤枠で囲んだ部分がデベロッパーツールで、上部(青矢印)にはパネルの選択メニューがあります。それぞれのパネルには次のような機能があります。
各パネルの機能
パネル | 機能 |
---|---|
Elements | HTML/CSSのタグやスタイルを検証 |
Console | JavaScriptのエラーやログの確認 |
Sources | CSSやJavaScriptのコードをデバッグ |
Network | ブラウザの通信内容を確認 |
Performance | ブラウザで使用するCPUの状態を確認 |
Memory | ブラウザが使用するメモリの状態を確認 |
Application | ブラウザ内のクッキーやストレージを確認 |
Security | 混合コンテンツや証明書の問題を確認 |
Lighthouse | サイトパフォーマンスの検証 |
Consoleパネルで値を確認
console.log()メソッドの値を確認するにはデベロッパーツールの「Console」パネルを開きます。表示する値がある場合にはここに表示されます。
例えば、HTMLファイルの中に次のようなJavaScriptコードを書いた場合、Consoleパネルには「50」と表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script>
const a = 20;
const b = 30;
const sum = a + b;
console.log(sum);
</script>
</head>
<body>…</body>
</html>
