FOX HOUND TECH

みなさん、こんにちは。

だんだん寒くなってきましたね、渋谷です。

JavaScriptのデバックをする時、consoleオブジェクトを使うことが面倒だと感じたことはありませんか？
ということで今回は、Google Chromeのデベロッパーツールを使ってJavaScriptのデバックを行う方法について書いていきます。

※デバックを行うソースコードは、こちらからお借りします。

デバック

早速デバックしていきます。
index.htmlをChromeで開き、デベロッパーツールのSourceタブからmain.jsを開きます。

main.jsのコードが表示されている画面の行番号(今回は27行目の let result)をクリックします。下記画像のようにクリックした行番号が青くなれば、ブレークポイントの設定は完了です。

それでは、演算を「-」(引き算)に変えてみましょう。すると、先ほどブレークポイントを設定した場所でスクリプトの実行が一時停止します。

変数に格納されている値の確認は下記画像のように一目で分かるので、簡単な確認であればこれだけで十分です。

変数に格納されている値は、Scopeパネル内でより詳細に確認することができます。

特定の変数のみを監視したい場合はWatchパネルを使用しましょう。下記画像右上の+ボタンをクリックして監視したい変数名を入力するだけでしようすることができます。

上記画像の各ボタンでステップ実行をすることが出来ます。今回はその中でもよく使う項目を紹介します。

■ステップイン
1行ずつプログラムを実行することができる。処理の細かい流れを掴みたい時に便利です。

■ステップオーバー
ブレークポイントが関数内に設定されている場合、関数内の処理を全て実行した後の行で止まります。大まかな処理の確認をしたい時に便利です。

■ステップアウト
ステップオーバーと同様ブレークポイントが関数内に設定されている場合に残りの処理を全て実行します。その後、関数の呼び出し元に戻ります。

上記画像のようにminify化されているJavaScriptは、画像左下の {} ボタンでbeautifyする事ができます。

Elementsタブで要素を選択し、右のStyleタブの :hov をクリックします。すると、すぐ下に Force element state が表示されるのでチェックすることで状態を強制できます。
わかりにくいかもしれませんが、下記画像は :hover を強制しています。

今回は長々とChromeでのデバック方法を紹介しましたが、文章を読むより実際に使って見た方がよく理解出来るかと思います。いちいちconsoleオブジェクトで確認するよりもChromeで確認した方が早い場合がほとんどなので、みなさんも是非使いこなしてください！