Visual Studio で Javascript のデバッグ

昨日、Visual Studio 2012 で jQuery 開発環境を構築したので、本日はデバッグを行なってみたいと思います。

準備

今回は、以下のようなコードを用意してみました。
ボタンを押すとカウントアップしていく超シンプルなコードです。

HtmlPage1.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <input type="button" class="button" value="click me" />
 
    <div class="textarea"></div>
 
    <script src='Scripts/jquery-1.9.1.min.js'></script>
    <script src='JavaScript1.js'></script>
</body>
</html>

JavaScript1.js

$(document).ready(function () {
    $(".button").click(function () {
        $(".textarea").html(Counter.increment());
    });
});
 
var Counter = {
    i: 0,
    increment: function () {
        this.i++;
        return this.i;
    }
};

デバッグ実行

デバッグの実行方法はいろいろありますが、今回はツールバーのデバッグボタンを押してみます。
Internet Explorer と表示されているボタンです。

この時、現在アクティブになっているページで動作が変わるので注意が必要です。
Javascriptファイルを開いているときにデバッグ実行しようとすると、以下のようなエラーが出てしまいます。

HTTP エラー 403.14 - Forbidden
Web サーバーは、このディレクトリの内容の一覧を表示しないように構成されています。

HTMLファイルを開いている場合は、ウェブページが表示され、デバッグ可能です。

毎回、HTMLを開き直してデバッグ開始するのも面倒くさいので、強制的にHTMLからデバッグを開始する方法も用意されています。
変更する方法については後ほど書きたいと思います。

ブレークポイントで止める

開発環境から起動できるだけならば、大したメリットではありません。
やはり、ステップ実行等が出来るのが一番のメリットかと思います。

ブレークポイントは、コードの左端をダブルクリックすることで仕掛けることができます。

実行してみると以下のとおり。
当然、オブジェクトの状態なども見ることができます。
ステップ実行も可能です。

Internet Explorer 以外のブラウザを起動する

デフォルトでは Internet Explorer がターゲットですが、ツールバーから変更することが可能です。
以下のように、インストールされているブラウザが一覧表示されるのでその中から選びます。

ただし！
Internet Explorer 以外では Visual Studio からのデバッグがうまくいきません。

そういうわけで、Internet Explorer 以外を選ぶメリットはあまりないでしょう。
ある程度、動作が安定してきたときにクロスブラウザチェックをする等に使う感じでしょうか。

起動ページを固定する

デフォルトではデバッグを開始した時に開いているページがエントリーポイントになります。
しかし、Javascript ファイルなどを開いていると上述のようにエラーになってしまいます。

毎回 HTMLページを開いてからデバッグを開始するのも面倒なので、以下のようにして開始ページを固定する事ができます。

プロジェクトを右クリック → プロパティ → Web

開始動作を「現在のページ」から「ページを指定する」に変更し、HTMLファイルを指定します。
これで、どの状態から起動しても、必ず指定したページが開くようになります。
Javascript をバリバリ書いている最中は結構便利です。

穀風