デベロッパーツール

Chromeのようなブラウザには、デベロッパー（開発）ツールと呼ばれる便利な機能があります。

HTMLの要素やCSSをブラウザ上で変更したり、
モバイルのエミュレート（模倣）をしたりできます。

デベロッパー（開発）ツールでもコンソールが使えます。
chromeでは、コンソールパネルと呼ばれています。

JavaScriptの命令文を入力して、Enterキーを押すと、
すぐに結果が出力されます。

Chromeをインストールするには、以下のサイトからダウンロードしましょう。

Google Chromeがアクティブになった状態で
F12キー、もしくは、Ctrl+Shift+iキー
（Macは、Option+Command+i）
を押すと、デベロッパーツールが表示されます。
1.developer_tool

デベロッパーツールの画面の大きさは、以下のショートカットで見やすいように変更できます。

JavaScriptの命令を直接実行したり、
JavaScriptから出力された、
エラーやインフォメーションなどを確認できます。

左下に、Consoleと表示されているのがわかります。

文頭が「 > 」となっている行にJavaScriptの命令文を入力し、
Enterキーを押すと命令文が実行されます。

試しに、1+1と入力し、Enterキーを押してみましょう。
すると2という計算結果が表示されます。

画面上方の真ん中のConsoleをクリックすると、
コンソール画面が広く表示されます。

複数行を入力するときは、
Altを押しておいて、Enterを押す、
もしくは、Shiftを押しておいて、Enterを押して、
改行します。
2.var

変数a を使って、
a=1+1と入力、改行して、
a+1と入力、Enterを押すと
３と表示されます。

ちなみに、a = 1+1 は、そのまま記憶されているため、
a を入力して、Enterを押すと、
２と表示されます。

たとえば、変数とは、
ショッピングサイトでカートに入れた商品の値段のように、
その都度、変わるものをイメージしてもらうといいかもしれません。

値段という変数に、Aという商品の値段が入るときもあれば、
Bという商品の値段が入るときもあるということです。

また、

<!DOCTYPE html>

<head>

<title>JavaScript サンプル</title>

</head>

<body>

console.log(“ここに表示したい文章や式が入る”);

</script>

</body>

</html>

を書いたHTMLファイルを作成し、

Chromeで開くと、
Consoleの画面に、
“ここに表示したい文章や式が入る”
が表示されます。

入力したJavaScriptがうまく動かないときは、コンソールを確認してみましょう。

バグ（不具合）がある場合、
コンソールにその原因を説明するエラーメッセージと、
エラーが発生している箇所の行数が表示されます。

エラーの種類には、以下のようなものがあります。