code-computer

コンソールでJavaScriptを利用する方法

JavaScript

コンソールで何ができるの

コンソールでは、JavaScriptの実行やconsole.log()の出力内容の確認ができます。主に、開発中のデバッグと合わせて利用する機会が多いです。

まず、コンソールを開くには

Webブラウザを起動しましょう。IE、Firefox、Google Chromeなど色々ありますが、基本的に全て同じ操作で可能なので、どれでも良いです。説明は、Windows端末 × Google Chromeで行います。

ブラウザを開いたら「F12キー」を押しましょう。

console-00

コンソールでコマンドを実行してみよう

見た目で分かりやすい、window.alert()を実行してみましょう。

console-01

コマンド入力後、「Enterキー」を押すと、以下のように、ポップアップが表示されます。

console-02

コンソールでコマンドを実行してみよう(おまけ)

以下の画像にあるとおり、要素調査や等価演算子と厳密等価演算子の判定確認などにも利用できるので、サンプル実装するまでも無いことは、コンソールで試す方が速いですね。

console-03

開発者ツールについて

F12キーで開いたウィンドウは、「開発者ツール」や「ディベロッパツール」と呼ばれています。その中でも、特に利用されるのは以下の4機能です。(他も利用するシーンはありますが、頻度が少ないため今回は割愛)

Elements

HTMLの構成チェックやCSSの適用チェックに利用します。

 →主に、コーダ、プログラマが使います。

Console

要素チェックやメソッドの単体実行、エラー内容の確認に利用します。

 →主にプログラマが使います。

Sources

JavaScriptのデバッグ実行に利用します。

 →主にプログラマ、テスターが使います。

Network

htmlファイルのダウンロードや、Ajaxの非同期通信、SubmitによるGet、Postなどの各種サーバ通信内容確認に利用します。

 →主にプログラマ、テスターが使います。

最後に

開発の現場にも、「JavaScriptが動かない→ソースを眺める→分からない→ネット/質問」という考えで、実装する人がいます。

「JavaScriptが動かない→開発者ツールで調査する」のようにしてみてください。すこしだけ、実装がやりやすくなると思いますよ。その少しが、周りとの差になるのですよ。

スポンサーリンク