大家好，我是 CUGGZ。

Chrome DevTools 提供了很多實(shí)用功能來調(diào)試源代碼、捕獲元素狀態(tài)、更新和測試元素屬性、模擬各種設(shè)備環(huán)境等。今天就來學(xué)習(xí)幾個(gè)超實(shí)用的調(diào)試技巧！

1、選擇和檢查 DOM 元素

在 Chrome DevTools 的 Console 面板中，可以輸入一些帶 $ 的命令來選擇和檢查 DOM 元素。

$0? - $4? 命令可以用來顯示在 Elements 面板中檢查的最后五個(gè) DOM 元素，$0? 返回最近一次選擇的元素，$1 返回最近一次之前選擇的元素，以此類推。

$(selector)? 返回帶有指定的 CSS 選擇器的第一個(gè) DOM 元素的引用。這個(gè)命令就等同于 document.querySelector() 函數(shù)：

$$(selector)? 返回與給定 CSS 選擇器匹配的元素?cái)?shù)組。這個(gè)命令等同于 document.querySelectorAll() 函數(shù)：

2、復(fù)制數(shù)據(jù)

在日常開發(fā)中，我們會(huì)使用 Chrome DevTools 來調(diào)試頁面，比如修改頁面的樣式、節(jié)點(diǎn)屬性等。其為我們提供了復(fù)制數(shù)據(jù)的功能，可以將修改后的內(nèi)容復(fù)制到源代碼中。

復(fù)制 CSS 樣式：

我們可以復(fù)制 CSS 規(guī)則或聲明，甚至可以將內(nèi)容復(fù)制為 JavaScript 鍵值對：

// 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)容類型即可：

復(fù)制請求數(shù)據(jù)：

3、發(fā)送 XHR 請求

Chrome DevTools 支持重新發(fā)送 XHR 請求。在和后端進(jìn)行接口聯(lián)調(diào)時(shí)，如果想要重新發(fā)送請求，并且參數(shù)保持不變，可以直接右鍵點(diǎn)擊要重新發(fā)送的 XHR 請求，點(diǎn)擊 Replay XHR 即可重新發(fā)送該請求：

對于一個(gè)請求，有時(shí)需要修改請求參數(shù)并重新發(fā)送，可以直接在控制臺(tái)發(fā)送請求。只需要先右鍵點(diǎn)擊需要重新發(fā)送的 XHR 請求，選擇 Copy -> Copy as fetch：

在 Console 面板中粘貼已經(jīng)復(fù)制的請求內(nèi)容，修改所需參數(shù)，按下回車發(fā)送請求即可：

4、顏色選擇器

Chrome DevTools 提供了一個(gè)顏色選擇器來設(shè)置背景顏色和文本顏色。顏色選擇器具有各種功能：顏色選擇器具有各種功能，例如

• 色調(diào)控制。
• 使用吸管從頁面元素中選擇顏色。
• 切換調(diào)色板。
• 可以在當(dāng)前顏色的 RGBA、HSLA 和十六進(jìn)制表示之間切換。
• 不透明度控制。

只需在元素樣式的顏色顯示塊上點(diǎn)擊即可彈出顏色選擇器：

可以使用吸管從頁面上直接吸取顏色：

5、監(jiān)聽事件

可以在 Chrome Devtools 的 Console 面板中輸入 monitorEvents() 來監(jiān)聽指定目標(biāo)事件的信息。該方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是要監(jiān)聽的對象。如果未提供第二個(gè)參數(shù)，所有事件都會(huì)返回。要指定要監(jiān)聽的事件，傳遞一個(gè)字符串或字符串?dāng)?shù)組作為第二個(gè)參數(shù)。

例如，監(jiān)聽頁面 body 上的點(diǎn)擊事件：

可以調(diào)用 unmonitorEvents() 方法來停止監(jiān)聽事件，需要傳遞一個(gè)停止監(jiān)視對象的參數(shù)。例如，停止監(jiān)聽 body 對象上的事件：

6、檢查未使用的 CSS

可以在 Coverage 面板中檢查頁面中沒有使用的 CSS 和 JavaScript 代碼，可以通過以下步驟來打開 Coverage 面板：

點(diǎn)擊刷新按鈕開始重新加載頁面，以測試頁面的代碼覆蓋率：

檢查頁面的資源使用情況，點(diǎn)擊可以查看哪些代碼是沒有使用的，可以通過刪除那些未使用的代碼來最小化 CSS 文件的大小：

對于測試結(jié)果，可以進(jìn)行篩選、過濾、下載等操作。

7、引用 HTML 元素

在 Chrome DevTools 的 Elements 面板中右鍵點(diǎn)擊要引用的 HTML 元素，選擇 Store as global variable 即可將其保存為一個(gè)變量，其變量名會(huì)在 Console 面板中打印出來：

8、日志點(diǎn)

Logpoints （日志點(diǎn)）是一種向控制臺(tái)提供調(diào)試信息的方式，而無需使用 console.log()，這在線上應(yīng)用調(diào)試時(shí)會(huì)很有用?？梢酝ㄟ^右鍵單擊 DevTools 中的 Source 選項(xiàng)卡中的任何行并指定要記錄的表達(dá)式來添加新的 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)畫中使用的表達(dá)式）或變化很大的表達(dá)式（例如，如果正在遍歷數(shù)組）的問題。它會(huì)將 Console 面板里的表達(dá)式置頂，并且能隨著用戶點(diǎn)擊的變化，而動(dòng)態(tài)刷新該置頂?shù)谋磉_(dá)式。

只需點(diǎn)擊下圖中眼睛圖標(biāo)，輸入一個(gè)想要置頂?shù)?JavaScript 表達(dá)式即可：

10、調(diào)試動(dòng)畫

Chrome DevTools 提供了檢查和修改動(dòng)畫的功能。它可以幫助我們播放動(dòng)畫、修改動(dòng)畫時(shí)間并分析特定時(shí)間范圍內(nèi)的視圖。

只需在 More tools -> Animations中打開動(dòng)畫面板進(jìn)行調(diào)試即可：

Animation Inspector (動(dòng)畫檢查器）分為四個(gè)主要部分：

• Controls (控件) ：從此處可以清除所有當(dāng)前捕獲的動(dòng)畫組，或更改當(dāng)前選定動(dòng)畫組的速度。
• Overview (概述) ：在此處選擇一個(gè)動(dòng)畫組以在詳細(xì)窗格中檢查和修改它。
• Timeline (時(shí)間軸) ：暫停并從此處開始播放動(dòng)畫，或跳到動(dòng)畫中的特定點(diǎn)。
• Details (詳細(xì)) ：檢查并修改當(dāng)前選定的動(dòng)畫組。