console.log()メソッドの値を確認する

JavaScriptの教本などでは「console.log()」を使ってプログラムの実行結果を表示させる方法などが紹介されていることがあります。しかし、このメソッドを使って値を表示させたい場合、ブラウザには直接表示されません。ここではGoogle Chromeでconsole.log()メソッドの値を確認する方法を紹介します。

デベロッパーツールの使用

console.log()の値を表示するにはデベロッパーツールを利用します。Google Chrome場合、Windowsであれば【F12】あるいは【Ctrl+Shift+i】、Macであれば【command+option+i】でデベロッパーツールを開くことができます。

写真の赤枠で囲んだ部分がデベロッパーツールで、上部(青矢印)にはパネルの選択メニューがあります。それぞれのパネルには次のような機能があります。

各パネルの機能

パネル機能
ElementsHTML/CSSのタグやスタイルを検証
ConsoleJavaScriptのエラーやログの確認
SourcesCSSや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>

検索

MENU

サンプルコード集

Webの基礎知識

coming soon…

  • コンテンツ制作中
PAGE TOP