クイック スタート: アプリのデバッグ (JavaScript)

Visual Studio では、JavaScript を使用する、Windows 用にビルドした Windows ストア アプリケーション用の総合的なデバッグ機能が提供されており、Internet Explorer および Visual Studio の開発者には使い慣れた機能が含まれています。このトピックでは、これらのアプリケーションに固有のデバッグ機能の概要と共に、これらの機能の使用方法を示すチュートリアルについて説明します。

デバッグ時には、対話形式のデバッグ モデルを使用できます。このモデルでは、レンダリングされる HTML、CSS、JavaScript のコードを表示および操作しながら、問題を修正できます。また、従来からある Visual Studio のデバッグ モデルを使用することもでき、ブレークポイントの設定やコードのステップ実行などのさらに重要なタスクを実行できます。両方のモデルを組み合わせて使用することもできます。

次の表では、JavaScript を使用する Windows ストア アプリケーションで利用できるデバッグ機能について説明し、詳細な情報へのリンクを示します。

このトピックでは、「初回例外の有効化」および「Windows ランタイム コンポーネントを使用するアプリケーションのデバッグ」で JavaScript デバッグ タスクについても説明します。

DOM Explorer を使用した対話形式のデバッグ

DOM Explorer ではレンダリングされるページのビューが示され、DOM Explorer を使用すると値を変更して結果をすぐに確認できます。これにより、デバッガーを停止して再起動しなくても、反復的なプロセスを使用して変更をテストできます。この方法でページと対話するときはプロジェクトのソース コードは変更されないので、必要なコード修正が見つかったら、デバッガーを停止して、ソース コードを変更します。

DOM Explorer を使用すると次のことができます。

• レンダリングされる HTML、CSS、および JavaScript コードを調査し、DOM 要素のサブツリー内を移動します。

• レンダリングされる要素の属性を動的に変更します。

• ページに対する CSS スタイルのアプリケーションを調査し、変更を動的に行います。

アプリケーションをデバッグするときは、しばしば DOM Explorer で要素を選択する必要があります。要素を選択すると、右側のタブに表示される値が、DOM Explorer での要素の選択を反映して自動的に更新されます。このようなタブとしては、[スタイル]、[トレース スタイル]、[レイアウト]、[属性]、[イベント] などがあります。要素の選択の詳細については、「要素の選択」を参照してください。

次の手順では、DOM Explorer を使用してアプリを対話的にデバッグするプロセスを実行します。FlipView コントロールを使用するアプリケーションを作成した後、それをデバッグします。アプリケーションのコードには複数のエラーが含まれています。

DOM Explorer で対話形式のデバッグを使用するには

1. [ファイル]、[新しいプロジェクト] の順にクリックして、Visual Studio で新しいソリューションを作成します。

2. [新しいアプリケーション] という名前の JavaScript のテンプレートを選択し、プロジェクトに FlipViewApp のような名前を入力します。

3. default.html の BODY 要素に、次のコードを追加します。

       <div id="flipTemplate" data-win-control="WinJS.Binding.Template" 
                style="display:none">
           <div class="fixedItem" >
               <img src="#" data-win-bind="src: flipImg" />
           </div>
       </div>
       <div id="fView" style="width:100px;height:100px;background-color:#0094ff" 
           data-win-control="WinJS.UI.FlipView"
               data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
       </div>
   

4. default.js のコードを、次のコードに置き換えます。

   (function () {
       "use strict";
   
       var app = WinJS.Application;
       var activation = Windows.ApplicationModel.Activation;
   
       var myData = [];
       for (var x = 0; x < 4; x++) {
           myData[x] = { flipImg: "/images/logo.png" }
       };
   
       var pages = new WinJS.Binding.List(myData, { proxy: true });
   
       app.onactivated = function (args) {
           if (args.detail.kind === activation.ActivationKind.launch) {
               if (args.detail.previousExecutionState !==
               activation.ApplicationExecutionState.terminated) {
                   // TODO: . . .
               } else {
                   // TODO: . . .
               }
               args.setPromise(WinJS.UI.processAll());
   
               updateImages();
           }
       };
   
       function updateImages() {
   
           pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
           pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
           pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
       };
   
       app.oncheckpoint = function (args) {
       };
   
       app.start();
   
       var publicMembers = {
           items: pages
       };
   
       WinJS.Namespace.define("Data", publicMembers);
   
   })();
   

   注意

   前の JavaScript コードは、匿名関数にカプセル化されています。このカプセル化は、プロジェクト テンプレートで使用される一般的なプログラミング モデルに従っています。このようにコードをラップすると、WinJS.Namespace.define 関数を使用してアプリ内のどこからでもコード要素にアクセスできます。

5. [デバッグ] ツール バーの [デバッグの開始] ボタンの横にあるドロップダウン リストの [シミュレーター] をクリックします。

   

