Page Inspector 入门指南
本文讨论了 Visual Studio 11 中引入的 Page Inspector。
微软随 Visual Studio 11 开发者预览版推出了一款非常令人兴奋的工具，那就是页面检查器（Page Inspector）。
Web 开发从来都不是一项简单的工作。每个 Web 开发人员都必须花费大量时间来美化网页，并大量处理 HTML 语法。
有许多工具极大地帮助了 Web 开发人员，并成为 Web 开发社区的通用语言。其中一些工具是：
这些工具极大地帮助了 Web 开发人员，让他们的生活变得轻松。但我从未对这些开发者工具感到满意，并且总是想拥有一些只与 Visual Studio 集成的工具。
如上所述，我总是感觉到 aspx/ascx/master... 代码和渲染的 HTML 之间存在脱节。尽管我大量使用上述工具来找出渲染 HTML 的缺陷，列出它们，然后找出正确的映射代码并修复问题。
但这不仅仅是一个单向过程。有时这会变成一个非常漫长的循环过程。
众所周知，大多数情况下，渲染的页面不仅仅是单个文件的结果，它还包含许多用户控件、母版页、基页等。因此，即使您使用多种工具找到了问题列表。接下来的艰巨任务是找到问题所属的准确文件，然后修复它。当应用程序不是您自己开发时，这会变得更加繁琐。
众所周知，浏览器只理解 HTML、CSS、JS 等。我们可以将所有这些分为两个部分：
这里客户端资源包含 HTML、CSS、JavaScript 等文件，而服务器端则包含 aspx、ascx、母版页等我们传统的 ASP.NET 文件，它还包括像 csHTML 文件（Razor 视图）等最新技术。这对 Razor 视图非常有用，因为它没有任何设计视图。ASP.NET 将所有这些资源渲染成 HTML 并发送到浏览器。一旦浏览器显示您的页面，您唯一的选择就是使用一些开发人员工具来找出 HTML 部分的问题。
如果有一个工具与 Visual Studio 紧密耦合，可以只在开发应用程序时找出问题并纠正它们，那会怎么样？微软已经推出了集成在 Visual Studio 11 开发者预览版中的页面检查器。
注意：此文章使用的是开发者预览版，不是 Beta 版或最终发布版。因此，在使用时可能会遇到一些问题，但希望在最终发布版中这些问题都能得到解决。
先决条件
- .Net framework 4.5
- Visual Studio 11 开发者预览版或更高版本
- Internet Explorer 9 或更高版本
什么是页面检查器？
根据微软的说法，“页面检查器是一个新工具，它将浏览器诊断工具引入 Visual Studio，并在浏览器、ASP.NET 和源代码之间提供集成体验。页面检查器通过结合两者的最佳功能，弥补了 Web 开发中客户端（浏览器工具）和服务器端（ASP.NET 和源代码）之间的差距。”
如何安装它。
正如我提到的，页面检查器只适用于 Visual Studio 11 开发者预览版。它需要 ASP.NET 4.5。它不直接随 VS 11 附带，它就像一个插件，您需要将其安装在您的 VS 11 中。您可以使用 Web 平台安装程序通过以下链接进行安装。
http://www.microsoft.com/web/gallery/install.aspx?appid=VSPageInspector_v1
注意：在发布本文时，Visual Studio 11 Beta 版已经发布。在此版本中，页面检查器是 Visual Studio 的一部分，即您无需为页面检查器安装任何东西。
工作原理
当我们运行页面检查器时，它会执行几个步骤。- 构建项目 - 使用 IIS express - 用页面检查器打开页面。
它需要逆向工程来分解页面。它需要大量的元数据来提供其功能或源代码映射。因此，当您第一次运行项目时，它会要求您在 web config 中添加一些设置，如下所示：
如前所述，在部署到生产环境时我们需要删除这些设置，因为它需要生成大量的元数据供页面检查器使用。这些元数据在生产环境中是不需要的，并且会增加额外的开销。
每当源文件发生任何更改时，页面检查器都会提示刷新页面以查看更改，如下所示。
因此，要运行页面检查器，如果页面检查器已正确安装，您将看到一个“在页面检查器中查看”选项。
或者，您可以使用命令 Ctrl+K, Ctrl+G 在页面检查器中查看页面。它会打开当前活动的页面。
所以我创建了一个示例默认 ASP.NET 项目用于演示。那么让我们看看它的第一个视图。
那么让我们逐一讨论这些点。
1：通常在任何浏览器诊断工具中，我们只能看到浏览器页面视图和渲染部分，即 HTML、CSS 等。但在页面检查器中，它还会标记相应的服务器文件，即 aspx、ascx、master 等。
1 A：页面上被检查的元素
1 B：关联的服务器端标记。一旦您在页面检查器中选择一个元素，服务器端文件中相应的标记就会被突出显示。众所周知，一个页面通常不是单个文件的结果。页面检查器会导航到关联的文件并打开它以突出显示该元素。
1 C：相应的渲染 HTML
2：正如我之前提到的，渲染的页面是许多服务器端文件的结果。因此，页面检查器会显示两个选项卡，一个包含 HTML 部分，另一个显示关联文件列表。这看起来像：
这里目前使用了两个文件，所以它显示了这两个文件。
3：为了显示其他所需文件，如 CSS，它有另一个选项卡，其中包含以下部分，就像任何其他浏览器开发人员工具一样。这些是：
- 样式：显示应用于所选元素的所有 CSS 属性
- 跟踪样式：它显示了按 CSS 属性组织的已应用于元素的样式的另一个视图
- 布局：它显示布局
- 属性：列出应用于所选元素的所有属性。它为您提供了添加和删除属性的选项。
那么现在让我们深入探讨 CSS 部分。让我们看看标记。
1：HTML 上选定的元素。
2：在样式选项卡中，它分为两个部分：继承的和内联的。继承的包括所有从其他元素继承的样式。
3：内联的：它列出应用于当前元素的所有属性。
4：这是 CSS 属性所在的超链接。
5：众所周知，如果对任何元素应用了多个属性，则内联元素具有更高的优先级。因此，有些属性未被应用或被覆盖，因此被标记为划掉。
6：您可以双击元素进行更新。
让我们看另一个选项卡，即“跟踪样式”。跟踪样式:
它列出了按 css 属性组织的应用于所选元素的样式。它看起来像：
布局：布局显示所选元素的布局，与其他开发人员工具一样。
属性：此属性选项卡列出应用于所选元素的所有属性。它还允许添加或删除任何属性以查看其行为。
我们来看另一个视图。
当我们选择一个元素时，它的样式会显示在样式选项卡中。在这里，如果我们点击类名，它会带我们到包含样式类定义的文件。我们可以从那里更新样式并进行检查，如下所示：
而且我们还可以选择从页面检查器的样式选项卡更新样式，就像其他开发人员工具一样。
我确信，这个工具将改变我们诊断和修复 aspx 页面的方式，并将被开发人员广泛使用。
注意：Visual Studio 11 Beta 版已发布。它无需安装任何插件。VS 11 已预装页面检查器。
请分享您宝贵的反馈，如果我遗漏了什么，请告诉我。