node.jsをGoogle Chromeでデバッグ

JavaScript


node.jsで開発していると、サーバ側のデバッグは単純な場合、console.logを使って変数などをコンソールに出力すると思います。ただ、これだとオブジェクトなどの変数が展開されて表示されるため、変数の構造が込み入ったものの場合、とても探しにくい事があります。

PHPなどでもクライアントブラウザのコンソールに出力するツールなどはありますが、node.jsでも同じくあります。いくつか選択肢がありますが、そのうちのいくつかを挙げていこうと思います。

Chrome Logger

まずはChromeのExtensionをダウンロードします。Chrome ウェブストアはこちら。
これがnode側のモジュールからのデータを受信して表示してくれます。

express-chrome-logger

名前の通り、Express.jsで簡単に使う事を想定されているようです。
では、さっそくインストールして使ってみます。

$ express -e chrome_debug
$ cd chrome_debug && npm install
$ npm install express-chrome-logger --save
app.js
// express.methodOverride()より前に記述
app.use(require("express-chrome-logger"));
app.use(express.methodOverride());
// ...
app.get('/', function(req, res) {
  res.console.log({a:'b', c:1});
  res.end('Hello World');
});

Chrome Loggerのアイコンをクリックして有効化した後、実行、アクセスします。
すると以下のような感じでコンソールに表示されます。

良さげです。
でも、出力する変数をresとかにすると・・。

あらら・・。

という事で、もう一つの方を試してみます。

node-chromelogger

こちらもほとんど同じです。同じプロジェクトで続きをやります。

$ npm install chromelogger --save
app.js
var chromelogger = require('chromelogger');

// こっちもexpress.methodOverride()より前に記述
app.use(chromelogger.middleware);
app.use(express.methodOverride());
// ...
app.get('/', function(req, res) {
  res.chrome.log(req);
  res.end('Hello World');
});

実行してみましょう。

ちゃんと表示され、展開もできました。う〜ん便利。

developmentの場合のみ出力させる

ついでにproductionの場合には不要なので、developmentの場合のみに出力されるように変更してみます。

app.js
app.use(express.bodyParser());

// development only
if ('development' == app.get('env')) {
  app.use(chromelogger.middleware);
}

app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
} else {
  express.response.chrome = { 
    log: function(){}
    //log: function(msg){ console.log (msg);}
  };
}

NODE_ENVを変更して実行してみます。

$ NODE_ENV=production node app.js

これで出力されなくなればOKです。

あ、package.jsonはdependenciesからdevDependenciesに移すか、

$ npm install --save-dev chromelogger

でインストールするようにしてくださいね。一応、残しておきます。

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.0",
    "ejs": "*"
  },
  "devDependencies": {
    "chromelogger": "~1.1.0"
  }
}