Visual Studio 2012 中的Page Inspector是一种具有集成浏览器的 Web 开发工具。 在集成浏览器中选择任意元素，Page Inspector立即突出显示元素的源和 CSS。 你可以浏览任何 MVC 视图、快速查找呈现标记的源，以及直接在 Visual Studio 环境中使用浏览器工具。
本教程演示如何启用检查模式，然后快速查找和编辑 Web 项目中的标记和 CSS。 本教程使用 MVC 项目，但你也可以将Page Inspector用于
Web Forms
和其他 ASP.NET 应用程序。
Page Inspector与 Microsoft Web 开发人员工具 捆绑在一起。 最新版本为 1.3。 若要检查你拥有的版本，请运行 Visual Studio，然后从
“帮助
”菜单中选择“
关于 Microsoft Visual Studio
”。
默认情况下，Page Inspector停靠为 Visual Studio 环境左侧的窗口。 如果需要，可以将其停靠在其他位置，或取消停靠窗口。 请参阅
如何：排列和停靠 Windows
。
Page Inspector窗口的顶部窗格在浏览器窗口中显示当前页。 底部窗格显示 HTML 标记中的页面，以及一些选项卡，用于检查页面的不同方面。 底部窗格类似于 Internet Explorer 中的
F12 开发人员工具
。
移动鼠标指针时，Visual Studio 会在源文件中突出显示相应的 Razor 语法。 如果 HTML 元素来自另一个源文件，Visual Studio 会自动打开该文件。
将鼠标指针移动到页脚区域时，Page Inspector打开 _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) 。
Page Inspector浏览器中显示的第一个内容是登录页。 单击“注册”并创建用户名和密码。 注册后，应用程序会登录并创建包含一些示例项的待办事项列表。
