1.3 常用的調(diào)試工具

【提出問題】

有沒有可以幫助我們分析HTTP請(qǐng)求和響應(yīng)的實(shí)用工具？

【知識(shí)儲(chǔ)備】

1.3.1 Fiddler抓包工具

Fiddler是一款免費(fèi)的HTTP數(shù)據(jù)包抓取軟件。它的特點(diǎn)是靈活、功能強(qiáng)大，支持眾多的HTTP調(diào)試任務(wù)，是Web應(yīng)用、移動(dòng)應(yīng)用開發(fā)的調(diào)試?yán)鳌＿@款軟件可以記錄所有客戶端和服務(wù)器之間的HTTP請(qǐng)求，具有監(jiān)視、設(shè)置斷點(diǎn)、修改輸入/輸出數(shù)據(jù)等功能。Fiddler工具能夠幫助開發(fā)者或測(cè)試人員進(jìn)一步了解HTTP，其他相同類型的工具有HttpWatch、Firebug、Wireshark等。

Fiddler的工作原理如圖1-10所示，它是以代理Web服務(wù)器的形式工作的，使用的代理地址為127.0.0.1，端口為8888。對(duì)于客戶端來說，F(xiàn)iddler代理扮演的是服務(wù)器的角色，可以接收HTTP請(qǐng)求，返回HTTP響應(yīng)。對(duì)于Web服務(wù)器來說，F(xiàn)iddler扮演的是客戶端的角色，可以發(fā)出請(qǐng)求和接收響應(yīng)。當(dāng)正常關(guān)閉Fiddler時(shí)，它會(huì)自動(dòng)注銷，是不會(huì)影響其他程序正常運(yùn)行的。如果Fiddler非正常退出，這時(shí)因?yàn)镕iddler沒有自動(dòng)注銷，會(huì)產(chǎn)生網(wǎng)頁無法訪問的問題，這可以通過重新啟動(dòng)Fiddler的方式來解決。

安裝Fiddler之后就可以進(jìn)行抓包了。在Fiddler打開的狀態(tài)下，當(dāng)我們通過瀏覽器訪問網(wǎng)頁時(shí)，可以在Fiddler的工作界面內(nèi)看到所有抓包內(nèi)容，如圖1-11所示。其中，左側(cè)區(qū)域是抓取到的數(shù)據(jù)包列表，右側(cè)區(qū)域通過多個(gè)標(biāo)簽頁的形式顯示各種類型的信息，其中最常用的標(biāo)簽頁是lnspectors，單擊數(shù)據(jù)包列表中的任意一行可以查看抓取到的請(qǐng)求和響應(yīng)的詳細(xì)內(nèi)容。

左側(cè)區(qū)域的數(shù)據(jù)包列表包含若干個(gè)字段，如圖1-12所示，要分析數(shù)據(jù)包首先需要了解這些字段的含義。

（1）#:HTTP請(qǐng)求的順序，從1開始，按照頁面加載請(qǐng)求的順序遞增。

（2）Result:HTTP響應(yīng)的狀態(tài)，即HTTP響應(yīng)報(bào)文中的狀態(tài)碼。

（3）Protocol：請(qǐng)求使用的協(xié)議（如HTTP/HTTPS）。

（4）HOST：請(qǐng)求地址的域名/lP。

（5）URL：請(qǐng)求的服務(wù)器路徑和文件名，也包含GET參數(shù)。

（6）BODY：請(qǐng)求的大小，以byte為單位。

（7）Caching：請(qǐng)求的緩存過期時(shí)間或緩存控制header的值。

（8）Content-Type：請(qǐng)求響應(yīng)的類型。

（9）Process：發(fā)出此請(qǐng)求的Windows進(jìn)程及進(jìn)程lD。

（10）Comments：用戶通過腳本或者菜單給此Session增加的備注。

（11）Custom：用戶可以通過腳本設(shè)置的自定義值。

右側(cè)的面板除了lnspectors標(biāo)簽頁外，主要有Statistics（統(tǒng)計(jì)）頁、AutoResponder（自動(dòng)響應(yīng)）頁、Composer（構(gòu)建）頁、Log（日志）頁、Filters（過濾）頁、Timeline（時(shí)間軸）頁等。其中Filters頁如圖1-13所示，過濾器可以對(duì)左側(cè)的數(shù)據(jù)包列表進(jìn)行過濾，我們可以標(biāo)記、修改或隱藏具有某些特征的數(shù)據(jù)包。

