快速入門:偵錯應用程式 (JavaScript)

發行項
02/24/2013

Visual Studio 針對使用 JavaScript 為 Windows 建置的 Windows 市集應用程式提供完整的偵錯體驗，所包含的功能對於 Internet Explorer 和 Visual Studio 開發人員而言是很熟悉的。本主題提供這些應用程式專屬偵錯功能的概觀，以及展示如何使用這些功能的教學課程。

偵錯時可以使用互動式偵錯模型，您可於其中檢視呈現的 HTML、CSS 和 JavaScript 程式碼並可與其互動，以便解決問題。您也可以使用較傳統的 Visual Studio 偵錯模型，這種偵錯模型可讓您執行一些重要的工作，如設定中斷點和逐步執行程式碼。或者您也可以結合使用這兩種模型。

下表列出使用 JavaScript 之 Windows 市集應用程式可用的偵錯功能，並提供其他資訊的連結。

DOM 總管	[DOM 總管] 提供的檢視表示 Shell 如何解譯網頁，而不是原始程式碼。它可讓您存取目前選取項目之樣式、配置和屬性的相關動態資訊。您可以變更樣式、配置和屬性，並立即查看結果。如需詳細資訊，請參閱：使用 DOM 總管的互動式偵錯如何檢查 CSS 規則如何檢視和編輯版面配置如何檢視事件接聽程式
JavaScript 主控台視窗	在 [JavaScript 主控台] 視窗中，您可以與呈現的應用程式互動，方法包括傳送訊息至主控台、檢視區域和全域變數的值，以及執行 JavaScript 程式碼。主控台也會報告 JavaScript 錯誤和例外狀況，以及文件物件模型 (DOM) 和 Windows 執行階段例外狀況。如需詳細資訊，請參閱：使用 JavaScript 主控台視窗的互動式偵錯 JavaScript 主控台視窗中的單行模式和多行模式 JavaScript 主控台命令
重新整理	重新整理可讓您編輯原始程式碼然後重新載入網頁，而不需要停止再重新開始偵錯工具。如需詳細資訊，請參閱如何重新整理應用程式。
選取項目	在 [DOM 總管] 中，您可以在模擬器或主機電腦中按一下執行中應用程式的區域，以此方式選取 DOM 元素。如需詳細資訊，請參閱選取項目。
偵錯工作階段	如需如何開始偵錯工作階段與應用程式部署的詳細資訊，請參閱：如何啟動偵錯工作階段 (JavaScript) 從 Visual Studio 執行 Windows 市集應用程式
中斷點、逐步執行程式碼	Visual Studio 偵錯工具可讓您使用 F5 (開始偵錯或繼續) 和 F11 (逐步執行) 等命令，來設定中斷點和逐步執行程式碼。逐步執行程式碼時，您可以根據 [JavaScript 主控台] 視窗中的目前狀態，與應用程式互動。如需詳細資訊，請參閱：快速入門：偵錯工具巡覽 (JavaScript) 互動式偵錯和中斷模式
分析工具	如需在應用程式中尋找效能問題的詳細資訊，請參閱分析 Windows 市集應用程式的效能
JavaScript 記憶體分析器	如需在應用程式中尋找記憶體流失的詳細資訊，請參閱分析 Windows 市集應用程式中的記憶體使用量 (JavaScript)

本主題也提供這些 JavaScript 偵錯工作的相關資訊：啟用第一個可能發生的例外狀況和對使用 Windows 執行階段元件的應用程式進行偵錯。

使用 DOM 總管的互動式偵錯

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

提示

如果您不想停止偵錯工具，則可對原始程式碼進行變更然後重新整理應用程式，方法是使用 [偵錯] 工具列上的 [重新整理 Windows 應用程式] 按鈕。如需詳細資訊，請參閱如何重新整理應用程式。

您可將 DOM 總管用於：

