Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには？

.NET TIPS

Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには？

デジタルアドバンテージ　一色政彦
2007/03/15

　Visual Studio 2005（以降、VS 2005）やVisual Studio .NET 2002／2003（以降、VS.NET）では、（ASP.NETのWebページだけでなく）通常の静的HTMLページのJavaScriptコード（厳密にはJScriptコード）もデバッグすることができる。そのデバッグの際には、通常の.NETコードの場合と同じように、コール・スタックやウオッチ機能が利用できて便利である。そこで、本稿ではそのデバッグ方法を紹介する。

サンプルHTML Webページの準備

　本稿では、サンプルとして次の画面のようなHTMLページを作成する。

本稿で作成するサンプルHTML Webページ

　このサンプルWebページは、［ファイル内JavaScript］ボタンをクリックすると「ファイル内部に記述されたJavaScriptコード」（以降、内部JavaScriptコード）が実行され、［外部ファイルJavaScript］ボタンをクリックすると「外部ファイルに記述されたJavaScriptコード」（以降、外部JavaScriptコード）が実行されるという内容になっている。どちらの実行結果も、単にJavaScriptのメッセージ・ボックスを表示するだけだ（＝JavaScriptのwindow.alert関数の実行）。

　それではVS 2005でこのHTML Webページ用のプロジェクトを作成しよう。

■サンプルの静的HTMLサイトの準備

　まず、空のWebサイトのプロジェクトを作成する。具体的にはVS 2005のメニュー・バーの［ファイル］－［新規作成］－［Web サイト］から［新しい Web サイト］ダイアログを表示し、そこで「空の Web サイト」テンプレート（従来のVS.NET環境なら「空の Web プロジェクト」テンプレート）から任意のWebサイト・プロジェクトを作成する（［場所］や［言語］は何でもよい）。

　次に、そのプロジェクトにHTMLファイルを追加する。これには、ソリューション・エクスプローラでプロジェクトを右クリックしてコンテキスト・メニューを表示して［新しい項目の追加］を選択し、表示される［新しい項目の追加］ダイアログで「HTML ページ」テンプレートからHTMLファイルを新規作成して追加する（本稿では「HTMLPage.htm」というファイル名で作成した）。

　そして、IDEのWebフォーム・デザイナのデザイン・ビューで、ツールボックスから［HTML］要素の「Input (Button)」を2つ、ドラッグ＆ドロップで貼り付け、それぞれのプロパティ値を次のように設定・変更する。

コントロール	プロパティ	値
［ファイル内JavaScript］ボタン	(Id)	ButtonInner
	Value	ファイル内JavaScript
	Style	WIDTH： 200px
［外部ファイルJavaScript］ボタン	(Id)	ButtonOuter
	Value	外部ファイルJavaScript
	Style	WIDTH： 200px

2つのボタンに対するプロパティ設定

　以上の準備ができたら、JavaScriptコードを実装していこう。

■内部JavaScriptコードの実装

　内部JavaScriptコードを実装するには、フォーム・デザイナのデザイン・ビューで［ファイル内JavaScript］ボタンをダブルクリックしてClickイベント・ハンドラ（＝JavaScriptコードのonclickイベント・ハンドラ）を追加する。そのイベント・ハンドラ（本稿の例ではButtonInner_onclick関数）に、何かしらの処理コード（本稿の例ではwindow.alert関数によりメッセージ・ボックスを表示するコード）を書き加える。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

  <title>JavaScriptデバッグのページ</title>



<!--内部JavaScriptコードの実装-->

<script language="javascript" type="text/javascript">

// <!CDATA[

function ButtonInner_onclick() {

  window.alert("ファイル内のJavaScriptの実行！");

}

// ]]>

</script>



</head>

<body>

  <input id="ButtonInner" type="button" value="ファイル内JavaScript"

    onclick="return ButtonInner_onclick()"

    style="width: 200px" />

  <br />

  <input id="ButtonOuter" type="button

    value="外部ファイルJavaScript" style="width: 200px"  />

</body>

</html>

内部JavaScriptコードが実装されたHTMLページ（HTMLPage.htm）

　同様の手順で外部JavaScriptコードのClickイベント・ハンドラも作成する。作成したそのイベント・ハンドラ（本稿の例ではButtonOuter_onclick関数）は、次に説明する手順によって外部ファイルに移し、そこで処理内容（本稿の例ではメッセージ・ボックスの表示）を実装する。

■外部JavaScriptコードの実装

　外部JavaScriptコードを実装する前に、その外部ファイルとなる.jsファイル（JavaScriptファイル）を追加しておく必要がある。.jsファイルは、［新しい項目の追加］ダイアログの「JScript ファイル」テンプレートから作成できる（本稿では「JavaScriptFile.js」というファイル名で作成した）。

　作成したら、HTMLページの方に、その外部JavaScript（.js）ファイルを読み込むコードを記述する。具体的には次の（太字の）コードだ。

