在 Visual Studio 2012 中使用 Page Inspector

作者： Web Camp 团队

在此动手实验室中，你将发现一个新的工具，用于查找和修复 Visual Studio 中的网页问题 - 页面检查器。

页面检查器是一个新工具，用于将浏览器诊断工具引入 Visual Studio，并在浏览器、ASP.NET 和源代码之间提供集成体验。 它直接在 Visual Studio IDE 中呈现网页（HTML、Web 窗体、ASP.NET MVC 或网页），并允许检查源代码和生成的输出。 通过页面检查器，可以轻松分解网站，从头开始快速生成页面，并快速诊断问题。

如今，我们有许多 Web 框架能够及时创建灵活且可缩放的网站，例如 ASP.NET MVC 和 WebForms。 另一方面，很难在页面上找到问题，因为 IDE 不支持基于模板的页面和动态内容的设计器视图。 因此，这些网站必须在浏览器中打开，以查看它们向用户显示的方式。

Web 开发人员使用外部工具查找在浏览器中定期运行的问题。 然后，它们返回到 IDE 并开始修复。 IDE 中的这种来回活动、浏览器和分析工具可能效率低下，有时每次想要重现问题时都需要新的部署和缓存清理。

页面检查器通过在客户端（浏览器工具）和服务器（ASP.NET 和源代码）之间实现 Web 开发差距，通过使用组合的功能集将两个世界的最佳组合在一起。

使用页面检查器，可以看到源文件（包括服务器端代码）中的哪些元素生成了要呈现在浏览器中的 HTML 标记。 通过页面检查器，还可以修改 CSS 属性和 DOM 元素属性，以查看在浏览器中立即反映的更改。

此动手实验室将引导你完成页面检查器功能，并演示如何使用它们来修复 Web 应用程序中的问题。 此实验室包含两个使用类似流但面向不同技术的练习。 如果你是 ASP.NET MVC 开发人员，请按照练习一操作;如果你是 WebForms 开发人员，请遵循练习 2。

本实验室将指导你完成以前通过对源文件夹中提供的示例 Web 应用程序应用进行次要更改来介绍的增强功能和新功能。

目标

在本动手实验中，你将了解如何：

• 使用页面检查器分解网站
• 使用页面检查器检查和预览 CSS 样式更改
• 使用页面检查器检测和修复网页中的问题

先决条件

必须具有以下项才能完成此实验室：

• Microsoft Visual Studio Express 2012 for Web 或高级版（请阅读 附录 A ，了解如何安装它）。
• Internet Explorer 9 或更高版本

练习

本动手实验包括以下练习：

1. 练习 1：在 ASP.NET MVC 项目中使用页面检查器
2. 练习 2：在 WebForms 项目中使用页面检查器

估计完成此实验室的时间： 30 分钟。

练习 1：在 ASP.NET MVC 项目中使用页面检查器

在本练习中，你将了解如何使用页面检查器预览和调试 ASP.NET MVC 4 解决方案。 首先，你将围绕该工具执行简短的圈子，了解有助于 Web 调试过程的功能。 然后，你将在包含样式问题的网页中工作。 你将了解如何使用页面检查器查找生成问题的源代码并修复该问题。

任务 1 - 浏览页面检查器

在此任务中，你将了解如何在显示照片库的 ASP.NET MVC 4 项目的上下文中使用页面检查器。

1. 打开位于 Source/Ex1-MVC4/Begin/ 文件夹的 Begin 解决方案。

   1. 在继续之前，需要下载一些缺少的 NuGet 包。 为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。

   2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。

   3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。

      注意

      使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。 借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。 因此，在从此实验室打开现有解决方案后，必须运行这些步骤。

2. 在解决方案资源管理器中，在 /Views/Home 项目文件夹下找到 Index.cshtml 视图，右键单击它并选择“在页面检查器中查看”。

   

   选择要在页面检查器中预览的文件

3. “页面检查器”窗口将显示映射到所选源视图的 /Home/Index URL。

   

   与页面检查器的第一个联系人

   页面检查器工具已集成到 Visual Studio 环境中。 检查器包含嵌入式浏览器以及功能强大的 HTML 探查器。 请注意，无需运行解决方案来查看页面的外观。

   注意

   当页面检查器浏览器的宽度小于打开的页面的宽度时，将不会正确看到页面。 如果发生这种情况，请调整页面检查器的宽度。

