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

JavaScriptGoogle Chrome, プログラマ, 技術知識, 開発環境

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が動かない→開発者ツールで調査する」

のようにしてみてください。

すこしだけ、実装がやりやすくなると思いますよ。

その少しが、周りとの差になるのですよ(^^)

スポンサーリンク