檢查呈現的 HTML、CSS 和 JavaScript 程式碼，以及巡覽 DOM 項目樹狀子目錄。
動態變更所呈現項目的屬性。
檢查套用至頁面的 CSS 樣式，並動態地進行變更。

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

提示

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

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

若要在 DOM 總管中使用互動式偵錯

按一下 [檔案] > [新增專案]，在 Visual Studio 中建立新方案。
選取名為 [空白的應用程式] 的 JavaScript 範本，並輸入專案的名稱，例如 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;background-color:#0094ff" 
        data-win-control="WinJS.UI.FlipView"
            data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>

以此段程式碼取代 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 函式從應用程式的其他位置存取程式碼元素。

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

接下來會在模擬器中執行應用程式，不過您看到的主要是空白畫面，因為程式碼有幾個 Bug。左上方有一個預設影像，表示已載入某些項目。如果您按一下該螢幕區域，則會看到 FlipView 箭頭，表示控制項已具現化，但控制項的大小不正確。

提示

您可以按 Alt+Tab 或 F12，在 Visual Studio 和執行中應用程式之間切換。如果您是在模擬器中而非在本機電腦上執行應用程式，則可以按一下 Windows 工作列上的 [Visual Studio] 和 [模擬器] 按鈕，在視窗之間切換。
在 Visual Studio 中，按一下 [DOM 總管] 索引標籤。
在 [DOM 總管] 視窗中，選取識別碼為 "fView" 之區段的 DIV 元素：

提示

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

請注意 [DOM 總管] 中將寬度和高度錯誤設為像素值。

在 [DOM 總管] 視窗右邊索引標籤上的值會自動更新，以反映 [DOM 總管] 中的目前元素。
在 [屬性] 索引標籤中，按兩下 [style] 屬性。編輯高度和寬度，將兩者都設定為 100%。在您按下 ENTER 之後，新值就會立即反映在模擬器中，即使尚未停止偵錯工作階段也是如此。

重要

您可以更新屬性值，也可以更新 [樣式]、[追蹤樣式] 和 [配置] 索引標籤中出現的值。如需詳細資訊，請參閱如何檢查 CSS 規則和如何檢視和編輯版面配置。

FlipView 控制項現在已調整為正確的大小。它也能正常運作，但無法顯示預期的影像，您看到的是預設影像、遺失影像以及預期影像和遺失影像顛倒顯示。

造成此問題的是 JavaScript 程式碼中的 Bug。在下一節中，我們將探究以 [JavaScript 主控台] 視窗修正此 Bug 的一種方法。若要繼續偵錯，請參閱使用 JavaScript 主控台視窗的互動式偵錯。

您可以使用 [重新整理] 功能來修改 HTML、CSS 和 JavaScript 程式碼，並快速重新載入網頁，而不需要停止再重新開始偵錯工具。如需 [重新整理] 功能的詳細資訊，請參閱如何重新整理應用程式。

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

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

應用程式頁面就會重新載入，模擬器會回到前景。

跟先前一樣，影像的顯示仍然不正確。您可以在下一節繼續偵錯這個應用程式。

使用 JavaScript 主控台視窗的互動式偵錯

您可以在 [JavaScript 主控台] 視窗中執行和更新 JavaScript 程式碼。與 [DOM 總管] 相同，[JavaScript 主控台] 視窗可讓您測試變更，而不需要停止再重新開始偵錯工具，因此您可以立即查看所呈現頁面的結果。當您發現所需變更時，接著可以停止偵錯工具，並對您的原始程式碼進行更正。

您可以將 [JavaScript 主控台] 視窗用於：

在單行或多行模式中執行指令碼。
檢視資訊和錯誤訊息。
執行其他工作，例如清除畫面。如需命令的完整清單，請參閱 JavaScript 主控台命令。

提示

如果 [JavaScript 主控台] 視窗已關閉，按一下 [偵錯] > [視窗] > [JavaScript 主控台] 即可重新開啟。此視窗只有在指令碼偵錯工作階段期間才會顯示。

