快速入門：偵錯 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 總管] 的詳細資訊，請參閱下列主題：

如需其他 JavaScript 偵錯功能的資訊，例如使用 [JavaScript 主控台] 視窗和設定中斷點，請參閱快速入門：使用主控台偵錯 JavaScript 和在 Visual Studio 中偵錯市集應用程式。

檢查 Llive DOM

[DOM 總管] 會顯示所呈現頁面的檢視，您可以使用 [DOM 總管] 變更值並立即查看結果。這讓您能測試變更，而不需要停止並重新開始偵錯工具。當您以此方法與頁面互動時，專案中的原始程式碼並不會變更，因此當您找到所需的程式碼修正時，您可以對原始程式碼進行變更。

提示

若要避免在對原始程式碼進行變更時停止再重新開始偵錯工具，您可以使用 [偵錯] 工具列上的 [重新整理 Windows 應用程式] 按鈕 (或按 F4)，重新整理應用程式。如需詳細資訊，請參閱重新整理應用程式 (JavaScript)。

您可將 DOM 總管用於：

巡覽 DOM 項目樹狀子目錄，並檢查呈現的 HTML、CSS 和 JavaScript 程式碼。
動態編輯所呈現項目的屬性和 CSS 樣式，並立即看到結果。
檢查 CSS 樣式套用到頁面項目的情形，並追蹤已套用的規則。

偵錯應用程式時，您通常需要在 [DOM 總管] 中選取元素。當您選取項目時，[DOM 總管] 右邊索引標籤上的值會自動更新，以反映 [DOM 總管] 中選取的項目。這些索引標籤如下：[樣式]、[計算]、[配置]、[事件] 和 [變更] 索引標籤。如需選取項目的詳細資訊，請參閱 Selecting elements。

提示

如果 [DOM 總管] 視窗已關閉，選擇 [偵錯] > [視窗] > [DOM 總管] 即可重新開啟。此視窗只有在指令碼偵錯工作階段期間才會顯示。

在接下來的程序中，我們將會經歷使用 [DOM 總管] 以互動方式偵錯應用程式的過程。我們將建立一個使用 FlipView 控制項的應用程式，然後對它進行偵錯。應用程式包含幾個錯誤。

若要藉由檢查 Live DOM 偵錯

選擇 [檔案] > [新增專案]，在 Visual Studio 中建立新方案。
選擇 [JavaScript] > [市集]，然後選擇 [Windows 應用程式] 或 [Windows Phone 應用程式]，再選擇 [空白應用程式]。
輸入專案的名稱 (例如 FlipViewApp)，然後選擇 [確定] 建立應用程式。

在 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 模擬器] 中執行此應用程式時，所希望看到的樣子 (與在 [模擬器] 中看到的相似)。但是，要讓應用程式變成這樣，我們必須先修正一些 Bug。

顯示預期結果的 FlipView 應用程式

在 [偵錯] 工具列上，選取 [開始偵錯] 按鈕旁邊下拉式清單中的 [模擬器] 或 [Emulator 8.1 WVGA 4 英吋 512MB]：
選擇 [偵錯] > [開始偵錯]，或按 F5，以偵錯模式執行您的應用程式。

接下來會在 [模擬器] 或 [電話模擬器] 中執行應用程式，不過您看到的主要是空白畫面，因為樣式有幾個 Bug。第一個 FlipView 影像出現在螢幕中央附近的小方形中。
如果您是在 [模擬器] 中執行應用程式，請選擇 [模擬器] 右邊的 [變更解析度] 工具列命令，將螢幕解析度設定為 1280 x 800。如此即可確保下列步驟中顯示的值與您在 [模擬器] 中看到的都完全相同。
切換至 Visual Studio 並選擇 [DOM 總管] 索引標籤。

提示

您可以按 Alt+Tab 或 F12，在 Visual Studio 和執行中應用程式之間切換。
在 [DOM 總管] 視窗中，選取識別碼為 "fView" 之區段的 DIV 項目。使用方向鍵來檢視和選取正確的 DIV 項目 (向右鍵可讓您檢視項目的子系)。

提示

您也可以在 [JavaScript 主控台] 視窗的左下角，於 >> 輸入提示下輸入 select(fView) 然後按 ENTER，便能選取 DIV 項目。

在 [DOM 總管] 視窗右邊索引標籤上的值會自動更新，以反映 [DOM 總管] 中的目前元素。
選擇右邊的 [計算] 索引標籤。

這個索引標籤顯示所選 DOM 項目的每個屬性的計算值 (或終值)。
開啟高度 CSS 規則。請注意，有內嵌樣式設定為 100px，這與 #fView CSS 選取器設定的高度值 100% 不一致。 #fView 選取器的 Strikethrough 文字指出內嵌樣式的優先順序高於此樣式。

下圖顯示 [計算] 索引標籤。
在主要 [DOM 總管] 視窗中，按兩下 fView DIV 元素的高度和寬度內嵌樣式。您現在可以在這裡編輯值。在這個案例中，我們要完全移除它們。
選取 width: 100px;height: 100px; 然後按 Delete 鍵，再按 Enter。在您按下 Enter 之後，新值就會立即反映在 [模擬器] 或 [Phone 模擬器] 中，即使尚未停止偵錯工作階段也是如此。

重要

