C# MVC 自学笔记—10 在 ASP.NET MVC 中使用页面检查器

Visual Studio 2012 年页督察是与集成的浏览器的 web 开发工具。中集成浏览器中，选择任意元素，页面检查器立即突出显示该元素的源代码和 CSS。可以浏览任何 MVC 视图、 快速查找呈现标记的来源和使用右内的 Visual Studio 环境浏览器工具。
观看视频

本教程演示如何启用检查模式，然后快速地找到并编辑您的 web 项目内的标记和 CSS。本教程使用的 MVC 项目，但您还可以使用页面检查为Web 窗体和其他 ASP.NET 应用程序。

本教程包含以下部分：

系统必备组件

创建一个 Web 应用程序

使用页面检查到浏览到一个视图

启用检测模式

使用页面检查器来更改标记

检查模式和 HTML 窗口

在样式窗口中预览 CSS 更改

CSS 自动同步

使用 CSS 颜色选择器

动态页面元素映射到 JavaScript

系统必备组件

• Visual Studio 2012或Visual Studio 表示 2012 年为 Web.

若要获取最新版本的页面检查器，请使用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 项目对话框中，选择互联网应用程序。保留Razor作为默认的视图引擎。

在源视图中打开应用程序。

现在，你有应用程序与工作，您可以使用页面检查器检查并修改它。

使用页面检查到浏览到一个视图

在 Visual Studio 2012 年，您可以右键单击您的项目中的任何视图中，选择页面检查器中的视图，和页面检查器将找出路线，显示的页面。

在解决方案资源管理器中，依次展开视图文件夹和主页文件夹。右键单击 Index.cshtml 文件，然后选择视图页面检查器中.

默认情况下，在左侧的 Visual Studio 环境作为窗口停靠页面检查器。如果您愿意，您可以将它停靠在其他地方，或取消停靠窗口。看看如何： 排列和停靠窗口.

页面检查器窗口的顶部窗格中显示当前页面在浏览器窗口中。底部窗格中显示的页面中的 HTML 标记，您可以检查页的不同方面的某些选项卡和。底部窗格是类似于F12 开发人员工具在互联网浏览器中。

在本教程中，您将使用HTML和样式选项卡来快速定位和对应用程序进行更改。

启用检查模式

要放入检查模式页面检查器，请单击检查按钮。在检测模式下，当您将鼠标指针悬停在所呈现的页的任何部分的相应源标记或代码被强调。

现在将鼠标移到页面检查器内页面的不同部分。做时，鼠标指针变为一个大的加号和突出显示在下面的元素：

将鼠标指针移动时，Visual Studio 突出显示源文件中的相应 Razor 语法。如果 HTML 元素来自另一个源代码文件，Visual Studio 将自动打开该文件。

页检查器中，在HTML选项卡显示从 Razor 语法生成的 html 代码。当您移动鼠标指针，将突出显示的 HTML 元素。样式选项卡显示为元素的 CSS 规则。

使用页面检查器来更改标记

页检查器让您查找其位置可能不是很明显的标记。然后你可以修改标记并查看由此导致的变化。

要查看此，单击检查，然后滚动到页面底部的页面检查器窗口中。

当您将鼠标指针移动到页脚区域时，页面检查器打开 _Layout.cshtml 文件并突出显示所选布局页面的部分。正如您所看到的在页脚都在布局文件中，并不是本身的视图中定义。

现在将鼠标指针移到带有版权的行的通知。在 _Layout.cshtml 页中，突出显示相应的行。

将一些文本添加到 _Layout.cshtml 文件中的行的末尾。

<p>&copy;@DateTime。Now.Year-我的 ASP.NET MVC 应用程序岩!< /p>

现在，按 Ctrl + Alt + enter 键或单击更新栏以查看页面检查器的浏览器窗口中的结果。

你可能会认为页脚定义的 Index.cshtml，但它原来是在 _Layout.cshtml 和页面检查器为您找到它。

检查模式和 HTML 窗口

下一步，你将会有快速看看 HTML 窗口和如何将元素映射为你。

