在做web服務的時候，使用谷歌瀏覽器開發工具除錯監聽前端程式碼、監聽介面請求、分析請求響應結果是必不可少的。

一、如何開啟谷歌開發工具

• 方式一：通過F12開啟
• 方式二：右鍵頁面，點選檢查開啟，如下圖

二、開發工具介紹

如圖所示，常用的四個模組。

• Elements：主要用來檢視前面介面的html的Dom結構和修改css的樣式。css可以即時修改，即時顯示。

• Console：這個除了檢視錯誤資訊、列印除錯資訊(console.log())、寫一些測試指令碼以外，還可以檢視Javascript API。例如我想檢視console都有哪些方法和屬性，我可以直接在Console中輸入"console"並執行~

• Sources：主要用來除錯js和檢視原始碼

• Network：常用來監聽介面，抓包分析等

二、Network面板介紹

如圖所示，Chrome的Network面板主要由5個部分組成，包括控制器、過濾器、概覽、請求列表、概要。

• 控制器：控制面板的外觀與功能
• 過濾器：過濾請求列表中顯示的資源
• 概覽：顯示HTTP請求、響應的時間軸。
• 請求列表：預設時間排序，可選擇顯示列。
• 概要：請求總數、總資料量、總花費時間等。

1、控制器

按照從左到右的順序來介紹：

• 記錄按鈕 處於開啟狀態時會在此面板進行網路連線的資訊記錄，關閉後則不會記錄。

• 清除按鈕 清除當前的網路連線記錄資訊。

• 顯示或者隱藏Filter面板。
• 保留或者清除之前的請求日誌，跳轉頁面的時候勾選上，可以看到跳轉前的請求，也可適用於chrome開發者工具抓包的問題

• 關閉或者開啟快取資訊，關閉後可以達到即改即顯效果，不受快取的影響。

• 限流控制，可以不同的網路進行模擬請求。還可以自定義網路速度。

2、過濾器

如何對請求進行過濾呢？

（1）按字串過濾

鍵入png到過濾文字框。僅顯示包含文字的檔案png。在這種情況下，與過濾器匹配的唯一檔案是PNG影象。

（2）根據正則表示式過濾

比如型別/.*\.[cj]s+$/。過濾掉檔名不以aj或c後跟1個或多個s字元結尾檔案。

（3）按型別

• XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other
• 按時間過濾：概覽面板，拖動滾動條
• Hide data URLs：CSS圖片等小檔案以 BASE64 格式嵌入HTML中，以減少HTTP請求數。

（4）屬性過濾

• domain:僅顯示來自指定域的資源。您可以使用萬用字元字元（*）納入多個域
• has-response-header：顯示包含指定HTTP響應標頭的資源
• is：使用 is:running 可以查詢 WebSocket 資源，is:from-cache 可查詢快取讀出的資源
• Larget-than：顯示大於指定大小的資源（以位元組為單位）。將值設為1000等同於設定為1k
• method：顯示通過指定 HTTP 方法型別檢索的資源
• mime-type：顯示指定 MIME 型別的資源
• mixed-content：顯示所有混合內容資源（mixed-content:all）,或者僅顯示當前顯示的資源（mixed-content:displayed）
• scheme：顯示通過未保護HTTP（scheme:http）或受保護 HTTPS（scheme:https）檢索的資源。
• set-cookie-domain：顯示具有 Set-Cookie 標頭並且 Domain 屬性與指定值匹配的資源。
• set-cookie-name：顯示具有 Set-Cookie 標頭並且名稱與指定值匹配的資源。
• set-cookie-value：顯示具有 Set-Cookie 標頭並且值與指定值匹配的資源。
• status-code：僅顯示 HTTP 狀態程式碼與指定程式碼匹配的資源。

多屬性間通過空格實現 AND 操作。

3、請求列表

簡單介紹下每列的含義：

• Name：資源的名稱
• Status：HTTP狀態程式碼
• Type：請求的資源的MIME型別
• Initiator：發起請求的物件或程序。它可能有以下幾種值：
  • 　　Parser（解析器）：Chrome的 HTML 解析器發起了請求（滑鼠懸停顯示JS指令碼）
  • 　　Redirect（重定向）：HTTP重定向啟動了請求
  • 　　Script（指令碼）：指令碼啟動了請求
  • 　　Other（其他）：一些其他程序或動作發起請求，例如使用者點選連結跳轉到頁面或在位址列中輸入網址。
• Size：伺服器返回的響應大小（包括頭部和包體），可顯示解壓後大小
• Time：總持續時間，從請求的開始到接受響應中的最後一個位元組
• Waterfall：各請求相關活動的直觀分析圖

我們還可以自定義新增其他列：滑鼠右鍵單擊，新增其他列

4、預覽請求內容

如圖所示，在請求列表點選以下

功能包括：

• 檢視頭部，包括請求頭、響應頭。
• 檢視Cookie
• 預覽響應正文：檢視影象用
• 檢視響應正文
• 時間詳細分佈
• 匯出資料為HAR格式
• 檢視未壓縮的資源大小：Use Large Request Rows
• 瀏覽器載入時間（概覽、概要、請求列表）DOMContentLoaded 事件的顏色設定為藍色，而load事件設定為紅色
• 將請求資料複製到剪貼簿
  • Copy Link Address：將請求的網址複製到剪貼簿
  • Copy Response：將響應包體複製到剪貼簿
  • Copy as cURL：以 cURL 命令形式複製請求
  • Copy All as cURL：以一系列 cURL 命令形式複製所有請求
  • Copy All as HAR：以 HAR 資料形式複製所有請求
• 檢視請求上下游：按住 shift 鍵懸停請求上，綠色是上游，紅色是下游。

5、請求時間詳細分佈

點選請求列表後，找到Timing，看到如圖所示的欄位

• Queueing：瀏覽器在以下情況下對請求排隊
  • 　　存在更高優先順序的請求
  • 　　此源已開啟六個 TCP 連線，達到限值，僅適用於 HTTP/1.0 和 HTTP/1.1
  • 　　瀏覽器正在短暫分配磁碟快取中的空間
• Stalled：請求可能會因 Queueing 中描述的任何原因而停止
• DNS Lookup：瀏覽器正在解析請求額IP地址
• Proxy Negotiation：瀏覽器正在與代理伺服器協商請求
• Request sent：正在傳送請求
• ServiceWorker Preparation：瀏覽器正在啟動Service Worker
• Request to ServiceWorker：正在將請求傳送到Service Worker
• Waiting（TTFB）：瀏覽器正在等待響應的第一個位元組。TTFB表示Time To First Byte（至第一位元組的時間）。此時間包括1次往返延遲時間及伺服器準備響應所用的時間
• Content Download：瀏覽器正在接收響應
• Receiving Push：瀏覽器正在通過 HTTP/2 伺服器推送接收此響應的資料
• Reading Push：瀏覽器正在讀取之前收到的本地資料

6、阻止請求

當某些資源不可用時，頁面的外觀和行為如何？它完全失敗了，還是仍然有些功能？阻止要求查詢：

(1)按Control+ Shift+P 開啟命令選單。

(2)鍵入block，選擇“顯示請求阻止”，然後按Enter。

（3）單擊新增模式，新增型別main.css。

（4）單擊新增。重新載入頁面。正如預期的那樣，頁面的樣式有點混亂，因為它的主樣式表已被阻止。請注意main.css網路日誌中的行。紅色文字表示資源已被阻止。main.css已被封鎖

（5）取消選中啟用請求阻止複選框。