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>