6. [デバッグ]、[デバッグの開始] の順にクリックするか、F5 キーを押して、デバッグ モードでアプリを実行します。

   これによりアプリはシミュレーターで実行されますが、コードにはいくつかバグがあるため、画面にはほとんど何も表示されません。左上の既定のイメージは何かが読み込まれたことを示します。画面のその領域をクリックすると、コントロールがインスタンス化されたことを示す FlipView の矢印が表示されますが、コントロールは正しいサイズではありません。

   ヒント

   Alt + Tab キーまたは F12 キーを押すと、Visual Studio と実行中のアプリを切り替えることができます。ローカル コンピューターではなくシミュレーターでアプリケーションを実行している場合、Windows タスク バーの Visual Studio またはシミュレーターのボタンをクリックすることで、ウィンドウを切り替えることができます。

7. Visual Studio で [DOM Explorer] タブをクリックします。

8. DOM Explorer ウィンドウで、ID が "fView" であるセクションの DIV 要素を選択します。

   

   ヒント

   また、JavaScript コンソール ウィンドウの左下隅の >> 入力プロンプトで「select(fView)」と入力して Enter キーを押しても、DIV 要素を選択できます。

   DOM Explorer で幅と高さに正しくないピクセル値が設定されていることを確認してください。

   DOM Explorer ウィンドウの右側のタブに表示される値が、DOM Explorer での現在の要素選択を反映して自動的に更新されます。

9. [属性] タブで、style 属性をダブルクリックします。幅と高さを編集して、どちらも 100% に設定します。デバッグ セッションを停止していなくても、Enter キーを押すとすぐに、新しい値がシミュレーターに反映されます。

   

   重要

   属性の値を更新するのと同じように、[スタイル]、[トレース スタイル]、[レイアウト] の各タブに表示される値も更新できます。詳細については、「CSS 規則を検査する方法」および「レイアウトを表示および編集する方法」を参照してください。

   FlipView コントロールが正しいサイズになります。また、コントロールは正しく機能しますが、予期されるイメージの代わりに既定のイメージである不明イメージが表示され、予期されるイメージは不明イメージの間に散在しています。

   この問題は、JavaScript のコードに存在するバグのために発生しています。次のセクションでは、JavaScript コンソール ウィンドウを使用してこのバグを修正する 1 つの方法を説明します。デバッグを続行する方法については、「JavaScript コンソール ウィンドウを使用した対話形式のデバッグ」を参照してください。

更新機能を使用して HTML、CSS、および JavaScript のコードを変更し、デバッガーを停止して再起動することなくページをすばやく再読み込みできます。更新機能の詳細については、「アプリを更新する方法」を参照してください。

デバッグ中にアプリを更新するには

1. アプリケーションがまだ実行している間に、Visual Studio に切り替えます。

2. default.html を開き、"fView" DIV 要素の高さと幅を 100% に変更して、ソース コードを変更します。

3. [デバッグ] ツール バーの [Windows アプリケーションの更新] ボタンをクリックします (または、F4 キーを押します)。このボタンは次のように表示されます。

   アプリのページが再読み込みされ、シミュレーターが前面に戻ります。

   前と同じように、イメージは正しく表示されません。次のセクションでこのアプリケーションのデバッグを続行します。

JavaScript コンソール ウィンドウを使用した対話形式のデバッグ

JavaScript コンソール ウィンドウで JavaScript コードを実行および更新できます。DOM Explorer と同様に、JavaScript コンソール ウィンドウでもデバッガーを停止して再起動することなく変更をテストできるので、レンダリングされるページで結果をすぐに確認できます。必要な変更が見つかったら、デバッガーを停止してソース コードを修正します。

JavaScript コンソール ウィンドウを使用すると、以下のことが可能です。

• 単一行モードまたは複数行モードでスクリプトを実行します。

• 情報およびエラー メッセージを表示します。

• 画面のクリアなどの他のタスクを実行します。コマンドの詳細については、「JavaScript コンソール コマンド」を参照してください。

以下の手順では、「DOM Explorer を使用した対話形式のデバッグ」セクションでデバッグを開始した FlipView アプリのデバッグを続けます。FlipView コントロールが正常に動作していることは既に確認しましたが、期待されるイメージは表示されません。

フリップビュー アプリの JavaScript コードをデバッグするには

1. FlipView アプリがシミュレーターで実行している状態で、JavaScript コンソール ウィンドウの入力プロンプトに「Data.items」と入力して Enter キーを押します。

   items オブジェクトのビジュアライザーがコンソール ウィンドウに表示されます。これは、items オブジェクトがインスタンス化されて、スクリプト コンテキストで使用できることを示します。コンソール ウィンドウでは、オブジェクトのノードをクリックしてプロパティの値を表示できます (方向キーを使用します)。items._data オブジェクトをクリックすると、次の図に示すように、イメージ ソースの参照が正しくないことがわかります。既定のイメージがまだオブジェクト内に存在し、不明のイメージと予期されるイメージが混在しています。

   

