介绍Visual Studio 网络工具相关知识

[原文发表地址]:Introducing Visual Studio’s Network tool

[原文发表时间]:May 4, 2015

上周我们公布了Visual Studio 2015 RC的可用性,它包含了一个新的工具。在你构建Windows Phone, Hololens和Xbox平台下 的Windows应用程序时,这个工具可以帮助你诊断网络相关的问题。 这个新的网络工具是已有的性能和诊断中心的一部分。下面的截图展示的是它在运行中的状态。

Performance and Diagnostics Hub

从历史上来看,网络开发者过去一直依赖浏览器内置的网络诊断工具,但是这对于应用程序开发者来说这已经变成了更复杂的负担,因为缺乏集成到他们开发工作流中的工具。但是伴随着Visual Studio新工具的出现,开发者可以轻松地记录那些通过 WinRT HttpClient API的所有Http网络操作, 这些API包括Http请求和响应头,请求和响应有效负载,cookies和在一些其他东西之中的详细时间信息。那些通过使用旧的 .Net HttpClientAPI的操作将不再被捕获。

这个工具有何帮助?它可以帮助回答像下面这些常见的问题:

  • 认证相关的问题(例如:为什么我的应用程序无法获取一个资源)
  • 缓存的相关问题(例如:为什么我的应用程序正在获取一个老版本的资源)
  • 有效负载问题(例如:多少字节被下载了?瓶颈在哪里?)

使用这个网络工具

为了进入这个网络工具,在Visual Studio 2015中打开诊断工具窗口,在调试菜单中选择不在调试状态下启动诊断工具(或者按下 Alt+F2)

Using the Network Tool - Menu

在诊断页面,选择分析目标(你的启动工程会被预选为分析目标,但是你能用一个已经安装或者正在运行的程序取代这个目标),然后选择网络并按下开始, 另外,因为这个工具是性能和诊断中心的一部分,你也可以选择附加工具去运行一个组合的会话。

Using the Network Tool - Configuration

一旦你开始分析你的应用程序,这个网络工具将会自动捕获你应用程序的Http网络流量并将它显示在一个概要视图里。

概要视图

这个概要视图是一个类似于界面的表格,它向你呈现了所有被捕获Http操作的简化视图。

Summary View

为你展示概要视图的每一列:

  • 名字 –正在被请求资源的名称和URL
  • 协议 请求这个资源时使用的协议。例如:Http或者Https
  • 方法 – 请求时使用的Http方法。例如:GET,POST,PUT等
  • 结果 – 从服务器端返回的响应状态码和文本信息。
  •  内容类型 –从服务器端返回响应的MIME类型
  • 接收-服务端交付的响应有效负载的总大小。此时,分块编码响应为空。
  • 时间 – 请求最初被发送到资源开始下载所需要的时间。
  • 时序面板 – 用图形来展示网络活动在哪里出现超时。这个图形或者说瀑布视图,向你展示何时请求一个资源以及它什么时候完成下载。

为了提高你的生产效率,我们已经制作了以下的设计选项以便能更容易的去观察重要的调试细节:

l 默认情况下,请求是按发生时间排序的,但是通过点击列名,它们也可以按不同的方式排序。

l 在接受列中,完全来自缓存的服务请求被标记为“(来自缓存)”,这将有效地提高所有缓存响应的可见性。 这可以帮助你弄清楚如果你正在有效地利用缓存,也许是节约用户带宽,或者甚至是你正在通过错误信息和提供你应用程序的超时数据给你的终端用户来缓存响应。

l 就像在总结栏里被高亮显示一样,4xx或者5xx这样的错误以一个红色状态码的形式显示在结果列里,将你的关注指引到这些潜在需要解决的问题 – 这使得发现那些包含在你应用程序潜在请求的问题变得容易并最终解决它们。

l 关于有多少请求,数据总数以及它显示在总结栏里需要花费多长时间的信息

Summary View showing Requests Served from Cache and Errors in Results column

工具栏

当调试网络相关问题时,你可能要和其他人分享你的网络跟踪信息或者将它们导入到Fiddler和其他第三方工具以便运行一个性能分析,又或者是分享你在调试时发现的问题。对于那些方案,我们添加了一个导入按钮以便将你所捕获的网络流量添加到一个基于HAR格式的JSON文件中。这么做是为了允许你去影响那些大多数已存在的第三方工具,这些工具靠消耗基于HAR格式的JSON文件来调试或者分析网络跟踪信息。

Toolbar - Save

这个工具也允许你展示你所捕获网络流量子集的信息。例如,如果你只对图片相关调用的诊断信息感兴趣,也许一个图片没有显示或者也许你没有得到这个图片的最新版本,你可以通过打开“内容类型过滤器”来过滤掉不相关的问题并且通过可用过滤器列表选择图片。这个功能将使你的应用程序更加富有成效 ,因为它允许你跳过许多与网络调用无关的步骤并且只关注图片相关的东西。

Toolbar - Content Type Filter

一旦一个过滤器被使用,页面底部的总结栏将会被更新以便反映新的指标。事实上,这个区域提供了一个用来显示当前被捕获网络流量的总结视图。一眼看过去,它提供了关于网络错误的信息(4xx或5xx的应答状态码),可访问请求的数目,响应数据传输的花销以及下载它们需要多长时间。当你试着去测量在一个特定的方案下消费了多少数据量或者是下载一定的资源需要花费多长时间,这个功能都是特别有帮助的。

Toolbar - Summary Bar at bottom of Toolbar

详细信息面板

为了获取一个请求的详细信息,前往总结视图并且点击请求行。那时,详细信息面板将会弹出并且所有和那个请求有关的信息都会被公开。

Details Panel

详细信息面板被分为以下几个部分:

  • 表头 - 提供关于请求和应答的可访问性以及总结这些请求和应答的重要方面。比如URL,方法和状态码。
  • 主体-显示请求和响应的负载主体以及为”格式打印”内容提供选项并且使它们易读。
  • 参数 - 将请求的字符串形式的参数分解为易读的格式
  • Cookie- 显示请求和应答的cookies数据
  • 时序 显示包含在获取的各个资源时序级。由于重定向影响包含在下载资源中的时序。如果一个资源被重定向自或者重定向到一个不同的资源,那么这个区域也会被唤起。

回顾上面讲的,在Visual Studio 2015中你将会获取到一个新的网络工具来帮助你变得更富有成效。 通过Visual Studio IDE直接调试你所遇到的大部分的网络相关的问题。 你现在能够调试JavaScript相关的网络问题,管理像Windows应用商店和以Windows 10为目标市场的本地应用程序。

在接下来发表的博客里,我们将会涉及到如何使用这个网络工具去解决在你开发应用时的潜在问题。与此同时,请通过在下面评论或者发邮件让我们知道你的一些想法。