javascriptのデバッグ方法

今回はjavascriptのデバッグ方法を教えます。
前回のvar型の変数は値が変更できるのが特徴でしたが、その値の確認をするのにうってつけです。
それでは早速やっていきましょう。
今回も前回のtest.jsを書き換える感じでやっていきます。

まず、ブラウザで開発者モードを使う方法を学びます。
今回はgoogle chromeの説明です。
ブラウザ開いた状態で「F12」キーを押すと簡単に開きます。
開かない場合は、右上の三点ボタンをクリックしましょう。

クリックすると、こんなメニュー画面が出てくるはずです。

「その他ツール」をクリックしましょう。

この「デベロッパーツール」をクリックしましょう。
これで開発者モードを立ち上げることができます。（人によって呼び名が変わります。）
こんな画面が出てくるはずです。

「ソース」をクリックしましょう。
そうすると今作っているページのファイル構成を見る事ができます。

jsファイルで自分の好きなタイミングでプログラムを止めることができます。
jsファイルを開きましょう。

行番号をクリックすると青いマークが出てきます。

これで青いマークのタイミングでプログラムを止めることができます。
止めた後少しづつ動かして様子を見たい場合は上の写真の右上の下矢印点の所をクリックしましょう。

他の方法でプログラムが動いてるか確認する方法があります。
上の写真で「console.log」と書いてあるのが解りますでしょうか。
これでかっこの中の文章を「コンソール」で表示させることができます。

写真上の「コンソール」タグをクリックするとコンソールを表示させることができます。
プログラムを実行する上の写真の様に「console.log」の中の文章を表示させることができます。

今後、javascriptでプログラムを実行するときはこれらの方法を試してみましょう。

それではまた次回。