【JavaScript】デバッグのやり方

NO IMAGE

動作確認レベルの簡単な説明になります。
触っていけば慣れますので初学者の方は是非参考にしてみて下さい。

下記記事での番外編となっています。
まだ読んでない方は是非読んでみて下さい。

プログラムを書いて実行していると、完璧にコードを書いたつもりでも、イメージ通りに動かないことがあります。

デバッグを行うことで効率よくエラーを探すことができます。
プログラムを実行して「あれ??」と思ったらデバッグすることをお勧めします。

デバッグにより、プログラムを途中で止めます。

クロームのブラウザ上で「右クリック」→「検証」を選択します。

下図のようにブラウザの右側に検証ツールが出てきます。
Sourcesを選択するとJavascriptのメソッドを見ることができます。

四角をクリックしてみて下さい。
赤いポインタがつくはずです。

このselect()メソッドは「グー」「チョキ」「パー」のいずれかのリンクをクリックすると呼ばれます。
本記事では「グー」をクリックします。

下図のように途中で止まればOKです。

上図はselect(handNumber)のhundNumberにカーソルを当てた状態になります。
“0”が値として入っていることが分かります。

次のプログラム実行に進むにはどちらかの四角枠をクリックします。
コードが少ないので、今回はどちらでもOKです。
慣れればうまく使い分けできます。

うまく動かない時は下図のように何かしらエラーが出ているはずです。
このエラーはdocument.getElementsByName(‘name’);
の(‘name’)がありませんよ。と怒られています。
今回は(‘name’)ではなく(‘hand’)が正解です。

Consoleは下図のようになっています。
エラーが出た時はConsoleを見てみて下さい。重大なヒントが隠れている時があります。

デバッグやコンソールをうまく活用して効率よくエラーを探してみて下さい。

プログラミングにおいて、デバッグは必須のスキルです。
まだデバッグできない方は、なるべく早く身に付けておきましょう。

「実行を途中で止める」
エラーからデバッグがあなたを救ってくれます。

本記事最後までご覧いただきありがとうございました。

JavaScriptカテゴリの最新記事