在 Visual Studio 中调试 UWP 应用中的 HTML 和 CSS

07/17/2018

本文内容

Visual Studio 针对 JavaScript 应用提供全面的调试体验，其中包括 Internet Explorer 和 Visual Studio 开发人员熟悉的多项功能。 这些功能支持 UWP 应用以及使用 Visual Studio Tools for Apache Cordova 创建的应用。

通过使用 DOM 检查工具所提供的交互式调试模型，你可以查看并修改所呈现的 HTML 和 CSS 代码。 你可以在不停止并重新启动调试器的情况下执行这一切操作。

有关其他 JavaScript 调试功能(例如，使用 JavaScript 控制台窗口和设置断点)的信息，请参阅 快速入门：调试 JavaScript 和在 Visual Studio 中调试应用。

检查实时 DOM

DOM 资源管理器展示所呈现的页面的视图，还可使用 DOM 资源管理器更改值并立即看到结果。 这使你可以在无需停止和重新启动调试器的情况下测试更改。 使用此方法与页面进行交互时不更改项目中的源代码，因此当发现代码中要更正的内容时，请对源代码作出更改。

提示

若要在更改源代码时避免停止和重新启动调试器，你可以使用“调试”工具栏上的 “刷新 Windows 应用” 按钮(或按 F4)刷新应用。 有关详细信息，请参阅 刷新应用 (JavaScript)。

可使用 DOM 资源管理器：

在 DOM 元素子树中导航并检查所呈现的 HTML、CSS 和 JavaScript 代码。

动态编辑所呈现元素的特性和 CSS 样式，并立即看到结果。

检查如何将 CSS 样式应用到页元素，并跟踪已应用的规则。

调试应用程序时，通常需要在 DOM 资源管理器中选择元素。 选择某个元素后，DOM 资源管理器右侧选项卡上显示的值将自动更新，以反映 DOM 资源管理器中的选定元素。 这些选项卡包括：样式、计算和布局 。 UWP 应用还支持“事件”和“更改”选项卡 。 有关选择元素的详细信息，请参见 Selecting elements。

提示

如果“DOM 资源管理器”窗口已关闭，请依次选择“调试” > > 以重新打开它。 仅在脚本调试会话期间显示该窗口。

在后续过程中，我们将通过使用 DOM 资源管理器完成以交互方式调试应用程序的过程。 我们将创建一个使用 FlipView 控件的应用程序，然后调试它。 此应用程序包含若干错误。

警告

以下示例应用是一个 UWP 应用。 Cordova 支持以上相同的功能，但应用会有所不同。

通过检查实时 DOM 进行调试

通过选择 “文件” > “新建项目” 。

选择“JavaScript” > “Windows Universal”，然后选择“WinJS App” 。

为项目输入名称(如 FlipViewApp)，然后选择“确定” 以创建应用。

在 index.html 的 BODY 元素中，添加以下代码：

打开 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: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg" });

pages.setAt(1, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg" });

pages.setAt(2, { flipImg: "http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg" });

};

app.oncheckpoint = function (args) {

};

app.start();

var publicMembers = {

items: pages

};

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

})();

下图显示了运行此应用时我们希望看到的内容。 但是，若要让应用程序进入此状态，我们必须先修复大量 Bug。

从“调试”工具栏上的“启动调试”按钮旁的下拉列表中选择“本地计算机” ：

选择 “仿真程序 8.1 WVGA 4 英寸 512MB” > “模拟器” 或按 F5，以调试模式运行应用。

这将运行应用，但是，你将看到几乎空白的屏幕，因为样式中有几个 Bug。 第一个 FlipView 图像显示在屏幕中间附近的小正方形中。

切换到 Visual Studio 并选择 “DOM 资源管理器” 选项卡。

提示

可按 Alt+Tab 或 F12，在 Visual Studio 和正在运行的应用程序之间切换。

在“DOM 资源管理器”窗口中，选择 ID 为 "fView"的部分的 DIV 元素。 使用箭头键可以查看并选择正确的 DIV 元素。 (使用向右键可以查看元素的子元素。)

提示

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

“DOM 资源管理器”窗口的右侧选项卡上显示的值将自动更新，以反映 DOM 资源管理器中的当前元素。

选择右侧的 “计算” 选项卡。

此选项卡显示选定 DOM 元素的每个属性的计算值或最终值。

打开高度 CSS 规则。 请注意，有一个级联样式设置为 100px，似乎与为 #fView CSS 选择器设置的 100% 的高度值不一致。 #fView 选择器的带有删除线的文本指示内联样式优先于该样式。