2. プロンプトで「Data.items.push」と入力して Enter キーを押します。コンソール ウィンドウに Windows Library for JavaScript (WinJS) プロジェクト ファイルでの push 関数の実装が表示されます。IntelliSense を使用して少し調査すると、setAt を使用して既定のイメージを置き換える必要があることがわかります。

3. この問題を対話形式で修正するには、デバッグ セッションを停止しないで、default.js を開き、updateImages 関数から次のコードを選択します。

   pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

   次のコードをコピーし、JavaScript コンソールの入力プロンプトに貼り付けます。

   ヒント

   JavaScript コンソール入力プロンプトに複数行のコードを貼り付けると、コンソールの入力プロンプトは自動的に複数行モードに切り替わります。Ctrl + Alt + M キーを押して複数行モードのオンとオフを切り替えることができます。複数行モードでスクリプトを実行するには、Ctrl + Enter キーを押すか、またはウィンドウの右下隅の矢印記号をクリックします。

4. プロンプトで push 関数の呼び出しを修正し (pages.push を Data.items.setAt に置き換えます)、矢印記号をクリックしてスクリプトを実行します。修正後のコードは次のようになります。

   Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

5. Ctrl + Alt + M キーを押してコンソール入力プロンプトを単一行モードに切り替え、Ctrl + A キーを押して前の入力を選択し、削除できるようにします。

6. プロンプトで「Data.items.length = 3」と入力して、Enter キーを押します。これにより、データから余分な要素が削除されます。

7. シミュレーターを再び確認すると、正しいイメージが正しい FlipView ページに表示されていることがわかります。

8. DOM Explorer では、更新された DIV 要素を確認でき、サブツリーに移動すると予期される IMG 要素が表示されます。

9. [デバッグ]、[デバッグの停止] の順にクリックするか、または Shift + F5 キーを押してデバッグを停止し、ソース コードを修正します。

   修正後のサンプル コードを含む default.html ページ全体については、「アプリのサンプル コードのデバッグ (JavaScript)」を参照してください。

対話形式のデバッグと中断モード

JavaScript コンソール ウィンドウなどの JavaScript デバッグ ツールの使用中は、ブレークポイントを使用し、コードにステップ インできます。デバッガーで実行しているプログラムがブレークポイントに達すると、デバッガーは一時的にプログラムの実行を中断します。実行が中断されると、プログラムは実行モードから中断モードに切り替わります。いつでも実行を再開できます。

プログラムが中断モードのときでも、JavaScript コンソール ウィンドウを使用して、現在のアプリケーション状態で有効なコマンドおよびスクリプトを実行できます。以下の手順では、前の手順で作成した FlipView アプリを使用して、中断モードの使用方法を実演します。

ブレークポイントを設定してアプリをデバッグするには

1. 前に作成した FlipView アプリの default.html ファイルで、updateImages() 関数を右クリックし、[ブレークポイント]、[ブレークポイントの挿入] の順にクリックします。

2. [標準] ツール バーの [デバッグの開始] ボタンの横にあるドロップダウン リストから [ローカル コンピュータ] を選択します。

3. [デバッグ]、[デバッグ開始] の順にクリックするか、または F5 キーを押します。

   実行が updateImages() 関数に達するとアプリは中断モードになり、プログラム実行の現在行が黄色で強調表示されます。

   

   現在のデバッグ セッションを終了することなく、変数の値を変更してプログラムの状態にすぐに反映できます。

4. プロンプトで「updateImages」と入力して、Enter キーを押します。関数の実装がコンソール ウィンドウに表示されます。

5. 関数の 1 行をプロンプトにコピーし、インデックス値を 3 に変更します。

   pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

6. Enter キーを押してコード行を実行します。

   コードを 1 行ずつステップ実行する場合は、F11 キーを押します。または、F5 キーを押してプログラムの実行を続行します。

7. F5 キーを押してプログラムの実行を続行します。FlipView アプリが表示され、4 ページすべてに既定以外のイメージの 1 つが表示されます。

   Visual Studio に戻るには、F12 キーまたは Alt + Tab キーを押します。

JavaScript コンソール ウィンドウの単一行モードと複数行モード

JavaScript コンソール ウィンドウの入力プロンプトでは、単一行モードと複数行モードの両方がサポートされます。このトピックの対話形式デバッグ手順では、両方のモードを使用する例を示します。これらのモードの間は Ctrl + Alt + M キーを押して切り替えることができます。

単一行モードでは入力履歴が提供されます。上方向キーと下方向キーを使用して、入力履歴間を移動できます。単一行モードでは、スクリプトを実行すると入力プロンプトがクリアされます。単一行モードでスクリプトを実行するには、Enter キーを押します。

