.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以外のブラウザでも動作確認が必要だ。End of Article

カテゴリ: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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間