Windows アプリ
目次を折りたたむ
目次を展開する
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

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

Visual Studio 2015
 

Visual Studio 2017 RC の最新のドキュメントの詳細については、Visual Studio 2017 RC ドキュメントをご参照ください。

Windows と Windows Phone に適用されます

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

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

このトピックの内容

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

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

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

System_CAPS_ICON_tip.jpg ヒント

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

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

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

  • レンダリングされる要素の属性および CSS スタイルを動的に編集し、結果をすぐに確認します。

  • CSS スタイルがページ要素に適用される方法を調査し、適用されたルールをトレースします。

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

System_CAPS_ICON_tip.jpg ヒント

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

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

System_CAPS_ICON_warning.jpg 警告

次のサンプル アプリは Windows ストア アプリです。 Cordova でも同じ機能がサポートされていますが、アプリは異なります。

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

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

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

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

  4. 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>  
    
    
  5. default.css を開き、次の CSS を追加します。

    #fView { background-color:#0094ff; height: 100%; width: 100%; margin: 25%; }  
    
    
  6. 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: "http://go.microsoft.com/fwlink/?LinkID=223195" }); pages.setAt(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" }); pages.setAt(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" }); }; app.oncheckpoint = function (args) { }; app.start(); var publicMembers = { items: pages }; WinJS.Namespace.define("Data", publicMembers); })();  
    
    

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

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

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

    デバッグ ターゲット リストを選択する

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

    これによりアプリはシミュレーターまたは Phone エミュレーターで実行されますが、スタイリングにはいくつかバグがあるため、画面にはほとんど何も表示されません。 最初の FlipView のイメージが、画面の中央の小さい四角形に表示されます。

  9. アプリをシミュレーターで実行している場合は、シミュレーターの右側にある [解像度の変更] ツール バー コマンドをクリックし、画面の解像度を 1280 x 800 に構成します。 これによって、次の手順で示される値がシミュレーターに表示される値と一致することが確認できます。

  10. Visual Studio に切り替え、[DOM Explorer] タブをクリックします。

    System_CAPS_ICON_tip.jpg ヒント

    Alt + Tab キーまたは F12 キーを押すと、Visual Studio と実行中のアプリを切り替えることができます。

  11. DOM Explorer ウィンドウで、ID が "fView" であるセクションの DIV 要素を選択します。 方向キーを使用して、正しい DIV 要素を表示して選択します。 (右方向キーを使うと、要素の子を表示することができます。)

    DOM エクスプローラー

    System_CAPS_ICON_tip.jpg ヒント

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

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

  12. 右側の [計算済み] タブをクリックします。

    このタブは、選択した DOM 要素の各プロパティの、計算済みまたは最終の値を示します。

  13. 高さの CSS 規則を開きます。 インライン スタイルが 100px に設定されており、#fView CSS セレクターで 100% に設定されている高さの値と矛盾しているように見えることに注意してください。#fView セレクターの取り消し線テキストは、インライン スタイルがこのスタイルよりも優先されることを示しています。

    [計算済み] タブを次の図に示します。

    DOM Explorer の [計算済み] タブ

  14. DOM Explorer のメイン ウィンドウで、fView DIV 要素の高さと幅のインライン スタイルをダブルクリックします。 ここで値を編集することができます。 このシナリオでは、これらを完全に削除する必要があります。

  15. width: 100px;height: 100px; を選択し、Del キー、Enter キーの順に押します。 デバッグ セッションを停止していなくても、Enter キーを押すとすぐに、新しい値がシミュレーターまたは Phone エミュレーターに反映されます。

    System_CAPS_ICON_important.jpg 重要

    DOM Explorer ウィンドウで属性を更新できるように、[スタイル][計算済み][レイアウト] の各タブに表示される値も更新できます。 詳細については、「DOM Explorer を使用した CSS スタイルのデバッグ」および「DOM Explorer を使用したレイアウトのデバッグ」を参照してください。

  16. シミュレーターまたは Phone エミュレーターを選択するか、または Alt + Tab キーを使って、アプリケーションに切り替えます。

    これで、FlipView コントロールがシミュレーターまたは Phone エミュレーターの画面を超えるサイズで表示されます。 これは意図した結果ではありません。 Visual Studio に戻って、調査します。

  17. DOM Explorer で、[計算済み] タブを再度クリックし、高さの規則を開きます。 fView 要素は、CSS から予想されるように 100% の値を示したままですが、計算済みの値はシミュレーターの画面の高さと等しく (たとえば、800px または 667.67px)、このアプリで必要な高さではありません。 調査するために、fView DIV 要素の高さと幅を削除することができます。

  18. [スタイル] タブで、#fView CSS セレクターの高さと幅のプロパティのチェックボックスをオフにします。

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

  19. アプリケーションに切り替えます。

    これで状況は改善されました。 しかし、なお修正する必要がある問題があります。それは余白が大きすぎることです。

  20. 調査のため、Visual Studio に切り替え、[レイアウト] タブをクリックし、要素のボックス モデルを確認します。

    [レイアウト] タブに、次の値が表示されます。

    • シミュレーターの場合は、320px (オフセット) および 320px (余白) です。

    • Phone エミュレーターの場合は、100px (オフセット) および 100px (余白) です。

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

    DOM Explorer の [レイアウト] タブ

    これは正しくありません。[計算済み] タブでも、同じ余白の値が表示されます。

  21. [スタイル] タブをクリックし、#fView CSS セレクターを検索します。 ここでは、"余白" プロパティに 25% の値が表示されます。

  22. 25% を選択して、それを 25px に変更し、Enter キーを押します。

  23. また、[スタイル] タブで .win-flipview セレクターの高さの規則をクリックして、400px を 500px に変更し、Enter キーを押します。

  24. アプリケーションに戻ると、要素の配置が正しい状態で表示されます。 デバッガーを停止したり再起動したりせずに、ソースを修正してアプリケーションを再表示するには、次の手順を参照してください。

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

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

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

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

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

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

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

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

  • [要素の選択] ボタン (Ctrl + B キー) を使用する。

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

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

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

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

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

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

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

System_CAPS_ICON_note.jpg メモ

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

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

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

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

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

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

Windows 8 と Visual Studio をダウンロードするには、ここにアクセスしてください。

Visual Studio でのアプリのデバッグ
DOM Explorer を使用した CSS スタイルのデバッグ
DOM Explorer を使用したレイアウトのデバッグ
DOM イベント リスナーの表示
アプリの更新 (JavaScript)
WebView コントロールのデバッグ
キーボード ショートカット
JavaScript コンソール コマンド
HTML、CSS、および JavaScript サンプル コードのデバッグ
製品のサポートとユーザー補助

© 2018 Microsoft