您可以更新 [DOM 總管] 視窗中的屬性，也可以更新 [樣式]、[計算] 和 [配置] 索引標籤中出現的值。如需詳細資訊，請參閱使用 DOM 總管偵錯 CSS 樣式和使用 DOM 總管偵錯配置。
藉由選取 [模擬器] 或 [電話模擬器] 或是使用 Alt+Tab，切換至應用程式。

現在 FlipView 控制項看起來比 [模擬器] 或 [Phone 模擬器] 的螢幕還大。這不是預期的結果。若要調查，切換回 Visual Studio。
在 [DOM 總管] 中，再選取 [計算] 索引標籤並開啟高度規則。 fView 元素仍然顯示值為 100%，如預期的 CSS 值，但計算值卻等於 [模擬器] 螢幕的高度 (例如 800px 或 667.67px)，這不是我們想要的結果。若要調查，您可以移除 fView DIV 項目的高度和寬度。
在 [樣式] 索引標籤中，取消核取 #fView CSS 選取器的高度和寬度屬性。

[計算] 索引標籤現在會顯示 400px 高度。資訊表示這個值來自平台 CSS 檔案 ui-dark.css 中所指定的 .win-flipview 選取器。
切換回應用程式。

狀況隨即有所改善。不過，仍有另外一個問題待修正，邊界太大。
若要調查，切換至 Visual Studio 並選擇 [配置] 索引標籤，查看項目的方塊模型。

在 [配置] 索引標籤中，您將看到下列值：
- 適用於 [模擬器] 的是 320px (Offset) 和 320px (Margin)。
- 適用於 [Phone 模擬器] 的是 100px (Offset) 和 100px (Margin)。
下圖顯示當我們使用 [Phone 模擬器] (100px 位移和邊界) 時的 [配置] 外觀。

這似乎不正確。 [計算] 索引標籤也會顯示相同的邊界值。
選擇 [樣式] 索引標籤，尋找 #fView CSS 選取器。您可以看到 margin 屬性的值為 25%。
選取 25% 並將其變更為 25px，然後按 Enter。
此外，在 [樣式] 索引標籤中，選擇 .win-flipview 選取器的高度規則，並將 400px 變更為 500px，然後按 Enter。
切換回應用程式，您會看見項目定位已正確顯示。若要在不停止並重新開始偵錯工具的情況下，修正原始碼並重新整理應用程式，請參閱下列程序。

若要在偵錯時重新整理您的應用程式

當應用程式仍在執行時，切換至 Visual Studio。
開啟 default.html，將 "fView" DIV 元素的高度和寬度變更為 100%，修改您的原始程式碼。
選擇 [偵錯] 工具列上的 [重新整理 Windows 應用程式] 按鈕 (或按 F4)。按鈕看起來像這樣：

應用程式頁面就會重新載入，或者 [電話模擬器] 會回到前景。

如需 [重新整理] 功能的詳細資訊，請參閱重新整理應用程式 (JavaScript)。

選取項目

偵錯應用程式時，您可以使用三種方式選取 DOM 元素：

直接在 [DOM 總管] 視窗中按一下元素 (或使用方向鍵)。
使用 [選取元素] 按鈕 (Ctrl+B)。
使用 select 命令，此為其中一個 JavaScript 主控台命令。

當您使用 [DOM 總管] 視窗選取元素，並將滑鼠指標放在元素上時，對應的元素會在執行的應用程式中反白顯示。您必須在 [DOM 總管] 中按一下元素將它選取，或者也可以使用方向鍵來反白顯示及選取元素。此外，您還可以使用 [選取元素] 按鈕來選取 [DOM 總管] 中的元素。下圖顯示 [選取項目] 按鈕。

[DOM 總管] 中的 [選取項目] 按鈕

按一下 [選取元素] (或按 Ctrl+B) 會變更選取模式，讓您可以在執行的應用程式中按一下元素，即可選取 [DOM 總管] 中的項目。只要再按一下，就會回到一般選取模式。按一下 [選取項目] 時，應用程式會移至前景，而游標會改變以反映新的選取模式。按一下加框項目時，[DOM 總管] 會回到前景，並已選取所指定的項目。

在您選擇 [選取項目] 之前，您可以透過切換 [針對在 DOM 樹狀目錄中選取的項目顯示網頁醒目提示方塊] 按鈕，指定是否要在執行中的應用程式內反白顯示該項目。下圖顯示這個按鈕。預設會顯示反白顯示。

顯示網頁的 [反白顯示] 按鈕

當您選擇要反白顯示項目時，只要在 [模擬器] 中將滑鼠停留在任何項目上方，該項目就會反白顯示。已反白顯示之元素的色彩，會與顯示在 [DOM 總管] 之 [配置] 索引標籤中的方塊模型相符。

注意事項
[Windows Phone 模擬器] 僅部分支援藉由滑鼠游標停留來反白顯示項目。

如需示範如何使用 [選取項目] 按鈕選取元素的範例，請參閱使用 DOM 總管偵錯 CSS 樣式。

瀏覽器和平台支援

下列平台都支援適用於 JavaScript 的 Visual Studio 工具、[DOM 總管] 和 [JavaScript 主控台] 視窗：

Windows 市集和使用 JavaScript 和 HTML 的 Windows Phone 市集應用程式
在 Windows 8.1 上執行的 Internet Explorer 11
在 Windows 8 上執行的 Internet Explorer 10

前往這裡以下載 Windows 8 和 Visual Studio。

請參閱

共用方式為