Fiddler 軟件中的AutoResponder（自動(dòng)響應(yīng)）頁非常實(shí)用，AutoResponder 允許用戶攔截指定規(guī)則的請(qǐng)求，并返回本地資源或Fiddler資源，從而代替服務(wù)器響應(yīng)。這個(gè)功能在開放調(diào)試中是很有用的。例如，在前端開發(fā)中，如果發(fā)現(xiàn)服務(wù)器上某個(gè)樣式或動(dòng)作腳本文件有問題，直接修改會(huì)影響生產(chǎn)環(huán)境的穩(wěn)定。利用Fiddler的AutoResponder功能，可以將需要修改的文件重定向到本地文件上，這樣就可以基于生產(chǎn)環(huán)境進(jìn)行修改并驗(yàn)證，確認(rèn)后再發(fā)布。再比如服務(wù)器端提供了接口和數(shù)據(jù)格式給前端調(diào)用，可能由于某些原因，接口還未開發(fā)完畢，或者返回?cái)?shù)據(jù)有異常，為了不影響開發(fā)進(jìn)度，前端仍然可以繼續(xù)調(diào)用這個(gè)接口，然后通過Fiddler將請(qǐng)求轉(zhuǎn)向本地的數(shù)據(jù)文件。

1.3.2 Chrome開發(fā)者工具

在谷歌瀏覽器 Chrome 中使用功能鍵［F12］可以打開開發(fā)者工具，它是為前端開發(fā)者提供的用來調(diào)試和分析前端應(yīng)用的工具。開發(fā)者工具的功能模塊包括元素（Elements）檢視器、移動(dòng)終端模擬、控制臺(tái)（Console）、資源查看器、網(wǎng)絡(luò)、源代碼（Sources）、性能分析、內(nèi)存使用情況分析、前端應(yīng)用、安全、審計(jì)。

Chrome開發(fā)者工具最常用的4個(gè)功能模塊是元素檢視器、控制臺(tái)、源代碼、網(wǎng)絡(luò)。

（1）元素檢視器：用戶查看或修改HTML元素的屬性、CSS屬性、監(jiān)聽事件、斷點(diǎn)等。CSS可以即時(shí)修改、即時(shí)顯示，方便開發(fā)者調(diào)試頁面。如圖1-14所示，單擊開發(fā)者工具中左上角的箭頭圖標(biāo)（或按快捷鍵【Ctrl】+【Shift】+【C】）進(jìn)入選擇元素模式，然后從頁面中選擇需要查看的元素，可以在開發(fā)者工具元素（Elements）一欄中定位到該元素源代碼的具體位置。定位到元素的源代碼之后，可以從源代碼中讀出該元素的屬性。

（2）控制臺(tái)：一般用于執(zhí)行一次性代碼，查看JavaScript對(duì)象、調(diào)試日志信息或異常信息，如圖1-15所示；它還可以當(dāng)作JavaScript APl使用，例如要查看Console有哪些方法和屬性，可以直接在Console中輸入“console”并執(zhí)行。

（3）源代碼：用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，如圖1-16所示。此外，最重要的是，它還可以調(diào)試JavaScript源代碼、為JavaScript代碼添加斷點(diǎn)。

（4）網(wǎng)絡(luò)：該模塊主要用于查看Headers等與網(wǎng)絡(luò)連接相關(guān)的信息，如圖1-17所示。

其中，位于面板左上角的3個(gè)按鈕較常用，它們的功能如下。

①記錄按鈕：該按鈕處于打開狀態(tài)時(shí)會(huì)在此面板進(jìn)行網(wǎng)絡(luò)連接的信息記錄，該按鈕處于關(guān)閉狀態(tài)則不會(huì)記錄。

②清除按鈕：清除當(dāng)前的網(wǎng)絡(luò)連接記錄信息。

③過濾器：能夠自定義篩選條件，找到想要的資源信息，如圖1-18所示。

1.3.3 Postman工具

Postman是一款用于發(fā)送HTTP請(qǐng)求的工具，其主要功能為：創(chuàng)建+測(cè)試。它可以創(chuàng)建和發(fā)送任何HTTP請(qǐng)求，請(qǐng)求可以保存到歷史中以備再次執(zhí)行。

