開発者コンソール

コードはエラーを起こしやすいものです。あなたは間違いなくエラーを犯すでしょう…いや、何を言っているんだ？あなたは間違いなくエラーを犯すでしょう。少なくとも人間であれば。ロボットでない限り。

しかし、ブラウザでは、ユーザーはデフォルトでエラーを見ることができません。そのため、スクリプトで何か問題が発生した場合、何が壊れているのか分からず、修正することができません。

エラーを表示し、スクリプトに関するその他の多くの有用な情報を取得するために、「開発者ツール」がブラウザに組み込まれています。

多くの開発者は、最高の開発者ツールを備えているため、ChromeまたはFirefoxを開発に使用しています。他のブラウザも開発者ツールを提供していますが、特別な機能を備えている場合もありますが、通常はChromeまたはFirefoxに追いつこうとしています。そのため、ほとんどの開発者は「お気に入りの」ブラウザを持っており、ブラウザ固有の問題がある場合は他のブラウザに切り替えます。

開発者ツールは強力で、多くの機能を備えています。まず、それらを開き、エラーを確認し、JavaScriptコマンドを実行する方法を学習します。

Google Chrome

ページbug.htmlを開きます。

そのJavaScriptコードにはエラーがあります。通常の訪問者の目には隠されているので、開発者ツールを開いて確認しましょう。

F12キーを押します。Macの場合はCmd+Opt+Jキーを押します。

開発者ツールは、デフォルトで「Console」タブで開きます。

だいたいこんな感じです。

開発者ツールの正確な外観は、Chromeのバージョンによって異なります。時々変更されますが、似ているはずです。

• ここで、赤色のエラーメッセージを確認できます。この場合、スクリプトには不明な「lalala」コマンドが含まれています。
• 右側に、エラーが発生した行番号を含むソースbug.html:12へのクリック可能なリンクがあります。

エラーメッセージの下には、青い>記号があります。これは、JavaScriptコマンドを入力できる「コマンドライン」を示しています。Enterキーを押して実行します。

これでエラーが表示できるようになりました。これは最初のステップとして十分です。後で開発者ツールに戻り、ブラウザでのデバッグの章でデバッグについて詳しく説明します。

Firefox、Edge、その他

ほとんどの他のブラウザでは、F12キーを使用して開発者ツールを開きます。

それらのルックアンドフィールは非常に似ています。これらのツールの1つの使用方法を理解したら（Chromeから始めることができます）、簡単に別のツールに切り替えることができます。

Safari

Safari（Macブラウザ、Windows/Linuxではサポートされていません）はここでは少し特殊です。「開発」メニューを最初に有効にする必要があります。

環境設定を開き、「詳細」パネルに移動します。一番下にチェックボックスがあります。

これでCmd+Opt+Cでコンソールを切り替えることができます。「開発」という名前の新しいトップメニュー項目が表示されていることにも注意してください。多くのコマンドとオプションがあります。

まとめ

• 開発者ツールを使用すると、エラーの表示、コマンドの実行、変数の検査などができます。
• WindowsのほとんどのブラウザではF12キーで開くことができます。MacのChromeの場合はCmd+Opt+Jキー、Safariの場合はCmd+Opt+Cキー（最初に有効にする必要があります）。

これで環境の準備が整いました。次のセクションでは、JavaScriptに取り組みます。