4. 单击“页面检查器”中的“文件”选项卡。

   你将看到正在撰写索引页的所有源文件。 此功能有助于一目了然地识别所有元素，尤其是在使用部分视图和模板时。 请注意，如果单击链接，还可以打开每个文件。

   

   “文件”选项卡

5. 单击选项卡左侧的“切换检查模式”按钮。

   此工具将允许你选择页面的任何元素，并查看其 HTML 和 Razor 代码。

   

   切换检查模式按钮

6. 在页面检查器浏览器中，将鼠标指针移到页面元素上。 将鼠标指针移到呈现页面的任何部分时，将显示元素类型，并在 Visual Studio 编辑器中突出显示相应的源代码标记或代码。

   

   操作中的检查模式

   注意

   不要最大化页面检查器窗口，否则将无法看到显示源代码的预览选项卡。 如果在最大化页面检查器时单击该元素，则会显示所选内容的源代码，但它将隐藏页面检查器窗口。

   如果注意 Index.cshtml 文件，将注意到生成所选元素的源代码部分突出显示。 此功能有助于编辑长源文件，从而提供访问代码的直接和快速方法。

   

   检查元素

7. 单击“切换检查模式”按钮（）以禁用光标。

8. 选择 HTML 选项卡以显示在页面检查器浏览器中呈现的 HTML 代码。

9. 在 HTML 标记中，找到带有 Koala 链接的列表项并选择它。

   请注意，选择代码时，浏览器中会自动突出显示相应的输出。 此功能可用于查看 HTML 块在页面上的呈现方式。

   

   在页面中选择 HTML 元素

10. 单击“切换检查模式”按钮以启用检查模式，然后单击导航栏。 在 HTML 代码右侧的“样式”窗格中，你将看到一个列表，其中包含应用于所选元素的 CSS 样式。

    注意

    由于页眉是网站布局的一部分，因此页面检查器还将打开 _Layout.cshtml 文件并突出显示受影响的代码段。

    

    发现所选元素的样式和源文件

11. 启用切换检查指针后，将鼠标指针移到蓝色特色栏下方，然后单击半圆。

    

    选择元素

12. 在“样式”窗格中，找到 .main-content 组中的背景图像项。 取消选中背景图像并查看发生的情况。 你会注意到，浏览器将立即反映更改，并且圆圈处于隐藏状态。

    注意

    在“页面检查器样式”选项卡上应用的更改不会影响原始样式表。 可以根据需要取消选中样式或更改其值，但在刷新页面后会还原它们。

    

    启用和禁用 CSS 样式

13. 现在，使用检查模式单击标题上的“你的徽标”文本。

14. 在“样式”选项卡中，找到 .site-title 组下的字号 CSS 属性。 双击属性值，将 2.3 em 值 替换为 3 em，然后按 Enter。 请注意，游戏看起来更大。

    

    更改页面检查器中的 CSS 值

15. 单击位于页面检查器的右窗格中的“跟踪样式”选项卡。 这是查看应用于所选内容的所有样式（按属性名称排序）的替代方法。

    

    所选元素的 CSS 样式跟踪

16. 页面检查器的另一个功能是“布局”窗格。 使用检查模式，选择导航栏，然后单击右窗格中的 “布局 ”选项卡。 你将看到所选元素的确切大小及其偏移量、边距、填充和边框大小。 请注意，还可以修改此视图中的值。

    

    页面检查器中的元素布局

任务 2 - 在照片库中查找和修复样式问题

如何诊断早期版本的 Visual Studio 网页问题？ 你可能熟悉在 Visual Studio IDE 外部运行的 Web 调试工具，例如 Internet Explorer 开发人员工具或 Firebug。 浏览器仅了解 HTML、脚本和样式，而基础框架生成将呈现的 HTML。 因此，通常需要部署整个网站，以查看网页的外观。

想要检测并修复网站中的问题时，可能已执行以下步骤：

1. 从 Visual Studio 运行解决方案，或在 Web 服务器上部署页面。
2. 在浏览器中，打开你使用的开发人员工具，或只是打开源代码和样式，并尝试匹配问题。 若要查找涉及的文件，可以使用样式类名称的“搜索”或“在文件中搜索”功能。
3. 检测到错误后，停止 Web 浏览器和服务器。
4. 清除浏览器缓存。
5. 返回到 Visual Studio 以应用修补程序。 重复所有要测试的步骤。

