告别第三方,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。

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

1 收藏 评论

关于作者:邢敏

前Web程序员,现攻图形学,专注点:图形和前端,主语言C/C++,副语言php,专注于用一种语言跨多平台。 个人主页 · 我的文章 · 11 ·       

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部