在 ASP.NET MVC 中将页面检查器与集成浏览器配合使用
作者：Tim Ammann
Visual Studio 2012 中的页面检查器是具有集成浏览器的 Web 开发工具。 选择集成浏览器中的任何元素，页面检查器会立即突出显示元素的源和 CSS。 可以浏览任何 MVC 视图，快速查找呈现标记的来源，并在 Visual Studio 环境中使用浏览器工具。
本教程介绍如何启用检查模式，然后快速查找和编辑 Web 项目中的标记和 CSS。 本教程使用 MVC 项目，但还可以对 Web 窗体 和其他 ASP.NET 应用程序使用页面检查器。
本教程包含以下部分：
先决条件
注意
若要获取最新版本的页面检查器，请使用 Web 平台安装程序 安装适用于 .NET 2.0 的 Windows Azure SDK。
页面检查器与Microsoft Web 开发人员工具捆绑在一起。 最新版本为 1.3。 若要检查你拥有的版本，请运行 Visual Studio，然后从“帮助”菜单中选择“关于Microsoft Visual Studio”。
创建 Web 应用程序
首先，创建一个 Web 应用程序，用于页面检查器。 在 Visual Studio 中，依次选择“文件”>“新建项目”。 在左侧展开 Visual C#，选择 Web，然后选择 ASP.NET MVC4 Web 应用程序。
单击“确定”。
在 “新建 ASP.NET MVC 4 项目 ”对话框中，选择 “Internet 应用程序”。 将 Razor 保留为默认视图引擎。
应用程序将在 “源” 视图中打开。
有了要使用的应用程序后，可以使用页面检查器来检查和修改它。
使用页面检查器浏览到视图
在 Visual Studio 2012 中，可以右键单击项目中的任何视图，在页面检查器中选择“视图”，页面检查器将找出路线并显示页面。
在解决方案资源管理器中，展开“视图”文件夹，然后展开“开始”文件夹。 右键单击 Index.cshtml 文件，然后选择 “在页面检查器中查看”。
默认情况下，页面检查器停靠为 Visual Studio 环境左侧的窗口。 如果愿意，可以在其他位置停靠它，或取消停靠窗口。 请参阅 操作方法：排列和停靠窗口。
页面检查器窗口的顶部窗格显示浏览器窗口中的当前页。 底部窗格以 HTML 标记显示页面，以及一些选项卡，用于检查页面的不同方面。 底部窗格类似于 Internet Explorer 中的 F12 开发人员工具 。
在本教程中，你将使用 HTML 和 样式 选项卡快速导航并更改应用程序。
EnableInspection 模式
若要将页面检查器置于检查模式，请单击“检查”按钮。 在检查模式下，将鼠标指针悬停在呈现页面的任何部分时，将突出显示相应的源代码标记或代码。
现在，将鼠标移到页面检查器中页面的不同部分。 正如你所做的那样，鼠标指针更改为大加号，下面元素突出显示：
移动鼠标指针时，Visual Studio 会突出显示源文件中的相应 Razor 语法。 如果 HTML 元素来自另一个源文件，Visual Studio 会自动打开该文件。
在“页面检查器”中 ，“HTML ”选项卡显示从 Razor 语法生成的 HTML。 移动鼠标指针时，将突出显示 HTML 元素。 “ 样式 ”选项卡显示元素的 CSS 规则。
使用页面检查器对标记进行更改
使用页面检查器可以查找其位置可能不明显的标记。 然后，可以修改标记并查看生成的更改。
若要查看此情况，请单击“检查”，然后滚动到页面检查器窗口中页面底部。
将鼠标指针移动到页脚区域时，页面检查器将打开 _Layout.cshtml 文件，并突出显示所选布局页面的部分。 如你所看到的，页脚区域在布局文件中定义，而不是视图本身。
现在，将鼠标指针移到带有版权 声明的行上。 在 _Layout.cshtml 页面中，突出显示相应的行。
将一些文本添加到 _Layout.cshtml 文件中行的末尾。
<p>© @DateTime.Now.Year - 我的 ASP.NET MVC 应用程序岩石！</p>
现在，按 Ctrl+Alt+Enter 或单击更新栏，在页面检查器浏览器窗口中查看结果。
你可能认为 Index.cshtml 中定义的页脚，但事实证明，该页脚位于 _Layout.cshtml 中，Page Inspector 会为你找到它。
检查模式和 HTML 窗口
接下来，你将快速查看 HTML 窗口及其如何为你映射元素。
单击“检查”以将页面检查器置于检查模式。
单击页面顶部显示“此处的徽标”。 你正在更详细地检查特定元素，因此在移动鼠标指针时，浏览器窗口中的显示不再更改。
现在，将鼠标指针移动到 HTML 窗口。 移动鼠标指针时，页面检查器会概述 HTML 窗口中的元素，并在浏览器窗口中突出显示相应的元素。
与之前一样，页面检查器会在临时选项卡中为你打开 _Layout.cshtml 文件。单击 _Layout.cshtml 临时选项卡，并在标题>部分中突出显示<相应的标记：
在样式窗口中预览 CSS 更改
接下来，你将使用“页面检查器 样式” 窗口预览对 CSS 的更改。
单击“检查”以将页面检查器置于检查模式。
在页面检查器浏览器窗口中，将鼠标指针移到“主页”部分，直到 div.content-wrapper 标签出现。
单击 div.content-wrapper 节一次，然后将鼠标指针移动到 “样式” 窗口。 “ 样式” 窗口显示此元素的所有 CSS 规则。 向下滚动以查找 .featured .content-wrapper 类选择器。 现在清除背景色属性的复选框。
请注意更改预览在页面检查器浏览器窗口中的即时性。
再次选中该复选框，然后双击属性值并将其更改为红色。 更改会立即显示：
在将更改提交到样式表本身之前，通过 “样式” 窗口可以轻松测试和预览 CSS 更改。
CSS 自动同步
注意
此功能需要页面检查器版本 1.3。
CSS 自动同步功能允许你直接编辑 CSS 文件，并在页面检查器浏览器中立即查看更改。
单击“检查”以将页面检查器置于检查模式。
在页面检查器浏览器中，将鼠标指针移到“主页”部分，直到 div.content-wrapper 标签出现。 单击一次以选择此元素。
“ 样式” 窗口显示此元素的所有 CSS 规则。 向下滚动以查找 .featured .content-wrapper 类选择器。 单击“.featured .content-wrapper”。 页面检查器将打开定义此样式的 CSS 文件（Site.css），并突出显示相应的 CSS 样式。
现在，将值 background-color 更改为“red”。 更改将立即显示在页面检查器浏览器中。
使用 CSS 颜色选取器
Visual Studio 2012 中的 CSS 编辑器具有颜色选取器，便于选择和插入颜色。 颜色选取器包括标准调色板，支持标准颜色名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色，并维护文档中最近使用的颜色列表。
在上一部分中，你更改了 background-color 属性的值。 若要调用颜色选取器，请将插入点置于属性名称和类型 # 或 rgb（） 之后。
单击颜色以选择它，或按向下键，然后使用向左键和向右键遍历颜色。 访问颜色时，将预览相应的十六进制值：
如果颜色栏没有所需的确切颜色，则可以使用颜色选取器弹出窗口。 若要打开它，请单击颜色栏右端的双 V 形，或在键盘上按一次或两次向下键。
单击右侧垂直栏中的颜色。 这显示了主窗口中该颜色的渐变。 通过按 Enter 直接从垂直栏中选择颜色，或单击主窗口中的任意点以更精确地选择。
如果计算机屏幕上有要使用的颜色（它不必位于 Visual Studio 用户界面内），则可以使用右下角的取眼器工具捕获其值。
还可以通过在颜色选取器底部移动滑块来更改颜色的不透明度。 这样做会将颜色值更改为 RGBA 值，因为 RGBA 格式可以表示不透明度。
选择颜色后，按 Enter，然后键入分号以完成Site.css文件中的背景色条目。
页面检查器更新栏
页面检查器会立即检测对 Site.css 文件的更改，并在更新栏中显示警报。
若要保存所有文件并刷新页面检查器浏览器，请按 Ctrl+Alt+Enter 或单击更新栏。 突出显示颜色的更改将显示在浏览器中。
将动态页面元素映射到 JavaScript
在现代 Web 应用程序中，页面中的元素通常使用 JavaScript 动态生成。 这意味着没有对应于这些页面元素的静态标记（HTML 或 Razor）。
使用版本 1.3 时，页面检查器现在可以将动态添加到页面的项目映射回相应的 JavaScript 代码。 为了演示此功能，我们将使用 单页应用程序（SPA）模板。
注意
SPA 模板需要 ASP.NET 和 Web 工具 2012.2 更新。
在 Visual Studio 中，依次选择“文件”>“新建项目”。 在左侧展开 Visual C#，选择 Web，然后选择 ASP.NET MVC4 Web 应用程序。 单击“确定”。
在 “新建 ASP.NET MVC 4 项目 ”对话框中，选择“ 单页应用程序”。
在解决方案资源管理器中，展开“视图”文件夹，然后展开“开始”文件夹。 右键单击 Index.cshtml 文件，然后选择 “在页面检查器中查看”。
页面检查器浏览器中显示的第一件事是登录页。 单击“注册”并创建用户名和密码。 注册后，应用程序会登录并创建包含一些示例项的待办事项列表。
单击“检查”以将页面检查器置于检查模式。 在页面检查器浏览器中，单击其中一个操作项。 请注意，元素名称旁边的“JS”以橙色突出显示，而不是用蓝色突出显示。 这表示通过脚本动态创建元素。
此外，“调用堆栈”选项卡上会显示橙色下划线。这表示“调用堆栈”窗格包含有关该元素的详细信息。
单击“调用堆栈”选项卡。“调用堆栈”窗格显示创建元素的 JavaScript 调用的调用堆栈。 对外部库（如 jQuery）的调用已折叠，以便可以轻松查看对应用程序脚本的调用。
若要查看完整堆栈（包括对外部库的调用），可以展开标记为“外部库”的节点：
如果单击调用堆栈中的项，Visual Studio 将打开代码文件并突出显示相应的脚本。
另请参阅
使用 Visual Studio ASP.NET MVC 4 简介（ASP.net 网站）
页面检查器 简介 （第 9 频道视频）
页面检查器错误消息 （MSDN）