超實(shí)用的Chrome DevTools調(diào)試技巧!
Chrome DevTools 提供了很多實(shí)用功能來(lái)調(diào)試源代碼、捕獲元素狀態(tài)、更新和測(cè)試元素屬性、模擬各種設(shè)備環(huán)境等。今天就來(lái)學(xué)習(xí)幾個(gè)超實(shí)用的調(diào)試技巧！
1. 選擇和檢查 DOM 元素
在 Chrome DevTools 的 Console 面板中，可以輸入一些帶 $ 的命令來(lái)選擇和檢查 DOM 元素。
$0 - $4 命令可以用來(lái)顯示在 Elements 面板中檢查的最后五個(gè) DOM 元素，$0 返回最近一次選擇的元素，$1 返回最近一次之前選擇的元素，以此類(lèi)推。
$(selector) 返回帶有指定的 CSS 選擇器的第一個(gè) DOM 元素的引用。這個(gè)命令就等同于 document.querySelector() 函數(shù)：
$$(selector) 返回與給定 CSS 選擇器匹配的元素?cái)?shù)組。這個(gè)命令等同于 document.querySelectorAll() 函數(shù)：
2. 復(fù)制數(shù)據(jù)
在日常開(kāi)發(fā)中，我們會(huì)使用 Chrome DevTools 來(lái)調(diào)試頁(yè)面，比如修改頁(yè)面的樣式、節(jié)點(diǎn)屬性等。其為我們提供了復(fù)制數(shù)據(jù)的功能，可以將修改后的內(nèi)容復(fù)制到源代碼中。
復(fù)制 CSS 樣式：
我們可以復(fù)制 CSS 規(guī)則或聲明，甚至可以將內(nèi)容復(fù)制為 JavaScript 鍵值對(duì)：
//?Copy?rule
element.style?{
????max-height:?90%;
????max-width:?90%;
}
//?Copy?all?decalarations?as?js
maxHeight:?'90%',
maxWidth:?'90%'
//?Copy?property
max-height
//?Copy?value
90%
復(fù)制 HTML 內(nèi)容，右鍵點(diǎn)擊要復(fù)制的元素 -> Copy，點(diǎn)擊要復(fù)制的內(nèi)容類(lèi)型即可：
復(fù)制請(qǐng)求數(shù)據(jù)：
3. 發(fā)送 XHR 請(qǐng)求
Chrome DevTools 支持重新發(fā)送 XHR 請(qǐng)求。在和后端進(jìn)行接口聯(lián)調(diào)時(shí)，如果想要重新發(fā)送請(qǐng)求，并且參數(shù)保持不變，可以直接右鍵點(diǎn)擊要重新發(fā)送的 XHR 請(qǐng)求，點(diǎn)擊 Replay XHR 即可重新發(fā)送該請(qǐng)求：
對(duì)于一個(gè)請(qǐng)求，有時(shí)需要修改請(qǐng)求參數(shù)并重新發(fā)送，可以直接在控制臺(tái)發(fā)送請(qǐng)求。只需要先右鍵點(diǎn)擊需要重新發(fā)送的 XHR 請(qǐng)求，選擇 Copy -> Copy as fetch：
在 Console 面板中粘貼已經(jīng)復(fù)制的請(qǐng)求內(nèi)容，修改所需參數(shù)，按下回車(chē)發(fā)送請(qǐng)求即可：
4. 顏色選擇器
Chrome DevTools 提供了一個(gè)顏色選擇器來(lái)設(shè)置背景顏色和文本顏色。顏色選擇器具有各種功能：顏色選擇器具有各種功能，例如
- 色調(diào)控制；
- 使用吸管從頁(yè)面元素中選擇顏色；
- 切換調(diào)色板；
- 可以在當(dāng)前顏色的 RGBA、HSLA 和十六進(jìn)制表示之間切換；
- 不透明度控制。
只需在元素樣式的顏色顯示塊上點(diǎn)擊即可彈出顏色選擇器：
可以使用吸管從頁(yè)面上直接吸取顏色：
5. 監(jiān)聽(tīng)事件
可以在 Chrome Devtools 的 Console 面板中輸入 monitorEvents() 來(lái)監(jiān)聽(tīng)指定目標(biāo)事件的信息。該方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是要監(jiān)聽(tīng)的對(duì)象。如果未提供第二個(gè)參數(shù)，所有事件都會(huì)返回。要指定要監(jiān)聽(tīng)的事件，傳遞一個(gè)字符串或字符串?dāng)?shù)組作為第二個(gè)參數(shù)。
例如，監(jiān)聽(tīng)頁(yè)面 body 上的點(diǎn)擊事件：
可以調(diào)用 unmonitorEvents() 方法來(lái)停止監(jiān)聽(tīng)事件，需要傳遞一個(gè)停止監(jiān)視對(duì)象的參數(shù)。例如，停止監(jiān)聽(tīng) body 對(duì)象上的事件：
6. 檢查未使用的 CSS
可以在 Coverage 面板中檢查頁(yè)面中沒(méi)有使用的 CSS 和 JavaScript 代碼，可以通過(guò)以下步驟來(lái)打開(kāi) Coverage 面板：
點(diǎn)擊刷新按鈕開(kāi)始重新加載頁(yè)面，以測(cè)試頁(yè)面的代碼覆蓋率：
檢查頁(yè)面的資源使用情況，點(diǎn)擊可以查看哪些代碼是沒(méi)有使用的，可以通過(guò)刪除那些未使用的代碼來(lái)最小化 CSS 文件的大?。?/p>
對(duì)于測(cè)試結(jié)果，可以進(jìn)行篩選、過(guò)濾、下載等操作。
7. 引用 HTML 元素
在 Chrome DevTools 的 Elements 面板中右鍵點(diǎn)擊要引用的 HTML 元素，選擇 Store as global variable 即可將其保存為一個(gè)變量，其變量名會(huì)在 Console 面板中打印出來(lái)：
8. 日志點(diǎn)
Logpoints （日志點(diǎn)）是一種向控制臺(tái)提供調(diào)試信息的方式，而無(wú)需使用 console.log()，這在線上應(yīng)用調(diào)試時(shí)會(huì)很有用?？梢酝ㄟ^(guò)右鍵單擊 DevTools 中的 Source 選項(xiàng)卡中的任何行并指定要記錄的表達(dá)式來(lái)添加新的 Logpoint。執(zhí)行該行時(shí)，就會(huì)在控制臺(tái)中獲得它的值。
使用該功能可以減少調(diào)試代碼，提高代碼的整潔性。并且，線上應(yīng)用也可以直接添加控制臺(tái)輸出。
9. 動(dòng)態(tài)表達(dá)式
實(shí)時(shí)表達(dá)式是一種在表達(dá)式更改時(shí)顯示其值的功能。這有助于追蹤代價(jià)高昂的表達(dá)式（如動(dòng)畫(huà)中使用的表達(dá)式）或變化很大的表達(dá)式（例如，如果正在遍歷數(shù)組）的問(wèn)題。它會(huì)將 Console 面板里的表達(dá)式置頂，并且能隨著用戶點(diǎn)擊的變化，而動(dòng)態(tài)刷新該置頂?shù)谋磉_(dá)式。
只需點(diǎn)擊下圖中眼睛圖標(biāo)，輸入一個(gè)想要置頂?shù)?JavaScript 表達(dá)式即可：
10. 調(diào)試動(dòng)畫(huà)
Chrome DevTools 提供了檢查和修改動(dòng)畫(huà)的功能。它可以幫助我們播放動(dòng)畫(huà)、修改動(dòng)畫(huà)時(shí)間并分析特定時(shí)間范圍內(nèi)的視圖。
只需在 More tools -> Animations中打開(kāi)動(dòng)畫(huà)面板進(jìn)行調(diào)試即可：
Animation Inspector (動(dòng)畫(huà)檢查器）分為四個(gè)主要部分：
- Controls (控件) ：從此處可以清除所有當(dāng)前捕獲的動(dòng)畫(huà)組，或更改當(dāng)前選定動(dòng)畫(huà)組的速度。
- Overview (概述) ：在此處選擇一個(gè)動(dòng)畫(huà)組以在詳細(xì)窗格中檢查和修改它。
- Timeline (時(shí)間軸) ：暫停并從此處開(kāi)始播放動(dòng)畫(huà)，或跳到動(dòng)畫(huà)中的特定點(diǎn)。
- Details (詳細(xì)) ：檢查并修改當(dāng)前選定的動(dòng)畫(huà)組。
往期干貨 ：
?26個(gè)經(jīng)典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費(fèi)）
?干貨~~~2021最新前端學(xué)習(xí)視頻~~速度領(lǐng)取
? 前端書(shū)籍-前端290本高清pdf電子書(shū)打包下載
點(diǎn)贊和在看就是最大的支持