クイックスタート: HTML および CSS のデバッグ

[アーティクル]
06/05/2015

Windows と Windows Phone に適用されます

Visual Studio では、JavaScript を使用してビルドされたストアアプリに、総合的なデバッグ機能が用意されており、Internet Explorer および Visual Studio の開発者には使い慣れた機能が含まれています。これらの機能は、Windows ストアと Windows Phone ストアアプリでサポートされます。

DOM 検査ツールが提供する対話式のデバッグモデルを使用すると、レンダリングされる HTML および CSS のコードを表示および変更できます。これらはすべてデバッガーを停止して再起動することなく実行できます。

このトピックの内容

Inspecting the live DOM
Selecting elements

DOM Explorer の使用の詳細については、次のトピックを参照してください。

JavaScript コンソールウィンドウの使用やブレークポイントの設定などの JavaScript の他のデバッグ機能の詳細については、「クイックスタート: コンソールを使用した JavaScript のデバッグ」および「Visual Studio でのストアアプリのデバッグ」を参照してください。

ライブ DOM の検査

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

ヒント

ソースコードを変更する際、デバッガーの停止や再起動を避けるために、[デバッグ] ツールバーの [Windows アプリケーションの更新] ボタンを使用して (または F4 キーを押して) アプリケーションを更新できます。詳細については、「アプリの更新 (JavaScript)」を参照してください。

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

DOM 要素のサブツリー内を移動し、レンダリングされる HTML、CSS、および JavaScript コードを調査します。
レンダリングされる要素の属性および CSS スタイルを動的に編集し、結果をすぐに確認します。
CSS スタイルがページ要素に適用される方法を調査し、適用されたルールをトレースします。

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

ヒント

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

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

次の方法で、ライブ DOM を検査することによってデバッグします。

[ファイル] > [新しいプロジェクト] の順にクリックして、Visual Studio で新しいソリューションを作成します。
[JavaScript] > [ストア] の順にクリックし、[Windows アプリ] または [Windows Phone アプリ] をクリックして、[空のアプリケーション] をクリックします。
「FlipViewApp」などのプロジェクトの名前を入力し、[OK] をクリックしてアプリを作成します。

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"
    data-win-control="WinJS.UI.FlipView" data-win-options="{
    itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
</div>

default.css を開き、次の CSS を追加します。

#fView {
    background-color:#0094ff;
    height: 100%;
    width: 100%;
    margin: 25%;
}

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.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
        pages.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
        pages.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var publicMembers = {
        items: pages
    };

    WinJS.Namespace.define("Data", publicMembers);

})();

このアプリを Phone エミュレーター (シミュレーターと同様の外観になります) で実行すると、次の図に示すようになります。ただし、アプリをこの状態にするには、まず、多数のバグを修正する必要があります。

予想される結果を表示する FlipView アプリ

[デバッグ] ツールバーの [デバッグの開始] ボタンの横にあるドロップダウンリストの [シミュレーター] または [Emulator 8.1 WVGA 4 inch 512MB] (エミュレーター 8.1 WVGA 4 インチ 512 MB) をクリックします。
[デバッグ] > [デバッグの開始] の順にクリックするか、F5 キーを押して、デバッグモードでアプリを実行します。

これによりアプリはシミュレーターまたは Phone エミュレーターで実行されますが、スタイリングにはいくつかバグがあるため、画面にはほとんど何も表示されません。最初の FlipView のイメージが、画面の中央の小さい四角形に表示されます。
アプリをシミュレーターで実行している場合は、シミュレーターの右側にある [解像度の変更] ツールバーコマンドをクリックし、画面の解像度を 1280 x 800 に構成します。これによって、次の手順で示される値がシミュレーターに表示される値と一致することが確認できます。
Visual Studio に切り替え、[DOM Explorer] タブをクリックします。

ヒント

Alt + Tab キーまたは F12 キーを押すと、Visual Studio と実行中のアプリを切り替えることができます。
DOM Explorer ウィンドウで、ID が "fView" であるセクションの DIV 要素を選択します。方向キーを使用して、正しい DIV 要素を表示して選択します。 (右方向キーを使うと、要素の子を表示することができます。)

ヒント

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

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

このタブは、選択した DOM 要素の各プロパティの、計算済みまたは最終の値を示します。
高さの CSS 規則を開きます。インラインスタイルが 100px に設定されており、#fView CSS セレクターで 100% に設定されている高さの値と矛盾しているように見えることに注意してください。 #fView セレクターの取り消し線テキストは、インラインスタイルがこのスタイルよりも優先されることを示しています。

[計算済み] タブを次の図に示します。
DOM Explorer のメインウィンドウで、fView DIV 要素の高さと幅のインラインスタイルをダブルクリックします。ここで値を編集することができます。このシナリオでは、これらを完全に削除する必要があります。
width: 100px;height: 100px; を選択し、Del キー、Enter キーの順に押します。デバッグセッションを停止していなくても、Enter キーを押すとすぐに、新しい値がシミュレーターまたは Phone エミュレーターに反映されます。

重要

