JavaScriptを基本からまとめてみた【2】【Chromeのデベロッパーツールでデバッグする方法】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##デバッグとは
『デバッグ』とは、プログラム内の『バグ』を見つけて改修する作業の事。
プログラムの実行を『デバッグ』することで現在の変数の値や、処理がどのように進んでいるのかを確認する。
機能が正常に動かない、あるいは期待する結果が得られない場合には、そこに『バグ』がある。
その『バグ』を見つけ、期待値が返ってくるように改善するのが『デバッグ』。

##バグとは
『バグ』とは、プログラムの処理を邪魔するコンピューターに入り込んだ「虫」が由来と言われており、英語で「bug」と書く。
コンピューターを正常に動かすために「虫（バグ）」を取り除く作業を『デバッグ』という。

##デベロッパーツールの表示
####(1) Chromeブラウザーでウェブサイトを表示し、[ 右クリック ] ⇨ [ 検証 ] を選択することで、デベロッパーツールが表示される。
※ ショートカットキーはWindowsの場合F12キー(macOSの場合はCommand＋Option＋Iキー)を入力する。
####(2) JavaScript(JS)のファイルを開くために、画面上にある [ Sources ] タブを選択する。
####(3) ここで画面左にある [ Sources ] ツリーから、対象のJSのファイルを選択するとメインエリアに選択したファイルの内容が表示される。
左のリンクを開き、デベロッパーツールを表示してブラウザーに読み込まれているmain.jsというJSファイルを表示する。

##ブレークポイントの設定
『ブレークポイント』とは、プログラムの実行中に任意の行で処理を止める機能の事。
この機能を使用すれば、使用している変数の現在の状態が確認できる。

####(1)　ブレークポイントを設定する
メインエリアで表示されているソースコードの行番号の部分をクリックすると、青い矢印が表示されブレークポイントが設定されます。ブレークポイントを設定した状態でプログラムの実行中にこの行を通ると実行が一時的に止まり、青い矢印を再度クリックすることで設定したブレークポイントが削除される。

####(2)　ブレークポイントは複数設定できる
ブレークポイントは複数設定でき、設定したブレークポイントはすべて画面右の[Breakpoints]パネルに表示される。パネルに表示されたそれぞれのブレークポイントは1つにつき2行の情報があり、1行目にソースのファイル名と行番号が、2行目にその行に書かれたソースコードが表示される。

##変数の確認
ブレークポイントでプログラムの実行を止めると、プログラム内の変数の現在の状態を見ることができる。
変数の状態を把握することで、処理が期待どおり動作しているか確認することは大切。
これまで変数の値を確認したい場合、ソースコードにalert()関数やconsole.log()関数を書いていたが、
このブレークポイント機能を使用すればソースコードを編集することなく、ブラウザ上で任意の変数を確認できる。

####(1) マウスを重ねれば、変数の値を確認できる
変数上にマウスポインターを乗せることで変数の値(数値や文字列など)が確認できる。

####(2)スコープ内の変数の値を、一覧で確認できる
複雑なオブジェクトの変数の詳細を確認したい場合、[Scope]パネルが役に立ち、ここに現在実行中のJSのスコープの変数が表示され,関数内のローカル変数であれば、Localツリーに表示される。

####(3)複雑な階層の変数はWatchを使おう
関数内で使用されている変数が多かったり、オブジェクトの深い階層の変数を確認したい場合は[Watch]パネルを使用する。[Watch]パネルに変数名を入力することで、変数の状態を表示できる。［+］ボタンをクリックして、監視したい変数の名前をいれる。

##プログラムのステップ実行
ブレークポイントで止まったプログラムは画面のボタンで続きを実行できる。
この機能を使えばプログラムが実行される処理の流れを確認できる。

####リジューム実行
ブレークポイントで止まっていたプログラムの続きを実行する。
複数のブレークポイントを設定することで想定通りの処理順になっているか確認できる。

####ステップイン
ブレークポイントで処理が止まっている時、その行のプログラムはまだ実行されていない状態で、ステップインを実行すると、現在の行のプログラムを実行し、1つ次の処理の行へ移動してそこでまたプログラムが止まる。プログラムが実行される処理の流れを一つ一つ確認できる。▲ステップインだと、add()関数の中の処理まで進める。

####ステップオーバー、ステップアウト
ステップインのように1行ずつ確認するのに対して、ステップオーバーとステップアウトは大まかな処理の流れを確認するのに役立つ。ステップオーバーは現在止まっている行で関数が実行されている場合に、その関数の内部の処理をすべて実行して次の行で止まる。ステップアウトは現在処理が止まっている関数内の残りの処理をすべて実行し、関数を呼び出している行へ移動する。▲ステップオーバーだと、add()関数の処理の確認を飛ばして進める。

##参考サイト
[デバッグとは何をするの？基礎知識・やり方・コツを解説]
(https://tech-camp.in/note/technology/94345/)
[Chrome開発者ツールの紹介。JavaScriptの学習にも使えます]
(https://www.youtube.com/watch?v=QEREMTKXmLA)
[ChromeのデベロッパーツールでJavaScriptをデバッグする方法（2019年版）]
(https://ics.media/entry/190517/)