プログラムをデバッグする編集ツールもあります。今回、javascriptのデバッグをしてみます。
資料はこちらをご覧ください → デバッグ
p.1 ①デバッグするためのコードをメモ帳に書き、拡張子「.html」で保存します。②保存すると陰陽マークに似たアイコンで表示されますので、ダブルクリックします。左肩に四角い枠の計算式があり、あとは真っ白な画面が表示されます。右上の「・・・」をクリックし、「その他のツール」そして「開発者ツール」の順番でクリックしていきます。
p.2 このような編集画面が表示されます。③左上の計算式に１と２を代入して「計算する」をクリックした計算結果は「３」ではなく「１２」となります。 プログラムコードに間違いがあります。これをデバッグで探していきます。
p.3 ④19行目のカーソルを置きクリックするとブレイクポイントの●が表示されます。ここでプログラムを一旦停止します。⑤再度１と２を代入して計算すると、19行目で停止して、停止画面が表示されます。この状態で、⑥num1.valueにカーソルを載せると｛“１”｝が表示され、num２.valueにカーソルを載せると｛“２”｝が表示され、ここまでは問題がないことがわかります。⑦ステップインのアイコンをクリックすると一行ずつ先に進みます。この場合は、19行からsum関数の23行に跳びます。
p.4 ⑧aに１、ｂに２が入力していることが表示されており、ここまではOKですね。⑨下欄のコンソール画面が表示されていない場合は、表示するために縦三つの「・」をクリックして、「コンソールドロワーを表示」をクリックしてください。⑩コンソール画面で、a、ｂ、a+b、1+2を入力して表示内容を確認します。a、ｂ、a+b及び1+2を表示させると、a、ｂ、a+bは何れも「｛ ｝」で囲まれた文字列であることがわかります。そこで、プログラムコードでは、文字列を数字に変換するコード（赤字）を追加しました。実行結果は、１＋２＝３となりました。