由于 ASP.NET MVC 4 中没有真正的 WYSIWYG，因此在运行或部署 Web 应用程序后，后续阶段会检测到大多数样式问题。 现在，使用页面检查器，无需运行解决方案即可预览任何页面。

在此任务中，你将使用页面检查器并修复照片库应用程序的一些问题。

1. 使用页面检查器，找到 页眉左侧的“注册 ”和 “登录” 链接。

   请注意，链接不会显示在右侧的预期位置，并且它们显示为项目符号列表。 现在，你将将链接与右侧对齐，并相应地对其重排。

   

   查找“注册”和“登录”链接

2. 选中“切换检查模式”后，单击“注册”链接以打开其代码，但未打开。

   请注意，链接的源代码位于 _LoginPartial.cshtml 文件中，而不是 Index.cshtml 和 _Layout.cshtml，这是你可能首先查看的位置。 你已直接放置在正确的源文件中。

3. 在“样式”选项卡中，找到并单击 <#login 项部分>，这是这些链接的 HTML 容器。

   请注意， 单击后，#login 样式将自动位于 Site.css 中。 此外，现在突出显示了代码。

   

   选择 CSS 样式

4. 通过删除开始和结束字符并保存Site.css文件，取消注释突出显示的代码中的文本对齐属性。

   页面检查器知道构成当前页的所有不同文件，并且可以检测其中任何一个文件发生更改时。 每当浏览器中的当前页未与源文件同步时，它会发出警报。

5. 在页面检查器浏览器中，单击地址栏下方的栏以重新加载页面。

   

   重新加载页面

   链接现在位于右侧，但它们仍然看起来像项目符号列表。 现在，你将删除项目符号并水平对齐链接。

   

   已更新页面

6. 使用检查模式，选择包含“注册”和“登录”链接的任何 <li> 项。 然后，单击 <> #login 项部分以访问Styles.css代码。

   

   查找样式

7. 在Style.css中，取消注释 #login li 项的代码。 要添加的样式将隐藏项目符号并水平显示项目。

   

   对登录链接进行 Restyling

8. 保存 Style.css 文件，并在地址下方的栏上单击一次以重新加载页面。 请注意，链接正确显示。

   

   与右侧对齐的链接

9. 最后，将更改标题标题。 使用检查模式单击 此处 的徽标文本并获取生成它的源代码。

10. 现在，你位于 _Layout.cshtml 中，请将“你的徽标”文本替换为“照片库”。 保存并更新页面检查器浏览器。

    

    分配新标题

    

    照片库页面已更新

11. 最后，选择 PhotoGallery 项目，然后按 F5 运行应用。 检查所有更改是否按预期工作。

练习 2：在 WebForms 项目中使用页面检查器

在本练习中，你将了解如何使用页面检查器预览和调试 WebForms 解决方案。 首先在工具周围执行简短的圈子，了解有助于 Web 调试过程的页面检查器功能。 然后，你将在包含样式问题的网页中工作。 你将了解如何使用页面检查器查找生成问题的源代码并修复该问题。

任务 1 - 浏览页面检查器

在此任务中，你将了解如何在显示照片库的 WebForms 项目的上下文中使用页面检查器功能。

1. 打开位于 Source/Ex2-WebForms/Begin/ 文件夹的 Begin 解决方案。

   1. 在继续之前，需要下载一些缺少的 NuGet 包。 为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。

   2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。

   3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。

      注意

      使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。 借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。 因此，在从此实验室打开现有解决方案后，必须运行这些步骤。

2. 在解决方案资源管理器中，找到Default.aspx页，右键单击它并选择“在页面检查器中查看”。

   

   使用页面检查器打开Default.aspx

3. “页面检查器”窗口将显示Default.aspx。

   

   在页面检查器中查看Default.aspx

   页面检查器工具已集成到 Visual Studio 环境中。 检查器包含嵌入式浏览器，以及一个强大的 HTML 探查器，用于显示所选代码。 请注意，无需运行解决方案来查看页面的外观。

   注意

   当页面检查器浏览器的宽度小于打开的页面的宽度时，将不会正确看到页面。 如果发生这种情况，请调整页面检查器的宽度。

