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

WebStorm+Spy-jsの使い方

More than 5 years have passed since last update.

WebStorm9のEAPが始まり、目玉機能の一つに「Spy-jsのNode.jsトレース」が掲げられていますが「そもそもSpy-jsって何なの?」っていう方も多いと思いますので、今更ですがWebStorm8のSpy-jsと使い方をおさらいしておこうと思います。

なお、この記事の内容はWebStorm公式ブログを参考にしました。動画もあるのでぜひご一読ください。

Spy-jsとは?

Spy-jsはJavaScriptの トレースデバッグプロファイリングの3つの機能から構成されるツールです。Spy-jsはWebStorm, PhpStorm, RubyMine, PyCharm(Professional), IntelliJ IDEA(Ultimate)にバンドルされていますが、スタンドアロンで動くものも配布されています。WebStorm8ではWebアプリケーションだけですが、WebStorm9ではNode.jsのサーバーアプリケーションに対しても使えるようになります。

トレース

Spy-jsのトレース機能は「console.log無しでコードを追いかける」ことが可能です。ブラウザ依存性がなくなり、あらゆるプラットフォーム、デバイス、ブラウザで、イベントの発生タイミングや、ユニットテストの実行などが行えるようになります。

デバッグ

Spy-jsでは、トレースした時点での引数の値を見ることが出来ます。つまり、「ブレークポイントなしでデバッグ」が行えます。また、Spy-jsからソースコードへジャンプするのも簡単です。

プロファイリング

イベントで呼び出された関数がどれだけの時間を使ったかをSpy-jsが表示してくれるので、アプリケーションの高速化、最適化に大活躍です。

実際に使ってみないとこの強力さは実感できないと思うので、これから簡単なデモアプリで試してみましょう。

Spy-jsを試してみよう

それではお手元のWebStorm8を起動してください。適当にEmpty projectを作ってこんな感じのHTMLとJSを書きます。アプリケーション側でSpy-jsを意識する必要はありません。

index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
<div>
    <input id="input" type="text"/>
    <button onclick="onClick()">Click</button>
    <h4 id="label"></h4>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
function onClick() {
  var input = document.getElementById("input");
  setLabel(input.value);
}

function setLabel(text){
  var label = document.getElementById("label");
  label.innerHTML = text;
}

実行構成を作る

WebStormで「Run」>「Edit Configurations」をクリックしてください。出てくる実行構成ダイアログの左上に「+」ボタンがあるのでクリックして、下の方にある「Spy-js」を選択します。
適当に名前をつけて、「URL to trace」にトレースするページのURLを入力します。プロジェクト内のHTMLであれば右側のドロップダウンリストから、自動的にWebStormの開発サーバー上で立ち上げられるURLを選択できます。

Imgur

実行する

実行構成が出来たら早速実行しましょう。実行するとRunウィンドウが下のペインに開くので、index.htmlをブラウザでプレビューしましょう。ご存知かとは思いますがHTMLのプレビューはindex.htmlをエディタで開き、右上に出てくるブラウザのアイコンをクリックです。

ブラウザの右上にスパイのアイコンが浮かんだら接続成功です。一度でうまくいかないことが多々あるのでその時はリロードしてください。

spyjs_anim.gif

接続したらRunウィンドウにさっそくトレース結果が表示されているはずです。「script app 0.242ms」は「scriptタグでapp.jsを読み込むのに0.242msかかった」という意味です。クリックすると呼び出しの内訳が右側に表示されます。「app global scope 0.242ms」と表示されているのは、「app.jsのグローバルスコープの実行に0.242msかかった」というプロファイリング結果です。その右側には実行時の変数の値が表示されています。

Imgur

それでは本番です。input要素に適当に文字を入力して、ボタンをクリックしてみましょう。トレース結果に「click」イベントが表示されるはずです。内訳には「onClick」と、そこから呼び出される「setLabel」が表示されています。

「setLabel」をダブルクリックするとソースコードにジャンプして呼び出された関数が見れます。さらに引数にマウスを乗せるとその時の値が確認できます。Runウィンドウの右側にも同じものが表示されていますね。残念ながらローカル変数にアクセスすることは出来ないのですが、デバッグが必要な値はそもそもローカル変数にするなという気もします。きちんと関数が分離されていれば必要な値はブレークポイント無しでもスパイが見ていてくれます。

Imgur

ところで、もう一度ボタンをクリックしてみると、「click」イベントが x2となりますね。同じイベントのトレースは自動でグルーピングされ、表示される実行時間はグループ内の平均値になります。簡易的なベンチマークのように使ってもいいですね。

また、「click」を右クリックすると、「click」イベントをミュートする(トレース対象から外す)ことや、逆に「click」イベントだけをキャプチャすることが可能です。

もっと詳しく知りたい方は

Spy-jsの詳しいドキュメントはGitHubに書かれています。Spy-jsが動く仕組みや、もっと詳しい使い方について知りたい方はぜひ御覧ください。

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
ユーザーは見つかりませんでした