[[341165]]

【51CTO.com快譯】如今，我們編寫的許多代碼都依賴Web。畢竟，如果您可以向HTTP添加自定義載荷，為什么要開發(fā)新協議?如果已經有一個可擴展、靈活又安全的層，無需在網絡堆棧中創(chuàng)建新的層。相反，我們可以充分利用HTTP中的GET和POST函數，并使用充分利用REST的API。

是的，這過于簡單，但實際上很少有場合需要全新的東西。HTTP是一種簡化，但也是一種混淆。如果我們使用的一切其底層都是HTTP，我們?yōu)楹螛嫿商幚砟切〢PI的測試和開發(fā)工具?

雖然Open API Initiative及其他方法對于規(guī)范如何描述和實現基于HTTP的API大有幫助，但我們通常把各種不同的工具拼湊起來以構建和測試API調用。Postman可能是最流行最熟悉的工具，但是它與我們的開發(fā)環(huán)境和瀏覽器分開來，因此很難確信我們在應用程序的上下文中設計和測試HTTP調用。

Edge開發(fā)工具的Chromium演變

微軟在新的Edge瀏覽器中改用Chromium使它有機會擴展其內置的開發(fā)工具，夯實其在Trident和EdgeHTML中開發(fā)工具的自身歷史以及在Chromium開源項目中所做的工作。這款瀏覽器穩(wěn)定版和開發(fā)版的每個版本都增添了新工具，這些新工具在F12控制臺中和試驗性標志后面。

該實驗性開發(fā)工具值得探究，因為它含有許多實用的工具，雖然還沒有達到生產級水平，但仍可以幫助您解決代碼中的重大問題。要開啟它們，使用F12啟動DevTools面板，然后在工具窗格或窗口的右上角點擊“設置”圖標。在“設置”屏幕中，選擇“試驗”，然后選擇想要使用的新功能。

最新的穩(wěn)定版Edge 85含有幾個試驗性新工具，包括迫切需要的CSS Grid調試器。然而，最有意思的新功能讓您可以在新的Network Console(網絡控制臺)中編輯和重放網絡事件。

結合使用Network Console和REST API

乍一看，這種方法可以記錄和分析HTTP請求，捕獲最近的活動，并深入分析常規(guī)HTTP響應代碼之外的服務器響應。如果您在處理REST API，并使用瀏覽器進行調試，就知道除了200 OK消息外，API還有很多其他意思，如果您通過REST代理或API代理來工作更是如此。知道為您的API充當門面的HTTP服務器在運行與知道API返回您期望的值不一樣。

Edge DevTools Network Console的真正優(yōu)點是，可以用它迅速試用HTTP API，無需編寫任何代碼。您可能用過Postman之類的工具做到這點，但它們不在瀏覽器中，最適合從頭開始開發(fā)和測試API。Network Console的工作原理類似，為您提供了快速試用API URL的機制。

構建和測試HTTP查詢

要測試API，從F12打開空白的Network Console，然后點擊“創(chuàng)建請求”以打開HTTP查詢構建器。您可以從常見的HTTP查詢指令中進行選擇，包括充分利用REST的API中所用的常見的POST和GET查詢。先使用常見的API資源管理器(比如微軟的Graph Explorer或Swagger Pet Store)，核查您在正確構建請求，而且您了解如何使用身份驗證令牌來處理受限制的API。

一旦完成了查詢，該工具會顯示狀態(tài)響應、查詢所花的時間以及響應大小。您可以下載響應JSON來測試解析器，也可以在控制臺中預覽。除了響應正文、所有標頭和cookie外，內置的JSON預覽還會解析響應并顯示鍵/值對。

本質上講，這是很簡單的工具，但常常正是您需要的?，F階段，最好將Edge DevTools Network Console視為一種快速的臨時測試工具。重放錄制網絡活動的功能與服務器端性能測試工具結合使用大有幫助。您可以將相同的流量發(fā)送到服務器，以便自動重現有問題的交互。

在控制臺中編輯調用的功能很有用，因為您可以從頁面內部內容捕獲API調用，然后將它們用作測試的基礎，并根據需要調整內容。安全工程師會發(fā)覺這種方法很方便。他們可以識別針對網站或服務的潛在攻擊，然后對異常的載荷進行試驗以探究故障模式。

未來需要什么?

為了使這樣的工具可以替代Postman，它確實需要更多功能，比如能夠導入Open API定義。Swagger格式的JSON是交換來自開放服務(比如Microsoft Graph)的API信息的標準方法。如果您可以將這些定義導入到Network Console中以選擇要測試的API(以及Open API自我文檔功能)，開發(fā)人員可以使用瀏覽器來瀏覽可用的API，并在將定義導入到開發(fā)環(huán)境之前對其進行嘗試。就目前而言，有某種形式的導入函數，但尚不清楚集合或環(huán)境的含義，不過兩者都無法適用于Open API JSON文件。

微軟在努力向新的Edge輕松過渡，推出了一系列高質量的穩(wěn)定版。很高興看到DevTools團隊使用它進行創(chuàng)新，并為開發(fā)人員提供一套簡便的瀏覽器內工具，可讓您深入了解代碼的運作方式。新的Network Console在此基礎上更進一步，可以處理您的API。

遺憾的是，該工具尚無法與面向Visual Studio Code的Edge Network插件配合使用，但是很容易看到將來的更新版如何支持您的本地API開發(fā)，幫助您無需離開編輯器就可以在本地系統(tǒng)上構建和測試REST API。有了Code的Electron基礎，微軟就比較容易添加這樣的瀏覽器工具，以一種迫切需要的、對開發(fā)人員友好的方式，打破編輯器和運行時環(huán)境之間的壁壘。

原文標題：Analyzing web application APIs using Edge DevTools，作者：Simon Bisson

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】