4. 单击“页面检查器”中的“文件”选项卡。

   你将看到构成呈现的默认页面的所有源文件。 这是一项有用的功能，可一目了然地识别所有元素，尤其是在使用用户控件和母版页时。 请注意，还可以导航到每个文件。

   

   “文件”选项卡

5. 单击选项卡左侧的“切换检查模式”按钮。

   此工具将允许你选择页面的任何元素，并查看其 HTML 代码和.aspx源。

   

   切换检查模式按钮

6. 在页面检查器浏览器中，将鼠标移到页面元素上。 将鼠标指针移到呈现页面的任何部分时，将显示元素类型，并在 Visual Studio 编辑器中突出显示相应的源代码标记或代码。

   

   操作中的检查模式

   注意

   不要最大化页面检查器窗口，否则将无法看到显示源代码的预览选项卡。 如果在最大化页面检查器时单击该元素，则会显示所选内容的源代码，但它将隐藏页面检查器窗口。

   如果注意 Default.aspx 文件，你会注意到生成所选元素的源代码部分突出显示。 此功能有助于长源文件的版本，提供直接和快速的方式来访问代码。

   

   检查元素

7. 单击“切换检查模式”按钮（位于“页面检查器”选项卡中）以禁用光标。

8. 选择 HTML 选项卡以显示在页面检查器浏览器中呈现的 HTML 代码。

9. 在 HTML 代码中，找到带有 Koala 链接的列表项并选择它。

   请注意，选择代码时，会自动突出显示相应的输出浏览器。 此功能可用于查看 HTML 块在页面上的呈现方式。

   

   在页面中选择 HTML 元素

10. 单击“切换检查模式”按钮以启用检查模式，然后单击导航栏。 在 HTML 代码右侧的“样式”窗格中，你将看到一个列表，其中包含应用于所选元素的 CSS 样式。

    注意

    由于页眉是网站布局的一部分，因此页面检查器还将打开 Site.Master 文件并突出显示受影响的代码段。

    

    发现所选元素的样式和源文件

11. 启用切换检查指针后，将鼠标指针移到菜单栏下方，然后单击空白半圆。

    

    选择元素

12. 在“样式”窗格中，找到 .main-content 组中的背景图像项。 取消选中背景图像并查看发生的情况。 你会注意到，浏览器将立即反映更改，并且圆圈处于隐藏状态。

    注意

    在“页面检查器样式”选项卡上应用的更改不会影响原始样式表。 可以根据需要取消选中样式或更改其值，但在刷新页面后会还原它们。

    

    启用和禁用 CSS 样式

13. 现在，使用检查模式单击标题上的“你的徽标”文本。

14. 在“样式”选项卡中，找到 .site-title 组下的字号 CSS 属性。 双击该属性一次以编辑其值。 将 2.3em 值替换为 3em，然后按 Enter。 请注意，游戏看起来更大。

    

    更改页面检查器中的 CSS 值

15. 单击位于页面检查器的右窗格中的“跟踪样式”选项卡。 这是查看应用于所选内容的所有样式（按属性名称排序）的替代方法。

    

    所选元素的 CSS 样式跟踪

16. 页面检查器的另一个功能是“布局”窗格。 使用检查模式，选择导航栏，然后单击右窗格中的 “布局 ”选项卡。 你将看到所选元素的确切大小及其偏移量、边距、填充和边框大小。 请注意，还可以修改此视图中的值。

    

    页面检查器中的元素布局

任务 2 - 在照片库中查找和修复样式问题

如何诊断早期版本的 Visual Studio 网页问题？ 你可能熟悉在 Visual Studio IDE 外部运行的 Web 调试工具，例如 Internet Explorer 开发人员工具或 Firebug。 浏览器仅了解 HTML、脚本和样式，而基础框架生成将呈现的 HTML。 因此，通常需要部署整个网站，以查看网页的外观。

想要检测并修复网站中的问题时，可能已执行以下步骤：

1. 从 Visual Studio 运行解决方案，或在 Web 服务器上部署页面。
2. 在浏览器中，打开你使用的开发人员工具，或只是打开源代码和样式，并尝试匹配问题。 若要查找涉及的文件，你已使用样式类名称的“搜索”或“在文件中搜索”功能。
3. 检测到错误后，停止 Web 浏览器和服务器。
4. 清除浏览器缓存。
5. 返回到 Visual Studio 以应用修补程序。 重复所有要测试的步骤。

由于 ASP.NET WebForms 中没有真正的 WYSIWYG，因此在运行或部署后，在后面的阶段检测到某些样式问题。 现在，使用页面检查器，无需运行解决方案即可预览任何页面。

在此任务中，你将使用页面检查器修复照片库应用程序的一些问题。 在以下步骤中，你将检测并快速修复标头中的一些简单样式问题。

1. 使用页面检查，找到 页眉左侧的“注册 ”和 “登录 ”链接。

   请注意，链接未显示在右侧的预期位置。 现在，将链接与右侧对齐，并相应地调整链接。

   

   位于左侧的登录链接

2. 选中“切换检查模式”后，选择“登录”链接以打开其代码。

   请注意，链接源代码位于 Site.Master 文件中，而不是位于Default.aspx页中，这是你可能首先查找的位置;你已直接放置在正确的源文件中。

3. 在“样式”选项卡中，找到并单击 <#login 项部分>，这是这些链接的 HTML 容器。

   请注意， 单击后，#login 样式将自动位于 Site.css 中。 此外，现在突出显示了代码。

   

   选择 CSS 样式

4. 通过删除开始和结束字符并保存Site.css文件，取消注释突出显示的代码中的文本对齐属性。

   页面检查器知道构成当前页的所有不同文件，并且可以检测其中任何一个文件发生更改时。 每当浏览器中的当前页未与源文件同步时，它会发出警报。

5. 在页面检查器浏览器中，单击地址栏下方的栏以保存更改并重新加载页面。

   

   重新加载页面

   链接现在位于右侧，但它们仍然看起来像项目符号列表。 现在，你将删除项目符号并水平对齐链接。

   

   已更新页面

6. 使用检查模式，选择包含“注册”和“登录”链接的任何 <li> 项。 然后，单击 <> #login 项部分以访问Styles.css代码。

   

   查找样式

7. 在Style.css中，取消注释 #login li 项的代码。 要添加的样式将隐藏项目符号并水平显示项目。

   

   对登录链接进行 Restyling

8. 保存 Style.css 文件，并在地址下方的栏上单击一次以重新加载页面。 请注意，链接正确显示。

   

   与右侧对齐的链接

9. 最后，将更改标题标题。 不要在所有文件中搜索“你的徽标” 文本，而是使用检查模式单击文本并获取生成它的源代码。

   

   查找网站标题

10. 现在，你位于 Site.Master 中，请将“此处的徽标”文本替换为“照片库”。 保存并更新页面检查器浏览器。

    

    照片库页面已更新

11. 最后按 F5 运行应用，签出所有更改按预期工作。

总结

通过完成此动手实验室，你已了解如何使用页面检查器预览 Web 应用程序，而无需在浏览器中重新生成和运行网站。 此外，你还学习了如何直接从呈现的输出访问源代码来快速查找和修复 bug。

附录 A：安装 Visual Studio Express 2012 for Web

可以使用 Microsoft Web 平台安装程序 安装 Microsoft Visual Studio Express 2012 for Web 或其他“Express”版本。 以下说明指导你完成使用 Microsoft Web 平台安装程序 安装 Visual Studio Express 2012 for Web 所需的步骤。

1. 转到 [https://go.microsoft.com/?linkid=9810169]（https://go.microsoft.com/?linkid=9810169）。 或者，如果已安装 Web 平台安装程序，可以打开它并搜索产品“Visual Studio Express 2012 for Web with Windows Azure SDK”。

2. 单击“立即安装”。 如果没有 Web 平台安装程序 ，将重定向以先下载并安装它。

3. Web 平台安装程序打开后，单击“安装”以启动安装程序。

   

   安装 Visual Studio Express

4. 阅读所有产品的许可证和条款，然后单击“我接受”继续。

   

   接受许可条款

5. 等待下载和安装过程完成。

   

   安装进度

6. 安装完成后，单击“ 完成”。

   

   安装已完成

7. 单击“退出”关闭 Web 平台安装程序。

8. 若要打开 Visual Studio Express for Web，请转到“开始”屏幕并开始编写“VS Express”，然后单击 VS Express for Web 磁贴。

   

   VS Express for Web 磁贴