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。

打賞支援我翻譯更多好文章，謝謝！

打賞譯者