快速入门：调试应用程序 (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 代码，与所呈现的应用程序进行交互。控制台除了报告文档对象模型 (DOM) 和 Windows 运行时异常外，还报告 JavaScript 错误和异常。有关更多信息，请参见：使用“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 资源管理器”窗口中，选择 ID 为 "fView" 的部分的 DIV 元素：

提示

也可通过在 >> 输入提示符下键入 select(fView)，然后按 Enter，在“JavaScript 控制台”窗口的左下角选择该 DIV 元素。

注意，width 和 height 在 DOM 资源管理器中被错误地设置为像素值。

“DOM 资源管理器”窗口的右侧选项卡上显示的值将自动更新，以反映 DOM 资源管理器中的当前元素。
在**“特性”**选项卡上，双击 “style” 特性。编辑 height 和 width，将二者均设置为 100%。按 Enter 后，模拟器中将立即反映新值，即使尚未停止调试会话也是如此。

重要

在可更新特性值的同时，还可更新在“样式”、“跟踪样式”和“布局”选项卡上显示的值。有关更多信息，请参见如何检查 CSS 规则和如何查看和编辑布局。

FlipView 控件现已调整为正确大小。它也可正常运行，但并未显示预期的图像，而是看到默认图像和缺少的图像，并且预期的图像与缺少的图像交织在一起。

JavaScript 代码中有一个 Bug 导致了此问题。在下一节中，我们将探索一种通过使用“JavaScript 控制台”窗口来修复此 Bug 的方式。若要继续进行调试，请参见使用“JavaScript 控制台”窗口进行交互式调试

可使用“刷新”功能修改 HTML、CSS 和 JavaScript 代码并快速重新加载页面，期间不必停止再重新启动调试器。有关“刷新”功能的详细信息，请参见如何刷新应用程序。

若要在调试期间刷新应用程序，请执行以下操作

在应用程序仍在运行时，切换至 Visual Studio。
打开 default.html，然后通过将 "fView" DIV 元素的 height 和 width 均设置为 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。随后控制台窗口将显示 push 在 Windows JavaScript 库 (WinJS) 项目文件中的函数实现。使用 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 和托管或本机代码。

可在项目的“调试属性”页上指定要运行的调试器。有关更多信息，请参见如何启动调试会话 (JavaScript)。

部署应用程序

对于使用 JavaScript 针对 Windows 生成的 Windows 应用商店应用程序，在某些调试方案下可能需要部署应用程序，但不从 Visual Studio 启动它。例如，可从共享 UI 中启动要接收共享内容的应用程序，这种情况下需要从共享内容的应用程序中进行调试。对于接收共享内容的应用程序，可在该项目的“调试属性”页上将**“启动应用程序”设置为“否”**。有关应用程序部署方案的详细信息，请参见如何启动调试会话 (JavaScript)。

启用首次异常

通过使用首次异常，可指定应用程序在遇到运行时异常时应进入中断模式。启用此功能后，应用程序即进入中断模式，即使异常得到处理后也是如此。这样即可看到某些通常在调试期间不明显的错误。某些库广泛使用大量异常，因此在使用这些库时，最好是使首次异常保持禁用状态。

要启用首次异常，请执行以下操作

在 Visual Studio 中，单击**“调试”>“异常”**。
在**“异常”对话框中，展开“JavaScript 运行时异常”**节点。
对于任何希望调试器在遇到它时总是中断的异常选中**“引发”复选框，然后单击“确定”**。

浏览器和平台支持

JavaScript 的 Visual Studio 工具、DOM 资源管理器和 JavaScript 控制台窗口在以下平台上受支持：

使用 JavaScript 为 Windows 8 生成的Windows 应用商店应用程序
Internet Explorer 10 运行于 Windows 8 上

请转到此处下载 Windows 8 和 Visual Studio。

请参见

通过