使用 DOM 资源管理器调试布局

DOM 资源管理器的**“布局”**选项卡可为 Windows 应用商店 或 Windows Phone 应用商店应用中的选定元素显示 CSS 方框模型。 可使用此方框模型的可视表示形式来标识和修改影响元素外观的布局相关值。

若要使用 DOM 资源管理器修改布局在方框模型中未显示的方面，请参见快速入门：调试 HTML 和 CSS和使用 DOM 资源管理器调试 CSS 样式。

修复布局问题的示例

此示例演示了如何选择“中心/枢轴”模板中的一个列表元素、解释了**“布局”**选项卡上的方框模型值，然后更改某个属性值来修复布局问题。

修复布局问题

1. 在 Visual Studio 中，创建一个使用“中心/枢轴”项目模板的新应用商店应用。

2. 在共享的 pages\hub 文件夹中，打开 hub.css。

3. 将下列 CSS 代码：

           .hubpage .hub .section4 .sub-image-row img {
               height: 95px;
               width: 130px;
           }
   

   替换为此 CSS 代码：

           .hubpage .hub .section4 .sub-image-row img {
               height: 95px;
               width: 130px;
               margin-left: 5em;
           }
   

4. 在解决方案资源管理器中选择 appName.WindowsPhone 项目或 appName.Windows 项目，然后从项目的快捷菜单中选择**“设为启动项目”**。

5. 根据你的启动项目，在“调试”工具栏上的下拉列表中选择**“仿真程序 8.1 WVGA 4 英寸 512MB”或“模拟器”（“本地计算机”**是默认值）。

   

6. 按 F5 以在调试模式下运行应用程序。

7. 通过滚动或轻弹打开第 4 部分。

   提示

   将 Phone 仿真程序或模拟器放置在 Visual Studio 窗口的右边，以便你能够立即看到选择结果以及你对 CSS 样式进行的更改。

   加载第 4 部分时，你会发现下方的图像看起来不合适。 每个项图像显示一半（缺失左边的一半）。

8. 切换到 Visual Studio，然后在 DOM 资源管理器中选择**“选择元素”**（或按 Ctrl+B）。 这样将更改选择模式以使你可通过单击某项来选择该项，然后将应用程序带入前台。 单击后模式即恢复原样。

   提示

   你也可以使用箭头键或其他方法直接在 DOM 资源管理器中选择 HTML 元素。有关选择元素的详细信息，请参见快速入门：调试 HTML 和 CSS。

9. 在 Phone 仿真程序或模拟器中，在已分为两半的图像中选择右半边的灰色图像。 选定元素的周围将突出显示，如下面的 Windows Phone 仿真程序中所示：

   

   提示

   在你选择元素之前，模拟器支持悬停在元素上以在 DOM 元素周围突出显示框。Windows Phone 仿真程序不支持此内容。

   当你选择 DOM 元素时，DOM 资源管理器将自动在 Visual Studio 中选择相应的 IMG 元素。 DOM 资源管理器中选择的元素类似于此：

   <img src="ms-appx://guid/images/gray.png> 
   </img>
   

10. 单击**“布局”**选项卡。 随后此选项卡将显示选定元素的方框模型，如下面的 Windows Phone 仿真程序中所示。

    

    此视图提供有关元素的一些有用信息：

    • 颜色与将鼠标指针悬停在元素上方时模拟器中显示的方框突出显示对应。 蓝色表示 <img> 元素的尺寸。 棕褐色表示边距值。

    • 设置左边距 (margin-left)，它可指示问题的原因，因为它与症状匹配（图像左侧显示为黑色）。

    • 显示 0 像素的值的方框（例如，“边框”和“填充”）表示可能未设置相应的 CSS 属性。

11. 若要查看 margin-left 规则的应用方式，请选择**“已计算”**选项卡并查看 margin-left 规则下方显示的内容。 你可以看到此规则设置为 5em 值，但是计算的值可以是 66.66px 或 146.66px，具体取决于你的目标设备。

    提示

    “已计算”选项卡显示 margin-left 规则是在 ..hubpage .hub. section4 .sub-image-row img CSS 选择器（可在 hub.css 中找到它）中设置的。在本演示应用程序中，这是你需要执行修复的位置。

    还可使用**“布局”**选项卡测试对布局值所做的修改。

12. 在**“布局”选项卡中，选择显示在“边距”框中左侧的“66.66”或“146.66”**。

13. 键入 0，然后按 Enter。 （也可使用向上键和向下键来更改此值。）

14. 选择 DOM 资源管理器中的其他 <img> 元素并将它们的 margin-left 值更改为 0。

15. 切换至 Phone 仿真程序或模拟器。 更新后的 margin-left 值已应用到第 4 部分的图像。 这些值还会在 margin-left 规则下的**“已计算”**选项卡中更新。

请参见

任务

查看 DOM 事件侦听器

概念

快速入门：调试 HTML 和 CSS

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