JavaScript 開発者ツールの使い方

開発者ツールを使用すると、ブラウザ上で直接JavaScriptを実行することができます。

今回はChromeを使用して説明しますが、Firefox、Edgeなど、他のブラウザにも同様のツールがあります。

Chromeの開発者ツールを起動する

Chromeの開発者ツール(DevTools)を起動します。

Windowsの場合、以下の何れかの方法で起動します。

・Chrome メニューから [その他のツール] → [デベロッパー ツール]を選択する。

 

・「F12」キーを押下する。

・「Ctrl」+「Shift」+「j」キーを押下する。

・ページを右クリックして [検証] を選択する。

呼び出された 開発者ツールは、以下のように表示されます。

開発者ツールは複数のパネルで構成されています。パネルの内容です。

パネルはドロップアンドドラッグで並び替えができます。

パネル 内容
Elements タグの要素とスタイルの確認、編集
Console ログの閲覧、コマンドライン入力によるJavaScript の実行
Sources CSSやJavaScriptのコードのデバッグ
Network ページのリクエストをしてからの通信内容を一覧で確認
Performance 表示速度の計測
Memory ヒープの状態を確認
Application CookieやWeb Storageの確認、編集
Security HTTPSの状態を確認
Lighthouse Webページの品質改善の指針を「パフォーマンス」、「PWA」、「アクセシビリティ」、「ベストプラクティス」、「SEO」点でチェックしてくれるツール

 

コンソールからJavaScriptを実行する

開発者ツールのコンソール(Console)パネルを選択します。

コンソール上に「alert(‘test’)」を入力し、「Enter」キーを押下します。

メッセージボックスに「test」と表示されます。

 

Google Chrome のコンソールでは「Enter」キーを押下するとコードが実行されます。

複数行のコードを実行したい場合は、コードを入力したあと 「Shift」 + 「Enter」 キーを押下します。

コードはすぐに実行されず、改行が行われます。

最後に「Enter」 キーを押下し、実行します。

 

エラーメッセージの確認方法

JavaScriptはエラーが発生時にその原因をエラーメッセージとして出力します。

開発者ツールのコンソール上に「alert(test)」を入力し、「Enter」キーを押下します。

コンソール上に赤文字でエラーメッセージが出力されます。

この場合、Uncaught ReferenceError:test is not definedがエラーの内容で、Uncaughtは例外エラーで、プログラムを正しく実行できなかった、という意味です。

ReferenceErrorは存在しない変数を参照している場合に発生するエラー、という意味です。

test is not definedはエラーの具体的な内容になり、testが未定義、という意味です。

つまり、testという変数が未定義のため、参照できないことがエラーの原因になります。

この例は、testを文字列として渡さなくてはいけないのに、クォーテーションで囲んでいないため、JavaScriptはtestを変数として認識します。

しかし、testという変数は定義していないため、このエラーが発生しました。

 

JavaScriptファイルだけでなく、HTMLファイルに書かれたJavaScriptも、エラーの場合、コンソールにエラーメッセージが出力されます。

JavaScriptが思ったように動作しない場合は、コンソールにエラーメッセージが出力されていないか確認するとよいでしょう。

 

まとめ

今回は、Chromeの開発者ツールの起動方法、コンソールパネルの使い方を説明しました。

また、エラーメッセージもコンソールパネルで確認できました。

以上、JavaScript 開発者ツールの使い方の説明でした。