Help us understand the problem. What is going on with this article?

Node.jsでもSpy-jsを使ってみる

More than 5 years have passed since last update.

WebStorm 8とSpy-jsによるJavaScriptのトレースについてはこちらですでに解説しましたので、今度は噂のWebStorm 9の新機能、「Spy-js for Node.js」を試してみようと思います。と言ってもほとんどやることは変わらず、Webアプリケーションの方で出来たことがNode.jsでも出来るよというだけのことです。

この記事の作成にあたってはWebStorm公式ブログを参考にしました。

※この解説で使用したWebStormは WebStorm 9 EAP WS-138.1495です。正式アップデートに向けて今後変更される可能性もあるので注意してください。また、WebStorm 9 EAPの使用も自己責任でお願いします。

サンプルプロジェクトを作る

今度はNode.jsのアプリケーションを作るので、簡単に済ませるために新規プロジェクトを「Node.js Express App」で作成しましょう。「Express」というのはNode.jsのウェブアプリケーションフレームワークです。

プロジェクトを作成したらまずは一度実行してちゃんと動くか試してみましょう。デフォルトではlocalhostの3000番ポートでExpressが立ち上がっているはずです。

Imgur

実行構成を作る

ちゃんと動くのを確認したところで、Spy-jsを使う準備をしましょう。一旦Runウィンドウからプログラムを停止して、「Run」>「Edit Configurations」から実行構成ダイアログを開きます。「+」ボタンから「Spy-js for Node.js」を選択してください。実行するJavaScriptファイルは先ほど実行したNode.jsと同じように「bin/www」を指定します。

Imgur

実行してみる

それでは作った実行構成を使ってみましょう。実行するとRunウィンドウが表示され、早速サーバー側のイベントが表示されるはずです。先ほどと同じようにlocalhostの3000番ポートにアクセスするとページが表示され、Spy-js側にもたくさんイベントが発生しているのがわかると思います。

Imgur

たくさんあるイベントのうち、「fs.stat」の実行時間が長い方を開いてください。これがExpressとブラウザの応答の主な処理を行っているイベントです。先頭に「send」というファイルのメソッドがあり、展開するととんでもない数と深さになっていると思います。実はこれはほとんどがExpressのnode_module内のスクリプトファイル由来のもので、特に見たいものではありません。なのでフィルタリングをしてみましょう。Runウィンドウの左上にある漏斗のボタンを押して、「Edit Capture Exclusions」を選択します。下の画像のように、node_moduleの中の関数は除外するように設定して、もう一度Spy-jsを実行しなおしてみましょう。するとfs.statsイベントは消えて、「SendStream.error」というイベントに変わっているはずです。これを開き直すと、自分のプロジェクトの「routes/index.js」ファイルが先頭にきています。

Imgur

トレースされているindex.jsの無名関数はURLのルーティングを行う関数で、リクエストとレスポンスが引数に渡されているのでここでチェックすることができます。

Imgur

おまけ

ここまでSpy-jsを使ってきましたが、トレース結果のソースに緑色のハイライトがかかっているのには気づいていますよね?これは実際に実行されたコードを色付けしています。それがよく分かる例を試してみましょう。

プロジェクト内の「routes/index.js」を次のように書き換えます。

index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res) {
  var i = Math.round(Math.random());
  if (i == 0) {
    res.render('index', {title: 'Express 0'});
  }
  else{
    res.render('index', {title: 'Express 1'});
  }
});

module.exports = router;

ランダムにページのタイトルが変わるようにしてみました。これでSpy-jsを実行して、さっきと同じように「SendStream.error」イベントを見てみましょう。ifの分岐のどちらに進んだのか、緑色のハイライトで一目瞭然ですね。ここで乱数の値iが読めないのは前回のWebアプリケーションのSpy-jsのほうで述べたとおりです。

Imgur

lacolaco
I play Angular and pray for Angular. No Breaking Changes, No Life.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした