【JavaScript】 超基本なデバッグ方法
更新日：2020/06/17
プログラムでとても重要なのがデバッグです。
JavaScriptも例外ではありません。
そこで今回は、JavaScriptでの基本的なデバッグ方法をお伝えします。
JavaScriptでデバッグするために必要なもの
JavaScriptのデバッグは、ブラウザの標準的な機能を使用します。
追加でアプリを導入する必要がないので、手軽のうえ無料です。
ただし、html上に配置してブラウザで読み込める状態にしておく必要があります。
今回はGoogle Chromeでのデバッグ方法をお伝えします。
他のブラウザは名称が異なりますが機能がほぼ同じなので、試してみてください。
デバッグツールの開き方
デバッグは、デベロッパツールでおこないます。
次の手順で、デベロッパツールを開きます。
ブラウザで開く
→ デバッグしたいスクリプトが実行されるhtmlをブラウザで開きます
デベロッパツールを開く
→ 右クリックで表示されるメニューから、『検証』を選択します
デベロッパツールの位置を調整する
→ 「・・・（縦）」をクリックして表示されるメニューの「Dock side」で、表示する位置を好みの場所へ変更します。
その他のブラウザでのデベロッパツールの開き方は、次のページを見てください。
参考記事：Webサイトのスタイル(css)をブラウザで調べる方法
変数の出力
console.log()を使用することで、デベロッパツール上に変数の値を表示できます。
console.log()の使い方
console.log()に表示したい変数を引数として渡します。
複数の変数を渡すことも可能です。
配列やオブジェクトを渡すと、その中身も詳細に表示してくれます。
例として、次のhtmlをGoogle Chromeで表示してみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const a = 1,b="test",c=[ 1 , 2 , 3 ];
console.log( a , b ,c );
</script>
</head>
<body>
</body>
</html>
htmlの読み込み後JavaScriptが実行され、デベロッパツールのコンソールに、console.log( )で指定した変数の値が表示されます。
コンソール上に、1 "test" ▶Array(3) と表示されました。
Arrayは配列です。
▶をクリックすることで、次のように配列の内容が表示されます。
1 "test" ▼Array(3)
0: 1
1: 2
2: 3
length: 3
__proto__: Array(0)
コンソールが表示されない場合
『Console』『What's New』『Coverage』が表示されている場合、『Console』が選択されているか確認。
表示されていない場合、右上の『・・・』をクリックしてメニューを表示して『Show console drawer』を選択します。
補足：コンソールで組み込みメソッドを実行
コンソール上で、JavaScriptの組み込みオブジェクトのメソッドを実行できます。
htmlファイルを作成しなくても簡単な動作確認をおこなえるので、知っておくと便利です。
スクリプトの実行を中断してデバッグする方法
任意のポイントでスクリプトファイルを中断して、変数の値をチェックしてみます。
次の手順でおこないます。
スクリプトファイルの表示
Sourcesを表示
→ 上段のメニューから『Sources』を選択します。
スクリプトファイル名をクリック
→ 左側のタブで、スクリプトファイル探してクリックします。
→ クリックしたスクリプトファイルが表示されます。
ブレークポイントの設置/解除
ブレークポイントを設置すると、その行を実行する前に一時停止します。
一時停止したい行の行番号をクリックすることで、ブレークポイントを設置できます。
Google Chromeではブレークポイントは赤い丸で表示されます。
ブレークポイントの行に灰色の丸が表示される場合、クリックして赤い丸にすることで、そのコードを実行前に一時停止することができます。
また、行番号横の赤丸をクリックすることで、ブレークポイントを解除できます。
スクリプトの実行
ブラウザで表示しているページを再表示することで、スクリプトが再実行されます。
クリックすることでスクリプトが実行されるなど、ブレークポイントセット後にコードが処理される場合は、再実行する必要はありません。
一時停止中にできること
ブレークポイントで一時停止後にできることをいくつか挙げます。
再開
再開ボタンを押すと、スクリプトの処理が再開します。
再度ブレークポイントを通過する前に、処理が一時停止します。
次の処理を実行
現在停止している次のコードを処理します。
次の処理を実行または関数に入る
現在停止している次のコードを処理します。
ただし、次のコードが関数（メソッド）の場合、それぞれの関数に移動します。
関数から出る
現在の関数を最後まで処理して、呼び出し元の関数で一時停止します。
変数の値確認：Scope欄
Score欄に現在のスコープ上の変数が表示されます。
変数の値確認：Console欄
コンソールに変数を入力すると、その値が表示されます。
更新日：2020/06/17
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