单击检查把页面检查器在检查模式。

单击表示的页的顶端部分"您的徽标在这里"。你现正研究更多的细节，所以你将鼠标指针移动的浏览器窗口中显示的不再变化中的特定元素。

现在将鼠标指针移动到HTML窗口中。当您移动鼠标指针，页面检查器概述了HTML窗口内的元素，并突出显示浏览器窗口中的相应元素。

之前，页面检查器的 _Layout.cshtml 文件为您打开临时选项卡中的 _Layout.cshtml 临时选项卡，单击，相应的标记将会突出显示的<标头>节中为您的内容：

在样式窗口中预览 CSS 更改

下一步，您将使用页面检查器样式窗口预览对 CSS 的更改。

单击检查把页面检查器在检查模式。

在页面检查器浏览器窗口，将鼠标指针移到"主页"节直到出现div.content 包装标签。

一次，在div.content 包装节内单击，然后将鼠标指针移动到样式窗口。风格窗口显示所有的此元素的 CSS 规则。向下滚动找到.featured.content-包装类选择器。现在清除背景颜色属性的复选框。

请注意如何更改即时预览网页检查器的浏览器窗口。

再次选择该复选框，然后双击该属性值并将其更改为红色。更改立即显示：

样式窗口容易地测试和预览 CSS 更改之前将更改提交到该样式表本身。

CSS 自动同步

此功能需要页面检查器 1.3 的版。

CSS 自动同步功能允许您直接编辑 CSS 文件，并查看立即在页面检查浏览器中的更改。

单击检查把页面检查器在检查模式。

在页检查浏览器中，将鼠标指针移到"主页"节直到出现div.content 包装标签。单击一次可选择此元素。

风格窗口显示所有的此元素的 CSS 规则。向下滚动找到.featured.content-包装类选择器。单击".featured.content-包装"。页检查器将打开定义这种风格 (Site.css)，并突出显示相应的 CSS 样式的 CSS 文件。

现在更改为background-color的值为"红色"。更改将立即出现在页检查浏览器中。

使用 CSS 颜色选择器

Visual Studio 2012 中的 CSS 编辑器具有便于选择和插入颜色的拾色器。拾色器包括一个标准的调色板的颜色、 支持标准颜色的名称、 哈希代码、 RGB、 RGBA、 HSL 和高强度低合金的颜色，并保持您最近使用过的文档中的颜色列表。

在前一节中，您更改了background-color属性的值。若要调用拾色器，请将插入点放后的属性名称和类型#或rgb （.

单击一种颜色来选择它，或按向下箭头键，然后使用左、 右箭头键遍历颜色。当您访问一个颜色时，预览相应的十六进制值：

如果颜色栏没有你想要的精确颜色，你可以使用颜色选取器 pop 向。要打开它，请单击颜色栏的右端的双燕尾型或一次或两次按键盘上的向下箭头。

单击一种颜色从右侧的垂直栏。这在主窗口中显示了那种颜色的渐变。直接从垂直栏选择一种颜色，按 enter 键，或单击主窗口具有更高的精度选择中的任意点。

如果您想要使用的电脑屏幕上有一种颜色 （它不一定是在 Visual Studio 用户界面内），您可以通过使用吸管工具右下方捕获它的值。

您还可以更改颜色的不透明度通过移动滑块底部的拾色器。这样的更改颜色值为 RGBA 值，因为 RGBA 格式可以表示不透明度。

您已选择一种颜色后，按 enter 键，，然后键入一个分号来完成的Site.css文件中的背景色条目。

页检查器更新栏

页检查器立即检测到Site.css文件的更改和更新栏中显示一条警报。

若要保存所有文件并刷新浏览器，页面检查器，请按 Ctrl + Alt + Enter 或单击更新栏。在突出显示的颜色更改出现在浏览器中。

动态页面元素映射到 JavaScript

在现代的 web 应用程序中，页面中的元素往往动态生成与 JavaScript。这意味着没有静态标记 （HTML 或剃刀） 对应于这些页面元素。

与版本 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 将打开代码文件，并突出显示相应的脚本。