Google Chrome是一款由Google公司開(kāi)發(fā)的網(wǎng)頁(yè)瀏覽器，是程序員們開(kāi)發(fā)前端的必備利器,。掌握一定的Chrome調(diào)試方法可以快速排查和定位問(wèn)題,，大幅度提高開(kāi)發(fā)效率。下面就由小編來(lái)介紹一下Chrome調(diào)試時(shí)會(huì)使用的功能,。

1.了解面板

圖一 Chrome功能面板

Elements：元素面板

Console：控制臺(tái)面板

Source: 源代碼面板

Audits：審計(jì)面板

Network: 網(wǎng)絡(luò)面板

Performance: 性能面板

Memory: 內(nèi)存面板

Application: 應(yīng)用面板

Security：安全面板

Audits: 審計(jì)面板

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

2.1 Network面板

Network面板可以看到所有的資源請(qǐng)求,，包括網(wǎng)絡(luò)請(qǐng)求，圖片資源,，html,，css，js文件等請(qǐng)求,，可以根據(jù)需求篩選請(qǐng)求項(xiàng),，一般多用于網(wǎng)絡(luò)請(qǐng)求的查看和分析，分析后端接口是否正確傳輸,，獲取的數(shù)據(jù)是否準(zhǔn)確,，請(qǐng)求頭，請(qǐng)求參數(shù)的查看,。

圖二 Network面板基本功能介紹

圖三 Network模擬網(wǎng)絡(luò)延遲功能介紹

圖四 Network單個(gè)請(qǐng)求響應(yīng)詳情查看

如圖四點(diǎn)擊單個(gè)URL請(qǐng)求,，可以查看的請(qǐng)求的具體詳情信息，請(qǐng)求詳情中包含以下多個(gè)部分:

(1) Headers：用來(lái)查看具體的請(qǐng)求URL,、請(qǐng)求頭及請(qǐng)求體的相關(guān)參數(shù)信息

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

(3) Preview：Preview是將Response中的數(shù)據(jù)進(jìn)行格式化輸出

(4) Timing：是對(duì)請(qǐng)求及相應(yīng)時(shí)間的具體展示,，其每個(gè)功能字段功能描述

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

Queuing： 排隊(duì)的時(shí)間花費(fèi)?？赡苡捎谠撜?qǐng)求被渲染引擎認(rèn)為是優(yōu)先級(jí)比較低的資源（圖片）,、服務(wù)器不可用,、超過(guò)瀏覽器的并發(fā)請(qǐng)求的最大連接數(shù)（Chrome的最大并發(fā)連接數(shù)為6）；

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

Request sent： 發(fā)起請(qǐng)求的時(shí)間；

Waiting： (Time to first byte (TTFB)) 是最初的網(wǎng)絡(luò)請(qǐng)求被發(fā)起到從服務(wù)器接收到第一個(gè)字節(jié)這段時(shí)間,，它包含了TCP連接時(shí)間,，發(fā)送HTTP請(qǐng)求時(shí)間和獲得響應(yīng)消息第一個(gè)字節(jié)的時(shí)間。

Content Download： 獲取Response響應(yīng)數(shù)據(jù)的時(shí)間花費(fèi),。

(5) Cookies

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

Name：cookie的名稱

Value：cookie的值

Domain: cookie所屬的域名

Path: cookie所屬的URL

Expires: cookie存活的時(shí)間

Size: cookie的字節(jié)大小

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

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

2.2 Source面板

Source面板的主要功能是斷點(diǎn)調(diào)試,，在js代碼中寫(xiě)debugger會(huì)自動(dòng)斷點(diǎn)到該位置。

圖七 斷點(diǎn)調(diào)試面板

在該面板的監(jiān)視變量上側(cè)有繼續(xù)運(yùn)行,、單步跳過(guò)等按鈕,，可以在當(dāng)前斷點(diǎn)后，逐行運(yùn)行代碼,，或者直接讓其繼續(xù)運(yùn)行,，具體如下:

圖八 斷點(diǎn)的相關(guān)操作按鈕

2.3 Elements面板

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

（1）Style

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

圖九 Style功能介紹

（2）Event Listeners

查看元素監(jiān)聽(tīng)的事件,，在開(kāi)發(fā)中,，尤其是維護(hù)其他人的代碼時(shí)，會(huì)出現(xiàn)不了解元素對(duì)應(yīng)的監(jiān)聽(tīng)事件,，這個(gè)時(shí)候,，可以在這個(gè)面中找到。這個(gè)不僅能看到對(duì)應(yīng)的事件函數(shù),，還可以定位該函數(shù)所在的JS文件以及在該文件中的具體位置（行數(shù)）,。

圖十 Event Listeners功能介紹

（2）Properties

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

圖十一 通過(guò)console實(shí)現(xiàn)Properties功能介紹

2.4 Console面板

console是瀏覽器開(kāi)發(fā)者工具自帶的API,，通過(guò)該面板可以實(shí)現(xiàn)代碼日志輸出,、JS的調(diào)式、網(wǎng)頁(yè)中報(bào)錯(cuò)信息查看等,，其常用的功能如下：

圖十二 Console功能面板介紹

以上就是小編日常Chrom使用技巧的總結(jié),，如果喜歡不要忘了關(guān)注,、點(diǎn)贊、轉(zhuǎn)發(fā)哦,！