使用 DOM 资源管理器调试 CSS 样式

2015-06-05

适用于 Windows 和 Windows Phone

调试 Windows 应用商店应用和 Windows Phone 应用商店应用时，可查看和更改选定 DOM 元素及其子元素的 CSS 规则。

DOM 资源管理器的**“样式”和“已计算”**选项卡显示适用于所选元素的 CSS 规则。根据 CSS 优先顺序规则，按照其专一性顺序显示这些规则。选项卡中位于选择器或样式顶部的规则是最后应用于所选元素的规则（最具针对性的规则），选择器或样式底部的规则是最先应用的规则。应用规则时，这些规则将取代以前应用的规则。

“样式”、**“已计算”和“更改”**选项卡提供了不同的样式信息视图。

使用**“样式”**选项卡可查看按 CSS 选择器名称（如 html, body）组织的规则。还可使用此选项卡启用或禁用特定样式，手动编辑值以及查看这些更改的即时结果。
使用**“已计算”**选项卡可查看样式的计算值。例如，如果你将大小设置为 1em，则 Internet Explorer 计算出的值可能为 16px。此选项卡中的样式是按样式名称组织的，例如 height。还可使用此选项卡启用或禁用特定样式，手动编辑值以及查看这些更改的即时结果。

备注

在 Visual Studio 2013 Update 2 中，已将“跟踪”选项卡中提供的信息与“已计算”选项卡中提供的信息合并，并且“跟踪”选项卡已删除。
使用**“更改”**选项卡以识别并跟踪在调试会话期间更改的 CSS 样式。

提示

在“样式”和“已计算”选项卡中作出的更改并不是永久性的。停止调试后即丢失这些更改。若要在不停止并重新启动调试器的情况下更改源代码并重新加载页面，请使用“调试”工具栏上的 “刷新 Windows 应用程序”按钮按钮（“刷新 Windows 应用程序”）刷新应用程序。有关更多信息，请参见刷新应用程序 (JavaScript)。

修复 CSS 规则的示例

此示例演示如何检查 CSS 规则和调试样式问题。在此示例中，假设你要更改用于显示 Windows 应用商店“拆分应用”模板中的组标题的字体颜色。

备注

此示例显示了 Windows 应用商店应用，但所有显示的 DOM 资源管理器功能同样适用于 Windows Phone 应用商店应用。

若要查看和更改 CSS 规则，请执行以下操作

在 Visual Studio 的“拆分应用”项目模板中，创建一个使用 JavaScript 和 HTML 的 Windows 应用商店应用。
在**“解决方案资源管理器”**中，打开 items.css。（你可在 pages 文件夹中找到 items.css。）

将下列 CSS 代码：

    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }

替换为以下内容：

    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }

这将添加一个为列表中的每个项指定颜色 #ff6a00（橙色）的样式。 CSS 选择器 .itemspage .itemslist .item 指示 items.html 中的 DIV 元素的一组类名称，这些 DIV 元素在实时 DOM 中显示为嵌套元素。 item DIV 元素指定列表项。

在**“调试”工具栏的下拉列表中选择“模拟器”（“本地计算机”**是默认值）。
按 F5 以在调试模式下运行应用程序。

当应用程序完成加载时，查看列表项的标题，如**“Group Title: 1”**。颜色未发生更改，因此尝试对标题应用橙色的操作不起作用。我们将使用 DOM 资源管理器中的 CSS 选项卡找出问题并进行修复。

提示

在模拟器中显示该应用程序后，请将模拟器放置在 Visual Studio 窗口的旁边，以便你能够立即看到选择的结果和对 CSS 样式所做的更改。
切换到 Visual Studio，然后在 DOM 资源管理器中单击**“选择元素”（或按 Ctrl+B）。这样将更改选择模式以使你可通过单击某项来选择该项，然后将应用程序带入前台。单击后模式即恢复原样。下面是“选择元素”**按钮。

提示

也可直接在 DOM 资源管理器中选择 HTML 元素。有关选择元素的详细信息，请参见快速入门：调试 HTML 和 CSS。
在模拟器主页的左面板中，将鼠标悬停在列表中第一项的标题**“Group Title: 1”**上。标题将会突出显示，如下所示：

备注

Windows Phone 仿真程序仅支持部分通过悬停而突出显示的元素。
单击这个有轮廓包围的标题。随后 DOM 资源管理器将自动选择相应的 HTML 元素，类似于以下内容。
```
<h4 class="item-title">Group Title: 1</h4>
```
当你在 DOM 资源管理器中选择 H4 元素时，DOM 资源管理器的选项卡将立即显示与 H4 元素相关的规则。 **“已计算”**选项卡如下所示，其中打开了 color 属性：

此视图提供有关与 color 样式相关的规则的有用信息，如以下各项：
- 我们在 items.css 中修改的 CSS 选择器 .itemspage .itemslist .item 将不会在最终样式计算中使用（它将显示在带删除线的文本中）。也不会使用 color 样式的其他几个匹配项。
  
  提示
  
  对于较长的选择器名称，全名将在工具提示中显示。
- 将为同样在 items.css 中定义的 CSS 选择器 .itemspage .itemslist .item .item-overlay .item-title 专门设置最终计算所得的 CSS 值 rgba(255, 255, 255, 0.87)。
  
  提示
  
  现在，我们不仅了解设置标题颜色的位置，还了解可更改标题颜色的位置。不过，我们还可在不刷新应用程序的情况下在 DOM 资源管理器中测试更改，如剩余步骤中所示。
清除 color 样式的第一个匹配项的复选框，该匹配项适用于 .itemspage .itemslist .item .item-overlay .item-title 选择器。此时，在模拟器中，你会看到所有项标题的颜色都变为橙色，如我们所希望的一样，并且将不再重写已在 CSS 中修改的选择器 .itemspage .itemslist .item（即，不再对该选择器应用带删除线的文本）。这是清除复选框后的**“已计算”**选项卡。
选择**“更改”**选项卡。

使用**“更改”选项卡以识别并跟踪在调试会话期间对样式所作出的更改。下图显示“更改”**选项卡中的 .itemspage .itemslist .item .item-overlay .item-title 选择器，它现在已被替代。
你还可手动编辑 CSS 样式值并使用**“样式”**选项卡查看即时结果。
选择**“样式”**选项卡。
打开 .itemspage .itemslist .item .item-overlay .item-title 样式选择器。
选择 color 样式的第一个匹配项，然后双击属性值 rgb(255, 255, 255, 0.87)。
使用键盘可修改此值。将此值更改为 rgb(255, 255, 0, 0.87)，然后按 Enter。随后模拟器中项标题的颜色全部变为黄色。
若要更改源 CSS 文件，请单击**“样式”选项卡上的“items.css”链接。这将打开 items.css，你可在其中更改应用程序代码中的 color 样式的值。若要在不停止或重新启动调试器的情况下刷新应用程序，请单击“调试”工具栏上的（“刷新 Windows 应用程序”**）按钮。

请参见

通过

使用 DOM 资源管理器调试 CSS 样式

修复 CSS 规则的示例

若要查看和更改 CSS 规则，请执行以下操作

请参见

任务

概念

其他资源

其他资源