Postman的界面分為左、右兩部分，如圖 1-19 所示。左邊是側(cè)邊欄，這里可以記錄歷史（History）請(qǐng)求，還可以根據(jù)項(xiàng)目需求將若干請(qǐng)求組裝起來進(jìn)行測(cè)試。右邊是核心工作區(qū)，這里是創(chuàng)建請(qǐng)求的地方，上半部分可以編輯請(qǐng)求參數(shù)，主要分為4個(gè)部分：URL、請(qǐng)求方法、請(qǐng)求頭、請(qǐng)求體；下半部分可以顯示響應(yīng)結(jié)果，包括響應(yīng)狀態(tài)碼、響應(yīng)體。

【應(yīng)用案例】——使用postman工具發(fā)送GET請(qǐng)求

任務(wù)目標(biāo)

（1）登錄Postman，創(chuàng)建一個(gè)測(cè)試集MyTest。

（2）在瀏覽器中輸入網(wǎng)址https://cnodejs.org，進(jìn)入CNode網(wǎng)站查閱網(wǎng)站提供的應(yīng)用程序接口（APl）。

（3）在測(cè)試集 MyTest 中創(chuàng)建一個(gè)請(qǐng)求Req01，使用 GET 請(qǐng)求方式，查看地址https:// cnode js.org/api/vl/topics的響應(yīng)結(jié)果。

（4）根據(jù)CNode網(wǎng)站提供的應(yīng)用程序接口，在請(qǐng)求中添加參數(shù)。

實(shí)現(xiàn)步驟

第一步：Postman工具準(zhǔn)備。

打開Postman軟件，分別單擊右上角的“Create Account”和“Sign in”按鈕，注冊(cè)并登錄賬號(hào)，然后創(chuàng)建一個(gè)工作空間，再創(chuàng)建一個(gè)測(cè)試集，如圖1-20所示。

第二步：請(qǐng)求測(cè)試的數(shù)據(jù)準(zhǔn)備。

使用瀏覽器打開網(wǎng)頁https://cnodejs.org/，這是一個(gè)Node.js專業(yè)中文社區(qū)。單擊網(wǎng)站頂部的 APl 菜單項(xiàng)可以查看該網(wǎng)站提供的應(yīng)用程序接口，以便讀者完成請(qǐng)求、響應(yīng)測(cè)試，如圖1-21所示。

第三步：發(fā)送一個(gè)GET請(qǐng)求。

在測(cè)試集MyTest中創(chuàng)建一個(gè)請(qǐng)求，通過右鍵快捷菜單Rename修改請(qǐng)求的名稱為Req01。單擊請(qǐng)求Req01，可以在右側(cè)工作區(qū)的上半部分編輯請(qǐng)求信息。請(qǐng)求方法保持默認(rèn)選項(xiàng)GET，在地址欄中輸入上一步中查到的https://cnodejs.org/api/v1/topics，單擊“Send”按鈕，可以在下半部分看到網(wǎng)站的響應(yīng)內(nèi)容，如圖1-22所示。

第四步：為請(qǐng)求設(shè)置參數(shù)。

請(qǐng)求參數(shù)是采用鍵/值對(duì)的形式來編輯的，可以根據(jù)網(wǎng)站提供的應(yīng)用程序接口的說明來進(jìn)行設(shè)置。根據(jù)任務(wù)要求可以設(shè)置如下請(qǐng)求參數(shù)。

（1）KEY:page,VALUE:1，表示查看第1頁的主題。

（2）KEY:tab,VALUE:ask，表示查看問答板塊主題。

（3）KEY:limit,VALUE:2，表示顯示2個(gè)主題。

在設(shè)置參數(shù)的同時(shí)，地址欄會(huì)隨輸入的參數(shù)實(shí)時(shí)更新，最終形成一條完整的請(qǐng)求連接。完成參數(shù)設(shè)置后，單擊“Send”按鈕，響應(yīng)區(qū)會(huì)按照參數(shù)要求重新返回響應(yīng)，如圖1-23所示。

進(jìn)入CNode技術(shù)社區(qū)問答板塊，查看Postman中得到的響應(yīng)結(jié)果與網(wǎng)站內(nèi)容是否一致，如圖1-24所示。

【梳理回顧】

本節(jié)介紹了3款常用的HTTP工具——Fiddler、Chrome開發(fā)者工具和Postman，引導(dǎo)讀者利用這些工具輔助Web開發(fā)。