開発者ツール：JavaScriptのお助けツール
JavaScriptでうまく動かないときは、「開発者ツール（デベロッパツール、Dev Tool）」を使うと間違いを探すことができます。
1. 間違えてみよう
手始めに、間違いのファイルを作ってみましょう。（その他のHTMLコードは省略してます）
<p id="output1">おはようございます</p>
<script>
const output1 = document.getElementByID("output1");
output1.innerHTML = "こんにちは";
</script>
要素の取得の「.getElementById("〜")」の「Id」を「ID」と大文字にスペルミスしています。結果は「こんにちは」ではなく「おはようございます」のままです。
こういうときは、たいていスペルミスが原因なので、学びの場だったら「時間をおいてもう一度よく見てね」とアドバイスすることで、学習者の勉強にもなります。↓
ですが、実際の現場では、納期もあり、明日納品しなければならないなど時間の制約もあるでしょう。それにJavaScriptはプログラムですので、はまってしまうとなかなかミスが見つからないものです。
そんな時、役立つのが、この「開発者ツール」です。
2. 「開発者ツール」を起動する
起動するには、つぎの２つの方法があります。どちらでも結構です。
○ ブラウザのページ上で、右クリックすると、「検証」(又は「要素の検証」「要素を検証」)といったメニュ ー項目がでてくるのでそれを選択。
○「F12」キーをクリック（PCの設定でファンクションキーが有効である必要があります。このツールを「F12 tool」ということもあります。）
そうすると、右半分、または下半分（←設定可能）に「開発者ツールが表示されます。
エラーが発見されれば、左上に「赤いバツマーク」が表示されます。
もし赤いバツマークが表示されなければ、HTMLのタグやid属性の値などJavaScript以外の間違いの可能性があります。
3. エラー内容を確認
１．次のいずれかの方法でエラーを確認してください。
○赤いバツマークをクリック
○メニューの中の 「Console」タブをクリック
そうすると、Console画面が表示されます。なお、赤いバツマークをクリックするとConsoleの表示範囲が小さいので、「Console」タブをクリックすることをすすめます。
２．Console内に赤字でエラーの項目が、次の画像のように表示されます
・エラーメッセージ：Uncaught TypeError
・内容：document.getElementByID is not a function
・ファイル名と行番号：at sample.html:9 ←この行数が大事
３．該当する行番号の箇所のソース付近をテキストエディタでチェックし、ファイルを修正します。上記画像でしたら９行目付近ということがわかります。なお、そこが必ずしもミスしているのではなく、その上の行でミスしている可能性もありますので、気をつけてください。
4. ファイルを保存し、ブラウザを再読込して、正常に動作していることと、開発者ツール上でエラーがないことを確認してください。
4. よくあるエラーメッセージ
よく表示されるエラーメッセージのキーフレーズを以下に示します。
○エラーメッセージの最初のキーフレーズ
・Uncaught SyntaxError：文法エラー
・Uncaught ReferenceError：参照エラー
・Uncaught TypeError：型が違うエラー
・Failed to load resource：ファイルが存在しないエラー
○エラーメッセージの次のキーフレーズ
・ 〜 is not a function：正しくない関数・メソッドを呼出しているなど
先のサンプルでは、document.getElementById()の「.get〜Id()」の部分をオブジェクト「document」に紐づくメソッドといいます。それが正しくないということですね。
・ Unexpected end of input：かっこ「{}」使用時、閉じカッコ「}」が抜けているなど
次のサンプルでは、関数の定義「function fn1()」の波括弧の最後が抜けています。これはよくやってしまいますので、気をつけましょう。
<script>
fn1();
function fn1(){
//処理の内容;
</script>
・ 〜 is not defined：変数・関数が定義されていないなど
次のサンプルでは、関数の実行は「fn1()」としなければならないところを「fn()」としてますね。よくやっちゃいます。
<script>
fn();
function fn1(){
//処理の内容;
}
</script>
・ Cannot read property ~ ：プロパティが存在しないなど
次のサンプルでは、ボタンをクリックして実行させてください。input要素のid属性は「input」なのですが、script要素内での要素の取得で「input1」とスペルミスしています。この場合、エラーメッセージで表示される行番号は「input1.value」（オブジェクト「input1」に紐づく「.value」の部分をプロパティと言います）の存在する行を示しますので、IDをたどってHTMLの要素のID属性までチェックする必要があります。
<p><input type="text" id="input"></p>
<p id="output1">出力場所</p>
<p><button onclick="btn1();">押す</button></p>
<script>
const input1= document.getElementById("input1");
const output1 = document.getElementById("output1");
function btn1(){
output1.innerHTML = input1.value;
}
</script>
上記以外にも様々なエラーメッセージがあります。（気がつけば随時追加していきますが、）不明なエラーメッセージや不具合は、まず検索エンジンで翻訳したり、そのエラーメッセージをキーワードに検索してるといいでしょう。例えば「JavaScript syntax error」などです。
・Identifier 〜 has already been declared：変数が既に宣言されているなど
例えば、変数宣言「let」は、宣言は１回のみです。次のように、２回宣言はできません。その際、エラーを表示して、開発者に知らせてくれます。
let a=1;
let a=2; //←NG
・ Assignment to constant variable.：定数に値を代入するなど
constで宣言した定数変数は、一旦設定した値を変更することができません。既に「定数として割り当てられてますよ」と怒られちゃいます。
const a=1;
a=2; //←NG
5. セキュアなサーバで開発を
いくつかの重要なAPIは信用できるセキュアなサーバ(https://〜で始まる)上でしか動作しないものがあります。自分のPC内でいくら試しても動作しないでモヤモヤしてしまうのです。
セキュアなサーバだと、例えばGitHubページを使う方法があります。
無料ですし、ファイルの一覧も見えますし、履歴も確認できます。
開発者の皆さんはファイルの保管場所として活用しています。
6. 開発者ツールでできること
開発者ツールでは、JavaScriptの間違い探し以外にも次の機能があります。
特に、「Elements」タグでは、要素やCSSの状態を検証したり、追加・変更・削除した状態を確認することができます。また、JavaScriptが実行されると、実行後のコードの状態が表示されます。p要素(IDがoutput1）の部分をご覧ください。
「矢印のついたアイコン」をクリックしてページ上をマウス移動させれば、どの要素がどのコードに対応するか、CSSがどのような状態かを調べることもできます。
さらに、「スマホとタブレットの形のアイコン」をクリックすれば、スマホやタブレットの表示状態を機種別にシミュレーションすることも可能です。
その他、プログラムを途中で止めて状態をチェックする機能や、アプリケーションに役立つ機能など盛り沢山ですので、ググってみてください。
ちなみに開発者ツールは見た目を変えることができます。私の場合はThemeをDarkモードにしていますので画面は暗いです。（Lightなどにすると明るくなりますので好きなものに調整してください）
7. 開発者ツールの日本語化
最近、開発者ツールを開くと、
こんなのが出てきますね。
これを選ぶと開発者ツールのメニュー等の言語を変更することができますので、試してみてください。
なお、開発者ツールの歯車マーク→Preference→Languageからも変更が可能です。
8. シャーロック・ホームズとワトソン
バグ取りは「推理小説」を読むようなものです。
皆さんが謎解きの「探偵」とするならば、開発者ツールは謎解きの「パートナ」でしょう。
じっとソースコードを眺めるのも大事ですが、パートナの助言も頼りにて、
一歩一歩「謎解き（＝解決）の過程」を順をおって、楽しみながら、犯人（＝原因）を探り当ててみると、どうでしょう、わくわくしますよね。
皆さんの「経験ポイント」がアップしますし、皆さんの将来の「自己解決力」アップにつながります。
どうぞそういったワクワク感を楽しみながらバグ取りを頑張りましょう。
随時、記事は追加していきます。長い目で見てください。
【PR】
①初心者向けHTML5対面教室（東京・大阪）
②HTML5の検定にチャレンジ！（オンライン）