JavaScriptコンソールログでデバッグする方法

JavaScriptでコンソールログを使ってデバッグする方法についてです。

console.logを使ってコンソールにログを表示できます。

例えば次のようなJSのコードを書いたとします。

  <script>
    var test= 1; 
     console.log("test:"+test) ;
  </script>

このtestという変数の中身を確認したいと思います。

まずは、Chromeの開発者ツールを開きます。
開発者ツールを開くにはF12を押します。(Macはcommand + alt + i)

Consoleの箇所を確認します。
Consolenには次のように表示されており、変数の値を確認することができます。