在本程序中，我們將對使用 DOM 總管的互動式偵錯一節中開始偵錯的 FlipView 應用程式，繼續進行偵錯。我們已經知道 FlipView 控制項可以正確地運作，但無法顯示預期的影像。

若要對 FlipView 應用程式中的 JavaScript 程式碼進行偵錯

當 FlipView 應用程式在模擬器中執行時，於 [JavaScript 主控台] 視窗輸入提示下輸入 Data.items，然後按 ENTER。

主控台視窗中隨即顯示 items 物件的視覺化檢視。這表示 items 物件已具現化並可用於指令碼內容。在主控台視窗中，您可以按一下物件的每個節點以檢視屬性值 (或使用方向鍵)。如果向下一直按到 items._data 物件中 (如下圖所示)，我們會發現正如預期，影像的來源參考不正確。預設影像仍存在於物件中，但遺失影像與預期影像顛倒。
在命令提示字元中輸入 Data.items.push，然後按 ENTER。主控台視窗即會顯示來自適用於 JavaScript 的 Windows Library (WinJS) 專案檔的 push 函式實作。使用 IntelliSense 進行一些調查，就會發現應該使用 setAt 來取代預設影像。
若要以互動方式修正這個問題，而不需要停止偵錯工作階段，請開啟 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 或按一下視窗右下角的箭頭符號。

更正提示中的 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" });

按 Ctrl+Alt+M 將主控台輸入提示切換為單行模式，然後按 Ctrl+A 選取上一個輸入，您就可以將其移除。
在命令提示字元中輸入 Data.items.length = 3，然後按 ENTER。這樣就會從資料中移除沒有直接關聯的項目。
再次檢查模擬器，您會看見正確的影像顯示在正確的 FlipView 頁面上。
在 [DOM 總管] 中，您可以看到更新後的 DIV 項目，接著可以巡覽至樹狀子目錄中，尋找所需的 IMG 項目。
依序按一下 [偵錯] > [停止偵錯]，或按 SHIFT+F5 停止偵錯，接著修正原始程式碼。

如需包含更正後範例程式碼的完整 default.html 頁面，請參閱偵錯應用程式範例程式碼 (JavaScript)。

互動式偵錯和中斷模式

使用 [JavaScript 主控台] 視窗之類的 JavaScript 偵錯工具時，您可以使用中斷點和逐步執行程式碼。在偵錯工具中執行的程式遇到中斷點時，偵錯工具會暫時停止執行程式。執行暫停時，您的程式會從執行模式切換為中斷模式。您隨時可以繼續執行。

當程式處於中斷模式時，您仍然可以使用 [JavaScript 主控台] 視窗來執行適用於目前應用程式狀態的指令碼和命令。在本程序中，我們將使用先前程序中建立的 FlipView 應用程式，來示範如何使用中斷模式。

若要設定中斷點並對應用程式進行偵錯

在先前建立之 FlipView 應用程式的 default.html 檔案中，以滑鼠右鍵按一下 updateImages() 函式，然後按一下 [中斷點] > [插入中斷點]。
在 [標準] 工具列上 [開始偵錯] 按鈕旁邊的下拉式清單中，選取 [本機電腦]。
按一下 [偵錯] > [開始偵錯]，或按 F5。

當執行程序到達 updateImages() 函式時，應用程式會進入中斷模式，而程式執行的目前所在行會以黃色反白顯示。

您可以變更變數的值以立即影響程式狀態，而不需要結束目前的偵錯工作階段。
在命令提示字元中輸入 updateImages，然後按 ENTER。函式實作隨即出現在主控台視窗中。

將函式的一行複製到提示字元中，並將索引值變更為 3：

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

按 ENTER 執行該行程式碼。

如果您想要一行一行地逐步執行程式碼請按 F11，或按 F5 繼續執行程式。
按 F5 繼續執行程式。FlipView 應用程式隨即顯示，現在全部四頁都顯示其中一個非預設影像。

