16
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

標準ではないけどNode.jsの便利なデバッグ方法

Last updated at Posted at 2017-01-13

Node.js をデバッグする方法はいくつかありますが
今回は標準ではないですが、便利な方法があるので紹介します

使うもの

  • Node.js v6.6 以上
    v6.3 からでも可能ですが、いろいろバグがあるらしいので
  • Chrome v55 以上

前準備

標準の方法ではないため、Chrome のフラグを設定する必要があります

デベロッパー ツールの試験運用版機能の有効化

Chrome で chrome://flags/#enable-devtools-experiments を開き、有効にします

enable-devtools-experiments.png

「有効にする」をクリックすると、ブラウザの再起動を要求されるので、再起動します

Node debugging の有効化

ディベロッパーツールの設定を開くと、↓このように「Experiments」が追加されています

settings-experiments1.png

ここで、Shift キーを6回叩くと・・・

settings-experiments2.png

裏設定?が表示されるので、「Node debugging」にチェックを入れます
重要な設定はこれです


これで準備完了です

サンプルプログラム

express を使った簡単なサンプルプログラムを用意します

app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

デバッグ

ディベロッパーツールを開いた状態で、ターミナルで下記コマンドを実行します

node --inspect --debug-brk app.js

--inspect フラグを付けることでデバッグができます
--debug-brk フラグを付けると実行開始時に最初の行で一時停止した状態になります

実行すると「chrome-devtools://...」のような URL が表示されるので、それを Chrome で開いてもデバッグできますが
今回の方法ではそれが必要ありません

demo.gif

動画を見てもらうとわかると思いますが、自動的に Chrome にアタッチしてくれます
いちいち URL をコピペしなくて済むので楽ですね

注意点

たまに自動アタッチが効かなくなる時がありますが
その時は「Node debugging」フラグが外れてたりしますので
再チェックしてください
Chrome のバージョンアップ後に多いので、その際にリセットされてるのかもしれません

16
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?