google Chrome是一款由Google公司開發的網頁瀏覽器，是程序員們開發前端的必備利器。掌握一定的Chrome調試方法可以快速排查和定位問題，大幅度提高開發效率。下面就由小編來介紹一下Chrome調試時會使用的功能。

1.了解面板

圖一 Chrome功能面板

Elements：元素面板

Console：控制臺面板

Source: 源代碼面板

Audits：審計面板

Network: 網絡面板

Performance: 性能面板

Memory: 內存面板

Application: 應用面板

Security：安全面板

Audits: 審計面板

2.常用面板具體使用技巧

2.1 Network面板

Network面板可以看到所有的資源請求，包括網絡請求，圖片資源，html，css，js文件等請求，可以根據需求篩選請求項，一般多用于網絡請求的查看和分析，分析后端接口是否正確傳輸，獲取的數據是否準確，請求頭，請求參數的查看。

圖二 Network面板基本功能介紹

圖三 Network模擬網絡延遲功能介紹

圖四 Network單個請求響應詳情查看

如圖四點擊單個URL請求，可以查看的請求的具體詳情信息，請求詳情中包含以下多個部分:

(1) Headers：用來查看具體的請求URL、請求頭及請求體的相關參數信息

(2) Response：查看服務端返回的數據信息

(3) Preview：Preview是將Response中的數據進行格式化輸出

(4) Timing：是對請求及相應時間的具體展示，其每個功能字段功能描述

圖五 Timing包含的字段功能描述

Queuing： 排隊的時間花費。可能由于該請求被渲染引擎認為是優先級比較低的資源（圖片）、服務器不可用、超過瀏覽器的并發請求的最大連接數（Chrome的最大并發連接數為6）；

Stalled： 從HTTP連接建?到請求能夠被發出送出去(真正傳輸數據)之間的時間花費。包含用于處理代理的時間，如果有已經建立好的連接，這個時間還包括等待已建立連接被復用的時間；

Request sent： 發起請求的時間；

Waiting： (Time to first byte (TTFB)) 是最初的網絡請求被發起到從服務器接收到第一個字節這段時間，它包含了TCP連接時間，發送HTTP請求時間和獲得響應消息第一個字節的時間。

Content Download： 獲取Response響應數據的時間花費。

(5) Cookies

圖六 Cookie包含的字段功能描述

Name：cookie的名稱

Value：cookie的值

Domain: cookie所屬的域名

Path: cookie所屬的URL

Expires: cookie存活的時間

Size: cookie的字節大小

HttpOnly: 表示cookie只能被瀏覽器設置,JS不能修改

Secure: 表示cookie只能在安全連接上傳輸

2.2 Source面板

Source面板的主要功能是斷點調試，在js代碼中寫debugger會自動斷點到該位置。

圖七 斷點調試面板

在該面板的監視變量上側有繼續運行、單步跳過等按鈕，可以在當前斷點后，逐行運行代碼，或者直接讓其繼續運行，具體如下:

圖八 斷點的相關操作按鈕

2.3 Elements面板

Elements面板是查看頁面元素的面板,頁面上使用的元素、元素樣式、元素綁定的事件及元素綁定的屬性都可以查看。

（1）Style

CSS的預處理器，直接更改CSS樣式在界面中可以直觀的看到效果。點擊具體位置之后，可以跳轉到屬性文件具體位置。

圖九 Style功能介紹

（2）Event Listeners

查看元素監聽的事件，在開發中，尤其是維護其他人的代碼時，會出現不了解元素對應的監聽事件，這個時候，可以在這個面中找到。這個不僅能看到對應的事件函數，還可以定位該函數所在的JS文件以及在該文件中的具體位置（行數）。

圖十 Event Listeners功能介紹

（2）Properties

查看元素具有的屬性與方法，比去查看API文檔與源碼更方便直觀,新版本的谷歌瀏覽器可以在console面板執行console.dir($0)實現相同的功能

圖十一 通過console實現Properties功能介紹

2.4 Console面板

console是瀏覽器開發者工具自帶的API，通過該面板可以實現代碼日志輸出、JS的調式、網頁中報錯信息查看等，其常用的功能如下：

圖十二 Console功能面板介紹

以上就是小編日常Chrom使用技巧的總結，如果喜歡不要忘了關注、點贊、轉發哦！