Page Inspector (Visual Studio)
页面检查器是带有集成浏览器和浏览器工具的 Web 开发工具。 浏览器直接在 Visual Studio IDE 中呈现网页（HTML、Web 窗体、ASP.NET MVC 或 网页）。 通过 IDE 中的浏览器，您可以并行查看呈现的输出及其源。 使用页面检查器的检查功能选择页面检查器的集成浏览器中的任何元素时，元素的源以及对应的级联样式表 (CSS) 都将突出显示。 此功能可帮助您查找并修复 HTML 和 CSS 代码中可能会难以查找的错误。 页面检查器中也有浏览器工具，您可以直接在 Visual Studio 环境中使用。
要求
页面检查器需要以下各项：
Visual Studio 2012.
.NET Framework 4.5。
Web 应用程序，其目标 .NET Framework 4 或更高版本。
为获得完整功能，请安装 Internet Explorer 9 或更高版本（页面检查器承载 Visual Studio 中当前版本的 Internet Explorer）。
必须在 Internet Explorer 中启用 JavaScript。 有关更多信息，请参见如何在浏览器中启用脚本。
有关更多信息，请参见 Page Inspector 错误消息。
基本任务
To |
执行此操作 |
|---|---|
在页面检查器中查看项目或项目文件 |
在解决方案资源管理器中右击项目或文件，然后从快捷菜单中选择“在页面检查器中查看”。 |
在页面检查器中运行并查看项目 |
在“解决方案资源管理器”中选择项目。 从 Visual Studio 菜单中的浏览器下拉列表中选择“页面检查器”，然后单击绿色箭头运行项目。 |
将元素映射回其在源中的准确位置 |
在页面检查器的工具窗格中，单击“检查”。 将鼠标指针移到“页面检查器”浏览器中的一个元素上。 对应的标记在源文件和 HTML 以及“样式”窗格中突出显示。 |
查找 CSS 规则的源 |
在“样式”或“跟踪样式”窗格中单击 CSS 规则。 该规则在源样式表文件中突出显示。 |
保存对源所做的更改，然后刷新“页面检查器”浏览器 |
按 CTRL+ALT+ENTER 或单击更新栏。 |
将页面检查器设为默认的调试浏览器 |
从 Visual Studio 菜单中的浏览器下拉列表中，选择“浏览方式”。 在“浏览方式”对话框中，选择“页面检查器”，然后选择“设为默认值”。 |
将页面检查器设为多个调试浏览器中的一个 |
您可以选择页面检查器作为多个浏览器中的一个，按下 F5 或 CTRL+F5 可同时启动这些浏览器。 有关更多信息，请参见 ASP.NET 4.5 和 Visual Studio 2012 的“多浏览器支持”部分。 |
用于了解的资源
Visual Studio 的页面检查器（MSDN 博客）
页面检查器 - 简介（视频）
UI 元素
.gif "Hh974728.collapse_all(zh-cn,VS.110).gif")
检查
使用“检查”按钮，您可以轻松地将元素映射回其在源中的准确位置。
若要将页面检查器设为检查模式，请单击“页面检查器”工具窗格上的**“检查”**按钮。 处于检查模式时，当您将鼠标指针悬停在呈现页面的任何部分时，对应的源标记或代码将突出显示，对应的源文件也将在解决方案资源管理器中突出显示。 相反，当您选择源中的标记时，对应的输出将在“页面检查器”浏览器中突出显示。 有关更多信息，请参见在 ASP.NET MVC 中使用页面检查器 或在 ASP.NET Web 窗体中使用页面检查器。
备注
“检查”按钮可用作切换键。检查模式处于活动状态时，“检查”按钮周围有稀疏的蓝色虚线。
“页面检查器”用户界面的下面板中剩余的 UI 元素包含浏览器工具，这些浏览器工具与 Internet Explorer 中的 F12 工具类似。 有关 Internet Explorer 中的 F12 工具的更多信息，请参见使用 F12 开发人员工具调试 HTML 和 CSS。
HTML
HTML 窗格视图演示了当前页面的树状视图（DOM 树），该页面由内存中的“页面检查器”浏览器表示。 您可以使用鼠标或键盘直接导航树、查看特性并对值做出测试性更改。 您可以通过单击父元素旁边的小箭头展开或折叠 DOM 树中的元素属性。
处于检查模式时，当您将鼠标指针移到“页面检查器”浏览器中的页面上时，所选元素的标记将在 HTML 窗格和源标记中突出显示。
通过 HTML 窗格，您可以对 DOM 元素特性做出测试性更改并查看立即在浏览器中反映的更改。 双击 HTML 窗格中的任何属性或特性进行编辑。 若要添加特性，请右击元素并选择**“添加特性”，或使用“特性”**窗格。 这些更改不会保留并且源文件不会受到影响。 但是，由于所选的标记也在源文件中突出显示，所以很容易查看源所在的位置，以及编辑并保存更改。
编辑源文件时，页面检查器中的更新栏将显示，提示您按 CTRL+ALT+ENTER（或单击该栏）保存所做的更改并刷新“页面检查器”浏览器中的页面。
HTML 窗格中的快捷菜单选项
右击 HTML 窗格中的元素访问以下快捷菜单选项。
Menu item |
其用途 |
|---|---|
添加特性 |
将新的特性添加到标记或元素中。 |
复制 |
将标记和特性复制到剪贴板。 |
复制 InnerHTML |
将元素的 InnerHTML 内容（子文本、元素和特性）复制到剪贴板。 |
复制 OuterHTML |
将元素的 OuterHTML 内容（子文本、元素和特性）复制到剪贴板。 |
有关更多信息，请参见在 ASP.NET MVC 中使用页面检查器 或在 ASP.NET Web 窗体中使用页面检查器。
样式
**“样式”**窗格显示您在树状视图中选择的元素的规则和样式。 它由 CSS 规则的层次结构分组并包括继承和重写特性。 列表顶部的规则是首先应用到所选元素中的，而底部的规则当前定义所选元素的样式属性。
如果要对 CSS做出测试性更改，您可以在**“样式”**窗格中修改 CSS 属性并查看立即在浏览器中反映的更改。 双击属性值进行编辑。 您可以清除并选择属性旁边的复选框，查看复选框存在与否如何影响页面的呈现。 这些更改不会保留并且源文件不会受到影响。 有关更多信息，请参见在 ASP.NET MVC 中使用页面检查器 或在 ASP.NET Web 窗体中使用页面检查器 中的“在‘样式’窗口中预览对 CSS 所做的更改”。
若要在源中做出更改，请单击**“样式”或“跟踪样式”**窗格中的 CSS 规则。 页面检查器将打开在其中定义规则的 .css 文件并为您选择完整的规则。 编辑源时，页面检查器中的更新栏将显示，提示您按 CTRL+ALT+ENTER（或单击该栏）保存所做的更改并刷新“页面检查器”浏览器中的页面。
“样式”窗格中的快捷菜单选项
右击“样式”窗格中的元素访问以下快捷菜单选项。
Menu item |
其用途 |
|---|---|
添加新规则 |
添加一个 CSS 规则。 |
添加新的属性 |
添加一个 CSS 属性。 |
移除项 |
移除所选项。 |
复制 |
复制所选项。 |
复制 CSS 规则 |
复制所选的 CSS 规则。 |
复制 CSS 属性 |
复制所选的 CSS 属性。 |
跟踪样式
**“跟踪样式”窗格显示与“样式”窗格相同的信息，但是信息是按照按字母顺序排序的属性分组而不是按照规则分组。 您可能会发现“跟踪样式”窗格比“样式”**窗格更便于疑难解答，因为您通常知道 CSS 属性的名称但是不知道其父元素的名称。
布局
**“布局”**窗格显示所选元素的方框模型。
若要查看元素的方框模型，请单击**“布局”选项卡，然后单击“检查”**按钮。 将鼠标指针移到浏览器中的元素上—或者，在 HTML 窗格中单击元素进行选择。 **“布局”**窗格显示所选元素的确切大小及其偏移量、边距、填充和边框大小。
您可以使用**“布局”窗格做出测试性更改。 如果要预览更改，请双击“布局”**窗格中的像素值并编辑值。 更改将立即在浏览器中反映。 这些更改不会保留并且源文件不会受到影响。
特性
**“特性”**窗格显示当前所选元素的属性。
您可以使用**“特性”窗格做出测试性更改。 双击特性值进行编辑。 您可以使用“添加特性”和“移除特性”**按钮临时添加或移除特性。 您所做的更改将立即在“页面检查器”浏览器下的 HTML 窗格中显示。 这些更改不会保留并且源文件不会受到影响。
文件
“页面检查器”工具中的**“文件”**窗格包含指向构成当前页面的所有源文件的链接。 此功能很有帮助，因为它使所有相关文件一目了然。 当您使用的是分部视图和模板，或如 Orchard 或 Umbraco 的应用程序时，此功能尤其有用。
如果要在 Visual Studio 编辑器中开启一份文件，请单击对应的链接。
更新栏
更改页面源代码时，“页面检查器”浏览器的顶部将显示更新栏。 更新栏会提示您按 CTRL+ALT+ENTER 或单击该框保存更改并刷新浏览器。