[Node.js] nodemon Chrome DevToolsで、デバッグしてみる

nodemon debugger Chrome DevToolsを使って、非常に便利なデバッグの方法を解説していきます。

debugger

コード内に、debugger;を入れておくとそこで処理が止まり、それまでに出てきた変数の中身などを確認できるようになります。

railsでいう、binding.pryみたいなものですね。

以下の記事に詳しい使い方などを記載しているので、参考にしてください。

今回の記事でもこのdebugger;を使って、デバッグしていきます。

[node.js] デバッグにはdebuggerを使うべき!

2018.09.11

 

実際にデバッグする

では実際に、デバッグしていきましょう。

今回は、以下のファイルをデバッグします。

./bin/wwwファイルをnodemonで監視します。

以下の画像のように–inspectフラグをつけて、bin/wwwを起動します。

Debugger listening on ….

と表示されれば準備完了です。

あとは、処理を止めたい箇所に、debuggerを入れます。

ここまで完了した段階で、chrome://inspectにアクセスします。すると、以下の画像のようなページに遷移するかと思います。

 

inspectをクリックすると、Chrome DevToolsが起動します。

 

あとは、実際にdebuger;を書いた箇所で、処理が止まるのか確認します。

Sourcesを押すと、実際に処理がdebuger;の箇所で止まっているのが確認できます。

処理を止めたこと所で、再びConsoleに行くと、デバッグできます。

 

以上で完成です。

これで、快適にデバッグできるようになりますね。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA