クイックスタート: コンソールを使用した JavaScript のデバッグ

Windows と Windows Phone に適用されます

JavaScript コンソール ウィンドウを使用して、JavaScript を使用してビルドされたストア アプリと対話したりデバッグすることができます。 これらの機能は、Windows ストア と Windows Phone ストア アプリでサポートされます。 コンソール コマンドのリファレンスの詳細については、「JavaScript コンソール コマンド」を参照してください。

JavaScript コンソール ウィンドウを使うと次の作業ができます。

  • アプリから、オブジェクト、値、メッセージをコンソール ウィンドウへ送信します。

  • 実行中のアプリのローカル変数とグローバル変数の値の表示と修正を行います。

  • オブジェクトのビジュアライザーを表示します。

  • 現在のスクリプト コンテキスト内で実行される JavaScript コードを実行します。

  • ドキュメント オブジェクト モデル (DOM) と Windows ランタイムの例外に加えて、JavaScript のエラーと例外も表示されます。

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

このトピックの内容

ヒント ヒント

閉じた JavaScript コンソール ウィンドウを再び開くには、[デバッグ] > [ウィンドウ] > [JavaScript コンソール] の順にクリックします。 このウィンドウは、スクリプトのデバッグ セッション中にのみ表示されます。

JavaScript コンソールを使用すると、デバッガ―を停止/再起動することなくアプリと対話することができます。 詳細については、「アプリの更新 (JavaScript)」を参照してください。 DOM Explorer を使用したりブレークポイントを設定するなど、JavaScript のその他のデバッグ機能の詳細については、「クイック スタート: HTML および CSS のデバッグ」および「Visual Studio でのストア アプリのデバッグ」を参照してください。

次のステップでは、FlipView アプリを作成し、JavaScript のコード エラーを対話的にデバッグする方法を示します。

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

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

  2. [JavaScript] > [ストア アプリ] の順にクリックして、[Windows アプリ] または [Windows Phone アプリ] を選択し、次に [空のアプリケーション] を選択します。

  3. FlipViewApp」などのプロジェクトの名前を入力し、[OK] をクリックしてアプリを作成します。

  4. default.html の Body 要素で、既存の HTML コードを次のコードで置き換えます:

    <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" data-win-control="WinJS.UI.FlipView" data-win-options="{
        itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>
    
  5. default.css を開き、次の #fView セレクターの CSS を追加します。

    #fView {
        background-color:#0094ff;
        height: 500px;
        margin: 25px;
    }
    
  6. default.js を開き、コードを次の JavaScript コードで置き換えます:

    (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: "http://go.microsoft.com/fwlink/?LinkID=223195" });
            pages.push(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
            pages.push(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    
        var publicMembers = {
            items: pages
        };
    
        WinJS.Namespace.define("Data", publicMembers);
    
    })();
    
  7. デバッグ対象がまだ選択されていない場合は、[シミュレーター] をクリックします。または、Windows Phone 用の場合は、[デバッグ] ツール バーの [デバイス] ボタンの横にあるドロップダウン リストの [Emulator 8.1 WVGA 4 inch 512MB] (エミュレーター 8.1 WVGA 4 インチ 512 MB) をクリックします。

    デバッグ ターゲット リストを選択する
  8. F5 キーを押して、デバッガーを開始します。

    アプリケーションが実行されますが、イメージがありません。 JavaScript コンソール ウィンドウの APPHOST のエラーは、イメージがないことを示します。

  9. FlipView アプリがシミュレーターまたは Phone エミュレーターで実行されている状態で、コンソール ウィンドウの入力プロンプト (">>" シンボルの横) に「Data.items」と入力して Enter キーを押します。

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

    JavaScript コンソール ウィンドウ

    items._data オブジェクトには、想像より多くの項目があることにも注意してください。

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

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

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

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

    ヒントヒント

    JavaScript コンソール入力プロンプトに複数行のコードを貼り付けると、コンソールの入力プロンプトは自動的に複数行モードに切り替わります。 Ctrl + Alt + M キーを押して複数行モードのオンとオフを切り替えることができます。 複数行モードでスクリプトを実行するには、Ctrl + Enter キーを押すか、またはウィンドウの右下隅の矢印をクリックします。 詳細については、「Single-line mode and Multiline mode」を参照してください。

  12. pages.pushData.items.setAt で置き換えて、プロンプトの push 関数呼び出しを修正します。 修正後のコードは次のようになります。

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

    Data.items の代わりに pages オブジェクトを使用する場合は、コードにブレークポイントを設定して pages オブジェクトをスコープ内に保持する必要があります。

  13. スクリプトを実行するには、緑色の矢印をクリックします。

  14. Ctrl + Alt + M キーを押して、コンソール入力プロンプトを単一行モードに切り替え、次に [入力のクリア] (赤い「X」) をクリックして、入力プロンプトからコードを削除します。

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

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

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

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

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

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

プログラムが中断モードのときでも、JavaScript コンソール ウィンドウを使用して、現在のスクリプトの実行コンテキストで有効なコマンドおよびスクリプトを実行できます。 このプロシージャでは、すでに作成してあった FlipView アプリの最終版を使用して、中断モードの使用をデモします。

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

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

  2. [デバッグ] ツール バーの [デバッグの開始] ボタンの横にあるドロップダウン リストの [ローカル コンピューター] または [Emulator 8.1 WVGA 4 inch 512MB] (エミュレーター 8.1 WVGA 4 インチ 512 MB) をクリックします。

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

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

    JavaScript コンソールでの中断モードの使用

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

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

  5. コンソール ウィンドウで関数を選択し、関数の実装を表示します。

    次の図は、この時点でのコンソール ウィンドウを示します。

    ビジュアライザーを表示している JavaScript コンソール ウィンドウ
  6. 関数の 1 行を出力ウィンドウから入力プロンプトにコピーし、インデックス値を 3 に変更します。

    pages.setAt(3, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
  7. Enter キーを押してコード行を実行します。

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

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

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

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

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

複数行モードでは、スクリプトを実行しても入力プロンプトはクリアされません。 複数行モードから単一行モードに切り替えたときは、[入力のクリア] (赤い「X」) を押すと、入力行をクリアできます。 複数行モードでスクリプトを実行するには、Ctrl + Enter キーを押すか、またはウィンドウの右下隅の矢印をクリックします。

JavaScript コンソール ウィンドウを使用すると、1 回につき、Web プラットフォーム ホスト (WWAHost.exe) の単一インスタンスを表す 1 つの実行コンテキストと対話することができます。 一部のシナリオ、たとえば iframe を使用するとき、共有コントラクト、Web ワーカー、または WebView コントロールなどの場合、アプリはホストの別のインスタンスを起動することがあります。 ホストの別のインスタンスが実行中で、[ターゲット] リストから実行コンテキストを選択してアプリを実行している場合は、異なる実行コンテキストを選択することができます。

次の図は、JavaScript コンソール ウィンドウのターゲット リストを示します。

JavaScript コンソール ウィンドウでのターゲット選択

cd コマンドを使用しても、実行コンテキストを切り替えることができますが、別の実行コンテキストの名前が分かっている必要があります。また使用するリファレンスが範囲内になければなりません。 [ターゲット] リストは、別の実行コンテキストへのアクセスを改善します。

JavaScript コンソール ウィンドウは、次のプラットフォームでサポートされています。

  • JavaScript と HTML を使った Windows ストア および Windows Phone ストア アプリ

  • Windows 8.1 で実行されている Internet Explorer 11

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

コミュニティの追加

表示:
© 2014 Microsoft