WebStorm+Chrome+BrowserSyncでJavaScriptデバッグ #JavaScript

「WebStorm」とJetBrains製品共通のChromeプラグイン「JetBrains IDE Support」を利用すると、ブラウザ上で実行されるJavaScriptでも、本格的なデバッグを行うことができます。

今回はそのデバッグ方法を紹介したいと思います。
使用するWebサーバは最近お気に入りの「BrowserSync」を使っています。

今回やる事

WebStormのコンソールにログを出力
WebStormのエディタで変数/プロパティの中身をリアルタイム表示
WebStormでブレークポイントを設定してJavaScriptを一時停止
→　コールスタックを辿ったり、変数/プロパティの中身を調べたり

動作環境

Windows 7 64bit
WebStorm 9
→　最近リリースされた最新版
JetBrains IDE Support 2.0.7
→　Chromeプラグインの最新版

準備

WebStormをインストール
JetBrains IDE Support - Chrome ウェブストアからプラグインをChromeにインストール
BrowserSyncの環境構築
→　以前に「複数ブラウザ/端末を同期してくれるBrowserSyncが便利」という記事を書いていますので、こちらを参考にしてもらえればと思います。

BrowserSyncの起動

デバッグに使用するWebサーバとしてBrowserSyncを起動しておきます。
URLはデフォルトのhttp://localhost:3000/で説明していきます。

WebStormの設定

WebStormで任意のプロジェクトを開き、メニューバーからRun -> Edit Configurations...をクリックし、Run/Deug Configurationsダイアログを開きます。
（以下、直訳して「実行/デバッグ構成」と記述します。）

そして、左上の+ボタンを押し、JavaScript Debugを選択します。

続いて、Nameの欄には適当な名前を入れ、URLに先ほどのBrowserSyncのサーバURL、BrowserはChromeを選択しておきます。

設定項目

Name: BrowserSync Debug
URL: http://localhost:3000/
Browser: Chrome
Remote URLs of local files: 特に設定なし

最後のRemote URLs of local filesはWebサーバのルートディレクトリがプロジェクトのルートディレクトリと異なる場合に設定します。

この関係が正しく設定されていると、デバッガ経由でファイルを開いた場合にローカルのファイルを参照してそのまま編集できるようになります。
逆に、正しく設定されていないとWebサーバ上のファイルを読み取り専用で開いてしまいますので注意が必要です。

今回は説明を簡略化するためにプロジェクトのルートディレクトリをWebサーバのドキュメントルートと同じにしましたので、特に設定していません。

サンプルコード

デバッガを試すためのサンプルコードは以下の通りです。

index.js

// グローバル変数
var global;

$(document).ready(function () {
    console.log("start"); // コンソール出力

    // ローカル変数
    var local;

    // set1ボタンクリックで各変数に1を代入
    $("#set1").click(function(){
        local = 1;
        global = 1;
        console.log(global, local); // コンソール出力
    });
    // set2ボタンクリックで各変数に2を代入
    $("#set2").click(function(){
        local = 2;
        global = 2;
        console.log(global, local); // コンソール出力
    });

});

HTMLのソースコードは特に載せませんが、idがset1とset2になっているボタンを配置して、JavaScriptではそのボタンをクリックすると変数globalとlocalの値を変わるようになっています。

JSファイルはindex.jsという名前でプロジェクトのルートに置いておきます。
また、HTMLファイルはindex.htmlという名前で同じくルートに置いておきます。

デバッガの起動

次に、WebStormの画面右上辺りにある虫アイコンのボタンを押してデバッガを起動します。
左のプルダウンメニューが先ほど作ったBrowserSync Debugになっている事も念のため確認しておいてください。
今回作ったもの以外に他の「実行/デバッグ構成」も用意している場合はここから選ぶ事になります。