Visual Studio 引入新的网络诊断工具

Visual Studio 引入新的网络诊断工具，本文是 VS 官方的介绍文章。

上周的时候，我们宣布 Visual Studio 2015 RC 带来了一个全新的工具，来帮您诊断网络可用性问题，当建立跨 Windows 的 App，无论是 Windows Phone，还是给 HoloLens 或 Xbox 的应用。这个网络工具是已有的性能和诊断中心（Performance and Diagnostics hub）的一部分，下面的截图展现了其行为。

从历史上看，Web 开发人员惯于依赖浏览器自带的网络诊断工具，但由于一直缺乏集成到其开发工作流的工具，这让 App 开发者用起来愈加复杂。使用 Visual Studio 的全新网络工具，开发人员现在可以轻松地记录所有通过 WinRT HttpClient API 进行的 HTTP 网络操作的信息，包括 HTTP 请求和响应报头、请求和响应的有效载荷、cookies 以及详细的其他操作的计时信息。使用旧的 .NET HttpClient API 进行的操作则不被捕获。

这个工具怎么帮助您？它可以帮助您获得类似以下常见问题的答案：

• 身份验证相关问题 (如，为什么我的 App 访问不到资源?)

• 缓存相关的问题 （如，为什么我的 App 读取了旧版本的资源?)

• 有效载荷问题 （如，下载了多少字节？瓶颈在哪里?)

使用网络工具

若要访问网络工具，在 Visual Studio 2015 中打开上打开诊断工具（Diagnostics Tools）窗口，点击调试（Debug）菜单，选择开始无调试诊断工具（Start Diagnostic Tools without Debugging ）或按下 Alt + F2 。

在诊断页签，选择 Analysis Target（你的 startup project 是预先选好的分析目标，但你也可以选择已安装或运行中的App作为目标），然后选择 Network，点击 Start。另外，由于该工具是性能和诊断中心的一部分，你同时还可以选择额外的工具来进行一次联合会话。

一旦开始分析您的应用程序，这个网络工具将自动捕获 App 的 HTTP 网络流量，并在摘要视图中显示它。

摘要视图（summary view）

摘要视图是一个表，展示所有捕获 HTTP 操作的简化视图。（在新窗口查看大图）

摘要视图的各列分别是：

• Name/Path：被请求的资源的名称和 URL 路径

• Protocol：请求该资源时所使用的协议。例如：HTTP 或 HTTPS。

• Method：本次请求的所用 HTTP method。例如： GET、 POST、 PUT 等。

• Result/Description：服务器返回的 response 的状态码和文本消息。

• Content Type：服务器返回的 response 的 MIME 类型。

• Received：由服务器传递的 response 负载总大小。在这一点上，分块编码的响应都保留为空。

• Time：从最初发送请求，花了多长时间下载完资源，。

• 0ms：显示网络活动随着时间的推移发生的位置图。此图或瀑布视图，显示了何时请求的资源，何时完成下载。

为了提高您的生产力，我们已经作了以下几种设计选项，以便调试的重要细节更加醒目：

• 默认情况下，请求按时间顺序，但你可以通过单击不同的列的头，进行不同的排序。

• 完全是缓存服务的请求在收到列中被标记为”（from cache）”，这有效地提高所有缓存 response 的可视性。这可以帮助你了解，你是否正在有效地使用缓存，可能是为了节约用户带宽，或者你缓存了错误的响应，并给您 App 的最终用户提供过时的数据。

• 4xx 或 5xx 这样的错误在结果列显示时，带有一个红色的状态码，并摘要栏中高亮，提醒你注意这些潜在的问题，可能需要解决，这使得许多的潜在请求的问题易于被聚焦，并最终解决。

• 摘要栏中总结了有多少请求，总数据以及花了多少时间。

  
  

工具栏

当调试网络相关的问题时，有可能你需要与他人共享您的网络踪迹（trace），或将它们导入到Fiddler和其他第三方工具，来运行性能分析，甚至分享你调试的结果。对于这些情况下，我们添加了个导出按钮，允许您将捕获的网络流量导出为一个基于JSON的HAR格式。这样做使您能够利用很多现有的第三方工具， 对基于JSON的 HAR 格式进行调试或分析网络踪迹。

工具栏还允许您只查看捕获流量的部分内容（sub-set）。例如，如果您只对诊断中的图像相关调用问题感兴趣，可能是某图像未显示，可能是你没有得到最新版本的图像，打开”内容类型筛选器”，从可用的筛选器列表中选择图像，可以筛除不相关的所有内容。此功能通过允许您跳过几十个无关的网络调用，只关注图像有关，大大增加了你的生产力。

一旦应用了筛选器，在页面的底部的摘要条形图会更新以反映新的衡量标准。事实上，这一区域提供摘要视图中当前显示的捕获的网络流量的摘要。乍看来，它提供网络错误的信息 （4xx 或 5xx 状态码的 response 、可见请求的数目、多少response数据被传输以及要花多久下载之。当你试图衡量在某场景中有多少数据被耗尽，或是想知道下载某些资源可能需要多久，此功能会非常有用。

详细信息面板

若要获取request的详细信息，只要目光转到摘要视图，并单击任一request行。在这一点上，详细信息面板将被打开，并显示这个request的所有相关信息。

详细信息面板分为以下几节：

• Headers：提供 request 和 response 报头的可视性，以及摘要 request 和 response 中的重要部分，像 URL、 method 和状态码。

• Body：显示 request 和 response 的负载体，提供了”美化输出”内容的选项以使他们更易读。

• Parameters：分解查询字符串参数为更易读的格式。

• Cookie：显示的数据的请求和响应的 cookie。

• Timing：显示各时间段获得的资源。因为重定向会影响下载资源的时间。如果资源重定向或被重定向到不同的资源，这一区域也会调用超时。

回顾一下，在VS 2015你会得到一个新的网络工具，它将帮助您直接在VS IDE里调试大部分网络相关的问题，让你更有生产力。你现在能够调试JavaScript 的网络相关问题，同样可以用于Windows应用商店的App以及 Windows 10上的通用App。

原文出处：Ruben Rios （VS 项目经理）

译文出处：伯乐在线

译文链接：http://blog./86787/

---