コードにはエラーが発生しやすいものです。かなりの確率で間違いを犯すでしょう…ああ、私は何を言っているのでしょうか?少なくともあなたがロボットではなく人間であれば、間違いは必ずあります。
ただし、ブラウザーでは、デフォルトではユーザーにエラーは表示されません。そのため、スクリプトで何か問題が発生した場合、何が壊れているのかが分からず、修正することができません。
エラーを確認したり、スクリプトに関するその他の多くの役立つ情報を取得したりするために、「開発者ツール」がブラウザに組み込まれています。
ほとんどの開発者は、Chrome または Firefox に最高の開発者ツールを備えているため、開発には Chrome または Firefox を使用します。他のブラウザも開発者ツールを提供しており、場合によっては特別な機能を備えていますが、通常は Chrome または Firefox に「追いつく」役割を果たしています。そのため、ほとんどの開発者は「お気に入り」のブラウザを持っており、問題がブラウザ固有のものである場合は他のブラウザに切り替えます。
開発者ツールは強力です。彼らには多くの特徴があります。まず、ファイルを開いてエラーを確認し、JavaScript コマンドを実行する方法を学びます。
bug.html ページを開きます。
JavaScript コードにエラーがあります。通常の訪問者の目からは隠されているので、開発者ツールを開いて見てみましょう。
F12を押すか、Mac を使用している場合はCmd + Opt + J を押します。
開発者ツールはデフォルトで [コンソール] タブで開きます。
それは次のようになります。
開発者ツールの正確な外観は、Chrome のバージョンによって異なります。時々変化しますが、同様のはずです。
ここでは赤色のエラー メッセージが表示されます。この場合、スクリプトには不明な「lalala」コマンドが含まれています。
右側には、ソースbug.html:12へのクリック可能なリンクがあり、エラーが発生した行番号が示されています。
エラー メッセージの下に、青い>記号があります。これは、JavaScript コマンドを入力できる「コマンド ライン」をマークします。 Enter キーを押して実行します。
これでエラーが確認できるようになりました。始めるにはこれで十分です。後ほど開発者ツールに戻り、「ブラウザでのデバッグ」の章でデバッグについてさらに詳しく説明します。
複数行入力
通常、コンソールにコード行を入力してEnter を押すと、コードが実行されます。
複数の行を挿入するには、 Shift + Enter を押します。このようにして、JavaScript コードの長い断片を入力できます。
他のほとんどのブラウザでは、 F12 を使用して開発者ツールを開きます。
見た目も雰囲気もかなり似ています。これらのツールのいずれかの使用方法を理解したら (Chrome から始めることができます)、別のツールに簡単に切り替えることができます。
ここでは Safari (Mac ブラウザ、Windows/Linux ではサポートされていません) が少し特殊です。まず「開発メニュー」を有効にする必要があります。
「環境設定」を開き、「詳細」ペインに移動します。下部にチェックボックスがあります:
Cmd + Opt + C でコンソールを切り替えることができるようになりました。また、「開発」という名前の新しいトップメニュー項目が表示されたことにも注目してください。多くのコマンドとオプションがあります。
開発者ツールを使用すると、エラーの確認、コマンドの実行、変数の検査などを行うことができます。
Windows 上のほとんどのブラウザでは、 F12 キーを押して開くことができます。 Chrome for Mac にはCmd + Opt + Jが必要です。Safari: Cmd + Opt + C (最初に有効にする必要があります)。
これで環境が整いました。次のセクションでは、JavaScript について説明します。