下图显示了 “已计算” 选项卡。

在“DOM 资源管理器”主窗口中，双击 fView DIV 元素的高度和宽度的级联样式。 现在可以在此处编辑这些值。 在此方案中，我们需要完全移除它们。

在主窗口中，双击 width: 100px;height: 100px;，按Delete 键，然后按 Enter 。 按 Enter 后，应用中将立即反映新值，即使尚未停止调试会话也是如此。

重要

你不但可以在“DOM 资源管理器”窗口中更新特性，还可更新 “样式” 、 “已计算” 和 “布局” 选项卡上显示的值。

通过选择它或使用 Alt+Tab 切换到此应用。

现在， FlipView 控件的外观大于模拟器或 Phone 仿真程序的屏幕大小。 这并不是预期的结果。 若要进行调查，请切回到 Visual Studio。

在 DOM 资源管理器中，再次选择 “计算” 选项卡并打开高度规则。 fView 元素仍显示 CSS 中的预期值 100%，但计算值等于应用的屏幕高度(例如，800px、667.67px 或其他值)，这不是我们希望此应用具有的值。 若要进行调查，在后续步骤中我们可以删除 fView DIV 元素的高度和宽度。

在 “样式” 选项卡中，取消选中 #fView CSS 选择器的高度和宽度属性。

“计算” 选项卡现在显示高度 400px。 信息指示此值来自平台 CSS 文件 ui-dark.css 中指定的 .win-flipview 选择器。

切回到此应用程序。

情况有所好转。 然而，还有一个问题有待解决，那就是边距看上去太大。

要进行调查，请切换到 Visual Studio 并选择“布局”选项卡查看元素的框模型。

在“布局”选项卡中，你会看到以下值：

255px(偏移量)和 255px(边距)或类似值，取决于设备分辨率。

下图显示了使用模拟器(具有 100px 的偏移量和边距)时“布局”选项卡的外观。

这似乎并不合适。 “计算” 选项卡也显示相同的边距值。

选择 “样式” 选项卡，并找到 #fView CSS 选择器。 在这里，你将看到 “边距” 属性的值为 25%。

选择 25% 并将其更改为 25px，然后按 Enter。

同样，在 “样式” 选项卡中，选择 .win-flipview 选择器的高度规则并将 400px 更改为 500px，然后按 Enter。

切回到应用程序，你会发现元素的位置显示正确。 若要修复源并刷新应用程序，而不停止并重新启动调试器，请参见以下过程。

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

在应用程序仍在运行时，切换至 Visual Studio。

打开 default.html，然后通过将 "fView" DIV 元素的 height 和 width 均设置为 100%，对源代码进行修改。

选择“调试”工具栏上的 “刷新 Windows 应用程序” 按钮(或按 F4)。 该按钮如下所示：

。

随后将重新加载应用程序页面，并且模拟器或 Phone 仿真程序将返回前台。

有关“刷新”功能的详细信息，请参阅 刷新应用 (JavaScript)。

Selecting elements

在调试应用程序时，可以通过三种方式选择 DOM 元素：

通过在“DOM 资源管理器”窗口中直接单击元素(或通过使用箭头键)。

通过使用 “选择元素” 按钮 (Ctrl+B)。

在使用“DOM 资源管理器”窗口选择元素并将鼠标指针置于一个元素上时，正在运行的应用程序中会突出显示相应的元素。 必须在 DOM 资源管理器中单击该元素以将其选定，也可以使用箭头键突出显示并选择元素。此外，还可以使用 “选择元素” 按钮在 DOM 资源管理器中选择元素。 下图显示 “选择元素” 按钮。

单击 “选择元素” (或按 Ctrl+B)将更改选择模式，以使你在正在运行的应用程序中单击某项，即可在 DOM 资源管理器中选择该项。 单击之后，模式将变回正常选择模式。 单击 “选择元素” 后，应用程序转入前台，而光标发生变化以反映新的选择模式。 单击有轮廓包围的元素后，DOM 资源管理器将返回前台，并选中了指定的元素。

在选择 “选择元素” 之前，可通过切换 “显示网页突出显示” 按钮来指定是否在正在运行的应用中突出显示元素。 下图显示了该按钮。 默认情况下，将显示突出显示的元素。

在选择突出显示元素时，将突出显示模拟器中指针悬停在其上方的元素。 突出显示的元素的颜色与 DOM 资源管理器的 “布局” 选项卡中显示的方框模型匹配。

备注

指针悬停在元素上方时突出显示的元素在 Windows Phone 模拟器中仅部分受支持。

请参阅