複数行モードでは、スクリプトを実行しても入力プロンプトはクリアされません。複数行モードから単一行モードに切り替えたときは、Ctrl + A キーを押して文字を入力することにより、入力行をクリアできます。複数行モードでスクリプトを実行するには、Ctrl + Enter キーを押すか、またはウィンドウの右下隅の矢印記号をクリックします。

要素の選択

アプリケーションをデバッグするときに、次の 3 種類の方法で DOM 要素を選択できます。

• 直接 DOM エクスプローラー ウィンドウの要素をクリックする (または方向キーを使用)。

• [要素の選択] ボタンを使用する

• JavaScript コンソール コマンド の 1 つである select コマンドを使用する

DOM エクスプローラー ウィンドウを使用して要素を選択するときに、要素にマウス ポインターを置くと、対応する要素がシミューレターまたはデバイスで強調表示されます。これを行うには、DOM エクスプローラーの要素をクリックして選択する必要があります。または、方向キーを使用して、要素を強調表示して選択できます。[要素の選択] ボタンを使用して DOM Explorer の要素を選択することもできます。次の図は、[要素の選択] ボタンを示しています。

[要素の選択] をクリックする (または Ctrl + B キーを押す) と、アプリケーションまたはシミュレーターで項目をクリックすることにより、DOM Explorer でアイテムを選択できるように選択モードが変更されます。1 回クリックすると、通常の選択モードに戻ります。[要素の選択] をクリックすると、アプリが前面に表示され、カーソルが新しい選択モードを反映した形状に変わります。このモードでは、シミューレターまたはデバイスの要素にマウス ポインターを置くと、色付きのアウトラインが要素の上に表示されます。アウトラインが表示された要素をクリックすると、DOM Explorer が前面に戻り、指定した要素が選択されています。[要素の選択] ボタンを使用して要素を選択する方法の例については、「CSS 規則を検査する方法」を参照してください。

Windows ランタイム コンポーネントを使用するアプリケーションのデバッグ

C# または Visual Basic の WinMD ファイルを参照する JavaScript、または C++ Windows ランタイム コンポーネント (WinMD ファイルおよび DLL) を含む JavaScript を使用する Windows ストア アプリケーションをデバッグするときは、使用するデバッガーを指定できます。JavaScript とマネージ コードまたはネイティブ コードを同時にデバッグすることはできません。

実行するデバッガーは、プロジェクトの [デバッグ] プロパティ ページで指定できます。詳細については、「デバッグ セッションの開始方法 (JavaScript)」を参照してください。

アプリの配置

JavaScript を使用して Windows 用にビルドされた Windows ストア アプリの一部のデバッグ シナリオでは、Visual Studio からアプリを起動しないでアプリを配置することが必要になる場合があります。たとえば、共有コンテンツを受け取るように設計されたアプリケーションは、共有 UI から開始できます。この場合、コンテンツを共有するアプリケーションからデバッグする必要があります。共有コンテンツを受け取るアプリケーションの場合は、プロジェクトの [デバッグ] プロパティ ページで [アプリケーションの起動] プロパティを [なし] に設定できます。アプリの配置シナリオの詳細については、「デバッグ セッションの開始方法 (JavaScript)」を参照してください。

初回例外の有効化

初回例外を使用することにより、ランタイム例外が発生したらアプリケーションは中断モードに移行する必要があることを指定できます。この機能を有効にすると、例外が処理される場合でもアプリは中断モードになります。これにより、通常であればデバッグ中は明確でない一部のエラーを確認できます。一部のライブラリでは例外が広範に使用されているので、これらのライブラリを操作する場合は、初回例外を無効にしておくことをお勧めします。

初回例外を有効にするには

1. Visual Studio で [デバッグ] の [例外] をクリックします。

2. [例外] ダイアログ ボックスの [JavaScript Runtime Exceptions] (JavaScript ランタイム例外) ノードを展開します。

3. デバッガーを常に中断させる例外の [スローされるとき] チェック ボックスをオンにして、[OK] をクリックします。

ブラウザーとプラットフォームのサポート

JavaScript 用の Visual Studio ツールである DOM Explorer と JavaScript コンソール ウィンドウは、次のプラットフォーム上でサポートされます。

• JavaScript を使用して Windows 8 用にビルドされた Windows ストア アプリ

• Windows 8 で実行されている Internet Explorer 10

Windows 8 および Visual Studio をダウンロードするには、ここをクリックしてください。

参照

処理手順

イベント リスナーを表示する方法

アプリを更新する方法

関連項目

Troubleshooting Windows Runtime errors

How to handle errors with promises

概念

Windows ストア アプリのデバッグ

CSS 規則を検査する方法

レイアウトを表示および編集する方法

その他の技術情報

製品のサポートとユーザー補助