DOM Explorer ウィンドウで属性を更新できるように、[スタイル]、[計算済み]、[レイアウト] の各タブに表示される値も更新できます。詳細については、「DOM Explorer を使用した CSS スタイルのデバッグ」および「DOM Explorer を使用したレイアウトのデバッグ」を参照してください。
シミュレーターまたは Phone エミュレーターを選択するか、または Alt + Tab キーを使って、アプリケーションに切り替えます。

これで、FlipView コントロールがシミュレーターまたは Phone エミュレーターの画面を超えるサイズで表示されます。これは意図した結果ではありません。 Visual Studio に戻って、調査します。
DOM Explorer で、[計算済み] タブを再度クリックし、高さの規則を開きます。 fView 要素は、CSS から予想されるように 100% の値を示したままですが、計算済みの値はシミュレーターの画面の高さと等しく (たとえば、800px または 667.67px)、このアプリで必要な高さではありません。調査するために、fView DIV 要素の高さと幅を削除することができます。
[スタイル] タブで、#fView CSS セレクターの高さと幅のプロパティのチェックボックスをオフにします。

[計算済み] タブでは、高さは 400px と表示されています。これによると、この値が、プラットフォーム CSS ファイルである ui-dark.css で指定された .win-flipview セレクターによるものであることを示しています。
アプリケーションに切り替えます。

これで状況は改善されました。しかし、なお修正する必要がある問題があります。それは余白が大きすぎることです。
調査のため、Visual Studio に切り替え、[レイアウト] タブをクリックし、要素のボックスモデルを確認します。

[レイアウト] タブに、次の値が表示されます。
- シミュレーターの場合は、320px (オフセット) および 320px (余白) です。
- Phone エミュレーターの場合は、100px (オフセット) および 100px (余白) です。
次の図は、Phone エミュレーター (100px オフセットおよび余白) を使用する場合の [レイアウト] タブを示しています。

これは正しくありません。 [計算済み] タブでも、同じ余白の値が表示されます。
[スタイル] タブをクリックし、#fView CSS セレクターを検索します。ここでは、"余白" プロパティに 25% の値が表示されます。
25% を選択して、それを 25px に変更し、Enter キーを押します。
また、[スタイル] タブで .win-flipview セレクターの高さの規則をクリックして、400px を 500px に変更し、Enter キーを押します。
アプリケーションに戻ると、要素の配置が正しい状態で表示されます。デバッガーを停止したり再起動したりせずに、ソースを修正してアプリケーションを再表示するには、次の手順を参照してください。

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

アプリケーションがまだ実行している間に、Visual Studio に切り替えます。
default.html を開き、"fView" DIV 要素の高さと幅を 100% に変更して、ソースコードを変更します。
[デバッグ] ツールバーの [Windows アプリケーションの更新] ボタンをクリックします (または、F4 キーを押します)。このボタンは次のように表示されます。

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

更新機能の詳細については、「アプリの更新 (JavaScript)」を参照してください。

要素の選択

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

直接 DOM エクスプローラーウィンドウの要素をクリックする (または方向キーを使用)。
[要素の選択] ボタン (Ctrl + B キー) を使用する。
JavaScript コンソールコマンドの 1 つである select コマンドを使用する

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

DOM Explorer の [要素の選択] ボタン

[要素の選択] をクリックする (または Ctrl + B キーを押す) と、実行しているアプリの項目をクリックすることにより、DOM Explorer で項目を選択できるように選択モードが変更されます。 1 回クリックすると、通常の選択モードに戻ります。 [要素の選択] をクリックすると、アプリが前面に表示され、カーソルが新しい選択モードを反映した形状に変わります。アウトラインが表示された要素をクリックすると、DOM Explorer が前面に戻り、指定した要素が選択されています。

[要素の選択] をクリックする前に、[Display web page highlights] (Web ページの強調表示を表示) を切り替えて実行しているアプリの要素を強調表示するかどうかを指定できます。次の図は、このボタンを示しています。強調表示は、既定で表示されます。

Web ページハイライトボタンの表示

強調表示する要素を選択する場合、シミュレーターでマウスポインターを置く要素が強調表示されます。強調表示された要素の色は、DOM Explorer の [レイアウト] タブに表示されるボックスモデルと一致します。

注意

Windows Phone エミュレーターは、マウスポインターを置くことによる要素の強調表示を部分的にサポートします。

[要素の選択] ボタンを使用して要素を選択する方法の例については、「DOM Explorer を使用した CSS スタイルのデバッグ」を参照してください。

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

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

JavaScript と HTML を使った Windows ストアおよび Windows Phone ストアアプリ
Windows 8.1 で実行されている Internet Explorer 11
Windows 8 で実行されている Internet Explorer 10

Windows 8 および Visual Studio をダウンロードするには、ここに移動します。

参照

次の方法で共有

クイックスタート: HTML および CSS のデバッグ

ライブ DOM の検査

次の方法で、ライブ DOM を検査することによってデバッグします。

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

要素の選択

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

参照

処理手順

概念

その他の技術情報

その他のリソース

次の方法で共有

クイック スタート: HTML および CSS のデバッグ

ライブ DOM の検査

次の方法で、ライブ DOM を検査することによってデバッグします。

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

要素の選択

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

参照

処理手順

概念

その他の技術情報

その他のリソース

クイックスタート: HTML および CSS のデバッグ