建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是 CUGGZ。
目前創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、平樂網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
Chrome DevTools 提供了很多實(shí)用功能來調(diào)試源代碼、捕獲元素狀態(tài)、更新和測試元素屬性、模擬各種設(shè)備環(huán)境等。今天就來學(xué)習(xí)幾個超實(shí)用的調(diào)試技巧！
1、選擇和檢查 DOM 元素
在 Chrome DevTools 的 Console 面板中，可以輸入一些帶 $ 的命令來選擇和檢查 DOM 元素。
$0? - $4? 命令可以用來顯示在 Elements 面板中檢查的最后五個 DOM 元素，$0? 返回最近一次選擇的元素，$1 返回最近一次之前選擇的元素，以此類推。
$(selector)? 返回帶有指定的 CSS 選擇器的第一個 DOM 元素的引用。這個命令就等同于 document.querySelector() 函數(shù)：
$$(selector)? 返回與給定 CSS 選擇器匹配的元素數(shù)組。這個命令等同于 document.querySelectorAll() 函數(shù)：
2、復(fù)制數(shù)據(jù)
在日常開發(fā)中，我們會使用 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)時，如果想要重新發(fā)送請求，并且參數(shù)保持不變，可以直接右鍵點(diǎn)擊要重新發(fā)送的 XHR 請求，點(diǎn)擊 Replay XHR 即可重新發(fā)送該請求：
對于一個請求，有時需要修改請求參數(shù)并重新發(fā)送，可以直接在控制臺發(fā)送請求。只需要先右鍵點(diǎn)擊需要重新發(fā)送的 XHR 請求，選擇 Copy -> Copy as fetch：
在 Console 面板中粘貼已經(jīng)復(fù)制的請求內(nèi)容，修改所需參數(shù)，按下回車發(fā)送請求即可：
4、顏色選擇器
Chrome DevTools 提供了一個顏色選擇器來設(shè)置背景顏色和文本顏色。顏色選擇器具有各種功能：顏色選擇器具有各種功能，例如
- 色調(diào)控制。
- 使用吸管從頁面元素中選擇顏色。
- 切換調(diào)色板。
- 可以在當(dāng)前顏色的 RGBA、HSLA 和十六進(jìn)制表示之間切換。
- 不透明度控制。
只需在元素樣式的顏色顯示塊上點(diǎn)擊即可彈出顏色選擇器：
可以使用吸管從頁面上直接吸取顏色：
5、監(jiān)聽事件
可以在 Chrome Devtools 的 Console 面板中輸入 monitorEvents() 來監(jiān)聽指定目標(biāo)事件的信息。該方法有兩個參數(shù)，第一個參數(shù)是要監(jiān)聽的對象。如果未提供第二個參數(shù)，所有事件都會返回。要指定要監(jiān)聽的事件，傳遞一個字符串或字符串?dāng)?shù)組作為第二個參數(shù)。
例如，監(jiān)聽頁面 body 上的點(diǎn)擊事件：
可以調(diào)用 unmonitorEvents() 方法來停止監(jiān)聽事件，需要傳遞一個停止監(jiān)視對象的參數(shù)。例如，停止監(jiān)聽 body 對象上的事件：
6、檢查未使用的 CSS
可以在 Coverage 面板中檢查頁面中沒有使用的 CSS 和 JavaScript 代碼，可以通過以下步驟來打開 Coverage 面板：
點(diǎn)擊刷新按鈕開始重新加載頁面，以測試頁面的代碼覆蓋率：
檢查頁面的資源使用情況，點(diǎn)擊可以查看哪些代碼是沒有使用的，可以通過刪除那些未使用的代碼來最小化 CSS 文件的大?。?/p>
對于測試結(jié)果，可以進(jìn)行篩選、過濾、下載等操作。
7、引用 HTML 元素
在 Chrome DevTools 的 Elements 面板中右鍵點(diǎn)擊要引用的 HTML 元素，選擇 Store as global variable 即可將其保存為一個變量，其變量名會在 Console 面板中打印出來：
8、日志點(diǎn)
Logpoints （日志點(diǎn)）是一種向控制臺提供調(diào)試信息的方式，而無需使用 console.log()，這在線上應(yīng)用調(diào)試時會很有用。可以通過右鍵單擊 DevTools 中的 Source 選項(xiàng)卡中的任何行并指定要記錄的表達(dá)式來添加新的 Logpoint。執(zhí)行該行時，就會在控制臺中獲得它的值。
使用該功能可以減少調(diào)試代碼，提高代碼的整潔性。并且，線上應(yīng)用也可以直接添加控制臺輸出。
9、動態(tài)表達(dá)式
實(shí)時表達(dá)式是一種在表達(dá)式更改時顯示其值的功能。這有助于追蹤代價高昂的表達(dá)式（如動畫中使用的表達(dá)式）或變化很大的表達(dá)式（例如，如果正在遍歷數(shù)組）的問題。它會將 Console 面板里的表達(dá)式置頂，并且能隨著用戶點(diǎn)擊的變化，而動態(tài)刷新該置頂?shù)谋磉_(dá)式。
只需點(diǎn)擊下圖中眼睛圖標(biāo)，輸入一個想要置頂?shù)?JavaScript 表達(dá)式即可：
10、調(diào)試動畫
Chrome DevTools 提供了檢查和修改動畫的功能。它可以幫助我們播放動畫、修改動畫時間并分析特定時間范圍內(nèi)的視圖。
只需在 More tools -> Animations中打開動畫面板進(jìn)行調(diào)試即可：
Animation Inspector (動畫檢查器）分為四個主要部分：
- Controls (控件) ：從此處可以清除所有當(dāng)前捕獲的動畫組，或更改當(dāng)前選定動畫組的速度。
- Overview (概述) ：在此處選擇一個動畫組以在詳細(xì)窗格中檢查和修改它。
- Timeline (時間軸) ：暫停并從此處開始播放動畫，或跳到動畫中的特定點(diǎn)。
- Details (詳細(xì)) ：檢查并修改當(dāng)前選定的動畫組。
網(wǎng)頁標(biāo)題：超實(shí)用的ChromeDevTools調(diào)試技巧！
本文路徑：http://m.5511xx.com/article/cocchjh.html