若要切換回 Visual Studio，請按 F12 或 Alt+Tab。

JavaScript 主控台視窗中的單行模式和多行模式

[JavaScript 主控台] 視窗的輸入提示同時支援單行模式和多行模式。本主題的互動式偵錯程序提供這兩種模式的使用範例。您可以按 Ctrl+Alt+M 在模式之間切換。

單行模式提供輸入歷程記錄。使用向上鍵和向下鍵，就能在輸入歷程記錄中巡覽。當您執行指令碼時，單行模式會清除輸入提示。若要在單行模式中執行指令碼，請按 ENTER。

多行模式在您執行指令碼時不會清除輸入提示。從多行模式切換至單行模式時，您可以按 Ctrl+A 然後輸入任何字元，清除輸入行。若要在多行模式中執行指令碼，請按 Ctrl+Enter 或按一下視窗右下角的箭頭符號。

選取項目

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

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

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

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

按一下 [選取項目] (或按 Ctrl + B) 會變更選取模式，讓您可以在應用程式或模擬器中按一下元素，即可選取 [DOM 總管] 中的項目。只要再按一下，就會回到一般選取模式。按一下 [選取項目] 時，應用程式會移至前景，而游標會改變以反映新的選取模式。在這個模式中，當您將滑鼠指標停留在模擬器或裝置中的元素上時，元素周圍會出現彩色的外框。按一下加框項目時，[DOM 總管] 會回到前景，並已選取所指定的項目。如需示範如何使用 [選取項目] 按鈕選取元素的範例，請參閱如何檢查 CSS 規則。

對使用 Windows 執行階段元件的應用程式進行偵錯

當您對使用 JavaScript 的 Windows 市集應用程式進行偵錯，而該應用程式參考 C# 或 Visual Basic WinMD 檔案，或是包含 C++ Windows 執行階段元件 (WinMD 檔和 DLL)，則您可以指定要使用的偵錯工具。您無法同時對 JavaScript 和 Managed 程式碼或機器碼進行偵錯。

您可以在專案的 [偵錯] 屬性頁上指定要執行的偵錯工具。如需詳細資訊，請參閱如何啟動偵錯工作階段 (JavaScript)。

部署應用程式

在使用 JavaScript 針對 Windows 建置之 Windows 市集應用程式的某些偵錯案例中，您可能需要部署應用程式，但不必從 Visual Studio 將其啟動。例如，用來接收共用內容的應用程式可能會從共用 UI 啟動，在此情況下，您需要從共用內容的應用程式中進行偵錯。對於接收共用內容的應用程式，您可以在專案的 [偵錯] 屬性頁上，將 [啟動應用程式] 屬性設為 [否]。如需應用程式部署案例的詳細資訊，請參閱如何啟動偵錯工作階段 (JavaScript)。

啟用第一個可能發生的例外狀況

您可以使用第一個可能發生的例外狀況，指定應用程式在遇到執行階段例外狀況時，應該進入中斷模式。啟用這個功能時，即使例外狀況已獲得處理，應用程式仍會進入中斷模式。這可讓您檢視一些在偵錯期間不是很明顯的錯誤。某些程式庫大量使用例外狀況，使用這種程式庫時，最好停用第一個可能發生的例外狀況。

若要啟用第一個可能發生的例外狀況

在 Visual Studio 中，按一下 [偵錯] > [例外狀況]。
在 [例外狀況] 對話方塊中，展開 [JavaScript 執行階段例外狀況] 節點。
為您希望偵錯工具遇到時一律中斷的所有例外狀況，選取 [擲回] 核取方塊，然後按一下 [確定]。

瀏覽器和平台支援

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

使用 JavaScript 專為 Windows 8 打造的 Windows 市集應用程式
在 Windows 8 上執行的 Internet Explorer 10

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

請參閱

Share via