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