JavaScript

JavaScriptでは必須!コンソールの表示とエラーの見方

コンソールに表示

コンソール(Console)は、JavaScriptで取得した値を確認する時になどに使うもので、開発などする際にもよく使うものです。

記述としては、「cosole.log(引数)」の引数にコンソールに表示したい値を渡すことで、コンソールに表示がされます。

Google Chromeでコンソールを実際に使ってみる

実際に使用する方法です。例として、下記のコードでコンソールに「テストです」と表示してみます。

  <script>
    console.log("テストです。")
  </script>

Google Chromeでコンソールを確認するには、画面上で右クリックを押して下記のメニューから「検証」を押します。

検証を押すと、下記のようなメニューが表示されるので、その中から「Console」を押します。

そうすると、テストコードのconsole.logの引数とした「テストです。」が表示されたことがわかります。

エラーの表示

検証(デベロッパーツール)のコンソールは、console.logを使った時に使用するだけでなく、JavaScriptの記述に間違いがある場合にエラーが表示されます。

例えば、下記のような記述の場合

    console.log(テストです)

このようにエラーがでます。

エラーの内容は「テストです」は定義されていないというものです。

別に解説しますが、文字列を扱う場合には、「”(ダブルクォーテーション)」もしくは「’(シングルクォーテーション)」で囲う必要があります。

なので、改めてコードを直してコンソールを確認すると

 console.log("テストです")

今度はエラーがなく「テストです」が表示されています。

JavaScriptを記述していく中で思った通りの挙動がされない場合、何らかのエラーが発生しています。

そんな時は、コンソールを開いて、エラーの内容を確認し、コードを修正していきます。