超實用的Chrome DevTools調試技巧！
大家好，我是 CUGGZ。
Chrome DevTools 提供了很多實用功能來調試源代碼、捕獲元素狀態、更新和測試元素屬性、模擬各種設備環境等。今天就來學習幾個超實用的調試技巧！
1、選擇和檢查 DOM 元素
在 Chrome DevTools 的 Console 面板中，可以輸入一些帶 $ 的命令來選擇和檢查 DOM 元素。
$0? - $4? 命令可以用來顯示在 Elements 面板中檢查的最后五個 DOM 元素，$0? 返回最近一次選擇的元素，$1 返回最近一次之前選擇的元素，以此類推。
$(selector)? 返回帶有指定的 CSS 選擇器的第一個 DOM 元素的引用。這個命令就等同于 document.querySelector() 函數：
$$(selector)? 返回與給定 CSS 選擇器匹配的元素數組。這個命令等同于 document.querySelectorAll() 函數：
2、復制數據
在日常開發中，我們會使用 Chrome DevTools 來調試頁面，比如修改頁面的樣式、節點屬性等。其為我們提供了復制數據的功能，可以將修改后的內容復制到源代碼中。
復制 CSS 樣式：
我們可以復制 CSS 規則或聲明，甚至可以將內容復制為 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%
復制 HTML 內容，右鍵點擊要復制的元素 -> Copy，點擊要復制的內容類型即可：
復制請求數據：
3、發送 XHR 請求
Chrome DevTools 支持重新發送 XHR 請求。在和后端進行接口聯調時，如果想要重新發送請求，并且參數保持不變，可以直接右鍵點擊要重新發送的 XHR 請求，點擊 Replay XHR 即可重新發送該請求：
對于一個請求，有時需要修改請求參數并重新發送，可以直接在控制臺發送請求。只需要先右鍵點擊需要重新發送的 XHR 請求，選擇 Copy -> Copy as fetch：
在 Console 面板中粘貼已經復制的請求內容，修改所需參數，按下回車發送請求即可：
4、顏色選擇器
Chrome DevTools 提供了一個顏色選擇器來設置背景顏色和文本顏色。顏色選擇器具有各種功能：顏色選擇器具有各種功能，例如
- 色調控制。
- 使用吸管從頁面元素中選擇顏色。
- 切換調色板。
- 可以在當前顏色的 RGBA、HSLA 和十六進制表示之間切換。
- 不透明度控制。
只需在元素樣式的顏色顯示塊上點擊即可彈出顏色選擇器：
可以使用吸管從頁面上直接吸取顏色：
5、監聽事件
可以在 Chrome Devtools 的 Console 面板中輸入 monitorEvents() 來監聽指定目標事件的信息。該方法有兩個參數，第一個參數是要監聽的對象。如果未提供第二個參數，所有事件都會返回。要指定要監聽的事件，傳遞一個字符串或字符串數組作為第二個參數。
例如，監聽頁面 body 上的點擊事件：
可以調用 unmonitorEvents() 方法來停止監聽事件，需要傳遞一個停止監視對象的參數。例如，停止監聽 body 對象上的事件：
6、檢查未使用的 CSS
可以在 Coverage 面板中檢查頁面中沒有使用的 CSS 和 JavaScript 代碼，可以通過以下步驟來打開 Coverage 面板：
點擊刷新按鈕開始重新加載頁面，以測試頁面的代碼覆蓋率：
檢查頁面的資源使用情況，點擊可以查看哪些代碼是沒有使用的，可以通過刪除那些未使用的代碼來最小化 CSS 文件的大小：
對于測試結果，可以進行篩選、過濾、下載等操作。
7、引用 HTML 元素
在 Chrome DevTools 的 Elements 面板中右鍵點擊要引用的 HTML 元素，選擇 Store as global variable 即可將其保存為一個變量，其變量名會在 Console 面板中打印出來：
8、日志點
Logpoints （日志點）是一種向控制臺提供調試信息的方式，而無需使用 console.log()，這在線上應用調試時會很有用。可以通過右鍵單擊 DevTools 中的 Source 選項卡中的任何行并指定要記錄的表達式來添加新的 Logpoint。執行該行時，就會在控制臺中獲得它的值。
使用該功能可以減少調試代碼，提高代碼的整潔性。并且，線上應用也可以直接添加控制臺輸出。
9、動態表達式
實時表達式是一種在表達式更改時顯示其值的功能。這有助于追蹤代價高昂的表達式（如動畫中使用的表達式）或變化很大的表達式（例如，如果正在遍歷數組）的問題。它會將 Console 面板里的表達式置頂，并且能隨著用戶點擊的變化，而動態刷新該置頂的表達式。
只需點擊下圖中眼睛圖標，輸入一個想要置頂的 JavaScript 表達式即可：
10、調試動畫
Chrome DevTools 提供了檢查和修改動畫的功能。它可以幫助我們播放動畫、修改動畫時間并分析特定時間范圍內的視圖。
只需在 More tools -> Animations中打開動畫面板進行調試即可：
Animation Inspector (動畫檢查器）分為四個主要部分：
- Controls (控件) ：從此處可以清除所有當前捕獲的動畫組，或更改當前選定動畫組的速度。
- Overview (概述) ：在此處選擇一個動畫組以在詳細窗格中檢查和修改它。
- Timeline (時間軸) ：暫停并從此處開始播放動畫，或跳到動畫中的特定點。
- Details (詳細) ：檢查并修改當前選定的動畫組。