……省略……

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

……省略……



<!--外部JavaScript（.js）ファイルの読み込み-->

<script src="JavaScriptFile.js" type="text/javascript"></script>



</head>

……省略……

</html>

外部JavaScriptファイルを読み込むコード（HTMLPage.htm）

　この際、次の画面のようにIntelliSenseも利用できるので、コードの記述は簡単である。

外部JavaScriptファイルの読み込みコードでも働くIntelliSense機能

　次に、.jsファイルを開いて、先ほど生成したClickイベント・ハンドラ（本稿の例ではButtonOuter_onclick関数）を外部JavaScriptファイルに移し、次の（太字の）コードを追記する。

// JScript ファイル



function ButtonOuter_onclick() {

  window.alert("外部ファイルのJavaScriptの実行！");

}

外部ファイルに実装されたJavaScriptコード（JavaScriptFile.js）

　以上で準備はほぼ完了だ。実際にWebブラウザで表示してみよう。

　HTMLページ（本稿ではHTMLPage.htm）をスタート・ページに設定して（※ソリューション・エクスプローラのコンテキスト・メニューから行える）、メニュー・バーの［デバッグ］－［デバッグ開始］（もしくは［F5］キー）を実行する。すると、（VS 2005の場合）次の［デバッグが無効です］ダイアログが表示される。

Web.configがない場合に表示される［デバッグが無効です］ダイアログ

　Visual StudioのWebページのデバッグではWeb.configファイルが必要になる。そこで、このダイアログの［新しい Web.config を追加してデバッグを有効にする］を選択して［OK］ボタンをクリックし、プロジェクトにWeb.configファイルを追加しよう。なお従来のVS.NET環境では、このダイアログは表示されずに単にエラーが表示されるだけなので、Web.configファイルを（［Web 構成ファイル］テンプレートから）手動で追加する必要がある。

　これでデバッグが可能になるはずだ。デバッグ実行されたHTMLページ上のボタンをクリックすると、実装どおりのメッセージ・ボックスが表示され、正しくJavaScriptが実行されるのを確認できるだろう。

　それでは、メッセージ・ボックス表示を行うJavaScriptコードで、デバッガ・ブレイクさせてみよう。

JavaScriptコードをデバッグするための事前準備（IEの設定）

　実際にデバッグを行うには、IE（Internet Explorer）側の（［スクリプトのデバッグを使用しない (Internet Explorer)］のチェックを外す）設定が必要になる。具体的には次の画面を参考にしてほしい。

IEの［インターネットオプション］ダイアログにおけるデバッグの設定

［インターネットオプション］ダイアログは、IEのメニュー・バーの［ツール］－［インターネットオプション］から表示できる。［詳細設定］タブを開き、［ブラウズ］カテゴリの［スクリプトのデバッグを使用しない (Internet Explorer)］のチェックを外す。

　あとはいつもどおりVisual StudioのIDE機能を駆使してデバッグが行える。

内部JavaScriptコードのデバッグ

　内部JavaScriptコードにデバッガ・ブレイクを設定してデバッグ実行したのが、次の画面だ。

内部JavaScriptコードにおけるデバッガ・ブレイク

　このようにデバッグ・ブレイクさせると、JavaScriptコードにおいてもコール・スタック（＝呼び出し履歴）や変数の内容参照（＝ウォッチ機能）などを利用できることが分かる。

外部JavaScriptコードのデバッグ

　外部JavaScriptコードの場合も同様にデバッグできる。

外部JavaScriptコードにおけるデバッガ・ブレイク

■

　このようにVisual Studioを使えばIE上で実行されるJavaScriptコードを簡単かつ高度にデバッグできる。しかし残念ながら、Visual StudioではFirefoxなどほかのブラウザ上のJavaScriptコードはデバッグできない。この問題に対処するには、例えばFirefoxでデバッグするために提供されている「Firebug」アドオンなどを使えばよい（※もちろんwindow.alert関数を駆使してデバッグすることもできるが、お勧めできない）。

　IE上のデバッグ実行で正しく動作するJavaScriptコードであっても、Firefoxなどほかのブラウザでも同じように正しく動くとは限らない。従って、マルチ・ブラウザをターゲットとするHTMLページでは、IE以外のブラウザでも動作確認が必要だ。

カテゴリ：Visual Studio .NET　処理対象：IDE
カテゴリ：Visual Studio 2005　処理対象：IDE

この記事と関連性の高い別の.NET TIPS

		IE開発者ツールでJavaScriptコードを整形して表示するには？
		［Silverlight 2］HTMLページ内のJavaScriptコードを実行するには？
		［Silverlight 2］文字列として作成したJavaScriptコードを実行するには？
		ASP.NETでボタンのクリック時に確認メッセージを表示するには？
		［ASP.NET］Ajax.NETでAjaxプログラミングを効率化するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える