JavaScriptのデバッグ方法

こんばんは、ぺんしるです。

エンジニア

JavaScriptのデバッグ方法は？

今日はこういった疑問に答えます。

この記事を読むことで、以下が理解できます。

デバッグとは

デバッグとは、プログラムの不具合や欠陥を調査・修正して、プログラムを仕様通りに動作させるための作業です。エンジニアであれば、必ず実施するものです。

Visual Studioなどの開発者ツールにもデバッグツールは含まれていますが、ここではブラウザに搭載されたデバッグツールでデバッグする方法を記載していきますね（＾ω＾）

デバッグはGoogle Chromeのデベロッパーツールを使用します。もちろん、Internet Explorer（IE）にもデベロッパーツールは用意されていますが、今回はChromeで説明します。

デベロッパーツールを起動するには、Chromeを起動した後に、F12またはCtrl+Shift+iで起動できます。起動すると、Chromeの下にぺこっとパネルが表示されます。これがデベロッパーツールになります。

ショートカットを使わなくても、Chromeの画面から以下の赤枠部分をクリックすると、デベロッパーツールが起動します。

はい。これで、デバッグの準備は整いました。

一番オーソドックスなデバッグ方法です。

ブレークポイントとは、プログラムを指定した箇所で一時的に停止するポイントのことです。変数の中身や処理を追うときに使用します。

ブレークポイントを設定するには、デベロッパーツールのパネルでSourcesタブを開いてください。デバッグ対象のJavaScriptファイルを選択して、ブレークポイントを設定する行をクリックします。

ブレークポイントを設定することを、ブレークポイントをはるとも言います。

ブレークポイントをはったら、デバッグしたいJavaScriptを実行してデバッグしていきます。

デバッグで便利なキーボードのショートカットも用意されています。ここを覚えておいたほうが、デバッグはすこぶる楽になります。

詳細は、以下の記事でGoogleさんが説明してくれているので参考にしてくださいね。

圧縮（難読化）されたJavaScriptにブレークポイントを設定する場合は、圧縮したJavaScriptは1行に整形されているので、デベロッパーツールの{}をクリックして整形を解除してください。

整形前（読みづらい）：

整形後（読みやすくなりますね）：

以下のメソッドを使用して、コンソールログをソースコードに埋め込む方法もあります。

以下のように使用します。

{
  var a = 100;
  console.log(a); //100がコンソールログに出力されます。
}

以下は、上記のメソッドで出力した例です。コンソールログ結果は、デベロッパーツールのConsoleパネルに出力されます。

あくまでデバッグ用に埋め込むコードのため、業務ではconsole.log()くらいしか使わないです(・´з`・)。後で削除するので、warnを使用する場面もあまり見ません。

debuggerステートメントを使用すると、その行で必ず処理が止まります。

例えば、以下のJavaScriptを実行すると、3行目のdebuggerステートメントで処理が一度止まります。


{
	var a = 1;
	var b = 2;
　　　　 debugger; //この行で必ず処理が止まる
	alert(a + b);
}

コンソールログやdebuggerステートメントは、本番環境にリリースする際には削除する必要があります。残したままだと、内部的な情報を画面に表示することになるので、セキュリティの観点でよろしくないです。同業者が見ても、格好が悪いです。

いかがでしたか？

不明点があれば、遠慮なくこちら、またはこちら（匿名での質問ができます）からご質問くださいね。

ではまた！