Visual Sudio 2012 の Windows ストア アプリと Web コンテンツの基本的なデバッグ機能


前回に引き続き、これから Visual Studio を使用されるという人向けに、今回は、以前のバージョンから引き継がれた Windows ストア アプリと Web コンテンツ用の基本的なデバッグ機能について紹介します。

 

JavaScript のデバッグ機能

ソフトウェアの開発ツールである Visual Studio は、サポートする開発言語について強力なデバッグ機能を提供しており、JavaScript も例外ではありません。

プログラムの実行を任意の箇所で中断し、1 ステップずつの実行や変数の中身の確認、関数の場合はどの順序でどう呼ばれたかなどの情報を視覚的に確認することができます。

ここではこれら JavaScript コードのデバッグ機能について紹介します。

 

ブレークポイント

Visual Studio では、JavaScript コードの任意のステップに停止位置を設け、実行を中断させることができます。

この機能をブレークポイントといいます。

JavaScript コードにブレークポイントを設定するには、以下の方法があります。

JavaScript コード中の任意の位置にカーソルを移動し、

  1. Visual Studio のメニュー [デバック] – [ブレークポイントの設定/解除] を選択
  2. キーボードの [F9] キーを押下
  3. エディタ画面の左端の灰色の部分をクリック

ブレークポイントが設定されると、実行の集団箇所が赤くマークされます。

image(ブレークポイントを設定したところ)

 

ブレークポイントを使用したデバッグを開始するには、Visual Studio のメニュー [デバッグ] – [デバッグ 開始] を選択するか、キーボードの [F5] キーを押下します。

処理がブレークポイントの箇所にさしかかると、状態を保ったままコードの実行が中断します。

image(ブレークポイントでコードの実行が中断したところ)

 

処理の中断している箇所は黄色く反転します。この状態からコードを一行ずつ実行したり、変数の内容を確認したりしていきます。

 

ステップ実行

ブレークポイントで処理が中断した状態で、メニュー [デバッグ] – [ステップイン] を選択するか、キーボードの [F11] キーを押下すると、コードの実行を 1 ステップずつ進めることができます。

また、この状態で実行中のコードのスコープ内にある変数の上にマウスポインタをホバーさせると、変数の内容を確認することができるので、ステップ実行で、処理の流れを確認しつつ、分岐の際には条件となっている変数の内容を確認したり、また違うものに変更したりして結果を確認することができます。

image(マウスホバーで変数の内容を表示)

 

変数の中身がオブジェクトだった場合は、プロパティの一覧とその値、下位のオブジェクトなどを展開して確認することができます。

image(現在のオブジェクトの内容を表示)

 

ウォッチ機能

デバッグ実行中に変数の上にマウスをホバーすることで、その内容を確認することができますが、ステップ実行中に継続して変数の内容を監視したい場合や、複数の変数の中身を監視したい場合には ウオッチ 機能を使用することができます。

image(ウォッチ機能での変数の内容の確認)

 

ウオッチ 機能のウィンドウは既定でデバッグ中に表示されるようになっており、画面下部のタブで選択できるようになっています。

image([ウォッチ]タブ)

 

[ウォッチ] タブが表示されていない場合は、デバッグ実行中に、Visual Studio の メニュー [デバッグ] – [ウィンドウ] – [ウォッチ] を選択します。

その他、ローカル、イミディト等のデバッグ中に使用されるウィンドウのメニューも、デバッグ実行中でなければ表示されませんので注意が必要です。

 

ローカル

デバッグ実行中の [ウオッチ] タブの横に並ぶ [ローカル] タブでは、現在の実行コンテキスト内にある全ての変数の内容を確認することができます。

[ローカル] の機能を使用すると、アプリケーション全体のある状態を俯瞰的に観察することができます。

image([ローカル]タブでの現在の実行コンテキストの内容の表示)

呼び出し履歴

デバッグ実行中に表示される [呼び出し履歴]機能を使用すると、現在実行中のコードがどこから呼び出されたものなのかを確認できるとともに、グリッドに表示された呼び出し箇所をダブルクリックすることでその呼び出し箇所を確認することができます。

とくにデバッグ実行中にエラーの発生でブレイクした際は、とりあえずそのひとつ前の呼び出し箇所を確認してみることをお勧めします。

image(呼び出し履歴の表示)

イミディエイトウィンドウ

[イミディエイト] ウィンドウは、ウィンドウに その式の評価とデバッグ、ステートメントの実行、変数値の出力などを行うことができます。

変数の値や関数の返り値を[イミディエイト] ウィンドウ内に表示するには Debug.Print コマンドを使用しますが、省略した記述として ? (クエスチョン) マークも使用できます。

image([イミディエイト] ウィンドウを使用した式の確認)

JavaScript コンソール

既定の状態では表示されていませんが、デバッグ実行時にメニュー [デバッグ] – [ウィンドウ] – [JavaScript コンソール] を選択することで JavaScript を使用した評価を行うことができる [JavaScript コンソール] ウィンドウを表示させることができます。

image([JavaScript コンソール]を使用した JavaScript の実行)

 

[JavaScript コンソール] の JavaScript 式の入力欄は既定で 1 行ですが、上下に広げることにより複数行にまたがるコードを記述して評価することができます。

 

image(複数行にわたる JavaScript 構文の実行)

 

[JavaScript コンソール]からは実行中のアプリケーションの HTML DOM へのアクセスが可能なので、エレメントの様々なプロパティにアクセスして状態を調べたり、検証を行ったりすることができます。

 

<参考>

その他、Windows ストア アプリ (JavaScript) のデバッグについての詳細は、以下のドキュメントを参照してください。

 

デバッグ セッションの開始方法 (JavaScript)
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh771032

 

クイック スタート: デバッガーのナビゲーション (JavaScript)
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh924759

 

 

HTML DOM のデバッグ機能

Visual Studio の HTML エディタは、編集中の HTML タグについては、[ターゲット スキーマ] で指定した HTML のバージョンがサポートしないタグについて波線とツールチップを表示して警告を発します。

 

その他 HTML DOM デバッグ機能

Visual Studio 2013 には、その他 DOM エクスプローラーページインスペクター といった強力な HTML DOM のデバッグ機能が新規に搭載されています。

これらについては、後日詳しく紹介させていただきます。

 

——————————————————————–

今回は Visual Studio 2012 での Windows ストア アプリと Web コンテンツの基本的なデバッグ機能について紹介しました。

次回は、同じく Windows ストア アプリと Web コンテンツ開発について、新しく搭載された機能について紹介していきます。

 

 

Web Statistics

Clicky

Comments (0)

Skip to main content