400 186 1886
一、部分快捷操作
1、控制臺(tái)：保存堆棧信息( Stack trace )
2、使用命令Command面板
2.1、分析代碼的覆蓋率：
打開Command面板，如下圖搜索“覆蓋”，分析首次頁(yè)面加載過(guò)程中哪些代碼執(zhí)行了，那些沒(méi)有執(zhí)行，輸出一個(gè)報(bào)告。
選擇文件可進(jìn)一步查看代碼的使用分析，紅色 = 尚未執(zhí)行，灰色 = 至少執(zhí)行了一次。
2.2、元素截圖：
輸出指定元素的截圖，包含隱藏滾動(dòng)的內(nèi)容，這個(gè)功能挺好用的。
通過(guò)Command面板：搜索“截圖”，全屏截圖、指定節(jié)點(diǎn)截圖。
元素面板中，選中元素》右鍵菜單》“捕獲節(jié)點(diǎn)屏幕截圖”。
3、復(fù)制元素
快速訪問(wèn)當(dāng)前元素$0，$0代表在元素面板中選中元素，$1是上一個(gè)，支持到$4
copy($0) 控制臺(tái)中代碼復(fù)制當(dāng)前選素
4、快速隱藏、顯示該元素
選中元素，按下h快速隱藏、顯示該元素。
5、console對(duì)象
關(guān)于console對(duì)象，提供了很豐富的API
6、keys/values
見(jiàn)名知意。功能類似于Object.keys，Object.values
二、DOM調(diào)試技巧
當(dāng)DOM中某個(gè)元素移除或者元素屬性發(fā)生變化的時(shí)候我需要打一個(gè)斷點(diǎn)，但是我不知道是代碼里哪一個(gè)地方導(dǎo)致它發(fā)生變化，或者代碼中有多個(gè)地方導(dǎo)致它發(fā)生變化，我不知道具體是哪一行代碼導(dǎo)致它發(fā)生變化時(shí)，這個(gè)時(shí)候就需要用上DOM調(diào)試了
2.1、使用方法
在開發(fā)者工具面板元素/Element中選中元素，鼠標(biāo)右擊調(diào)出面板，點(diǎn)擊發(fā)生中斷的條件/Break on，會(huì)出現(xiàn)3個(gè)選項(xiàng)
子樹修改/subtree modifications當(dāng)子元素變更時(shí)會(huì)在導(dǎo)致子元素變更的代碼處打上斷點(diǎn)屬性修改/attribute modifications當(dāng)該元素自身屬性變更時(shí)，會(huì)在屬性變更出打上斷點(diǎn)移除節(jié)點(diǎn)/node removal當(dāng)該元素自身被移除時(shí)，會(huì)在移除的代碼處打上斷點(diǎn)
以促銷活動(dòng)管理卡片為例：
首先給要發(fā)生變化的dom節(jié)點(diǎn)打上斷點(diǎn)
點(diǎn)擊“增加行”后，觸發(fā)斷點(diǎn)，此時(shí)可能會(huì)在框架底層操作dom的時(shí)候打上斷點(diǎn)，但是我們可以在函數(shù)調(diào)用棧中往上尋找，知道我們代碼中調(diào)用的地方。
2.2、查詢dom樹
·查詢方式：文本查詢/css選擇器/XPath(XML路徑語(yǔ)言（XML Path Language），它是一種用于在XML文檔中定位和選擇節(jié)點(diǎn)的語(yǔ)言。)
XPath的的使用示例：
- 選擇所有名稱為
title的節(jié)點(diǎn)：//title - 選擇ID為
nav的div標(biāo)簽下的第一個(gè)ul標(biāo)簽下的所有li標(biāo)簽：//div[@id='nav']/ul[1]/li
2.3、使用inspect()
可以幫助快速定位并檢查DOM中的元素
三、監(jiān)聽(tīng)
3.1、監(jiān)聽(tīng)函數(shù)
如果某個(gè)元素被綁定了事件，但點(diǎn)擊時(shí)無(wú)反應(yīng)，就可以用monitorEvents來(lái)簡(jiǎn)單判斷一下綁定的事件是否觸發(fā)
3.2、監(jiān)聽(tīng)變量：活動(dòng)表達(dá)式
當(dāng)自己需要反復(fù)監(jiān)測(cè)一個(gè)變量的值時(shí)，非常省事且好使
表達(dá)式支持以下類型的值：
-
變量：
- 可以是全局變量或局部作用域內(nèi)的變量
-
表達(dá)式：
- 任何有效的JavaScript表達(dá)式都可以被監(jiān)視
- 函數(shù)調(diào)用或方法返回的結(jié)果。例如，
Date.now()將返回當(dāng)前的時(shí)間戳，并且這個(gè)值會(huì)隨時(shí)間實(shí)時(shí)更新。
-
DOM相關(guān)：
document.activeElement：實(shí)時(shí)跟蹤當(dāng)前文檔中獲得焦點(diǎn)的元素。document.querySelector(selector)：通過(guò)CSS選擇器高亮任意節(jié)點(diǎn)。$0：高亮當(dāng)前所選中的節(jié)點(diǎn)。$0.parentElement：高亮當(dāng)前所選中的節(jié)點(diǎn)的父節(jié)點(diǎn)。
3.3、使用事件監(jiān)聽(tīng)器斷點(diǎn)
當(dāng)接手一個(gè)陌生的功能，需要修改其中的事件邏輯時(shí)，我們可以在事件監(jiān)聽(tīng)器里給修改的事件打上斷點(diǎn)，然后忽略掉框架文件，此時(shí)手動(dòng)點(diǎn)擊或者雙擊元素就可以找到代碼里的方法名
四、斷點(diǎn)調(diào)試
4.1、斷點(diǎn)錯(cuò)誤調(diào)試
以打開結(jié)算單查看界面報(bào)錯(cuò)為例：
打開控制臺(tái)，選中“在遇到異常時(shí)暫?！卑粹o，并將框架報(bào)錯(cuò)文件進(jìn)行“向忽略列表添加腳本”操作，控制代碼運(yùn)行到報(bào)錯(cuò)處
在調(diào)用堆棧面板，可以看到比報(bào)錯(cuò)信息里更詳細(xì)的的調(diào)用棧，在其中找到調(diào)用的入口，進(jìn)行錯(cuò)誤分析
4.2、條件調(diào)試
給重復(fù)執(zhí)行超多次的代碼的觸發(fā)加上一個(gè)條件，這樣可以避免干擾
4.3、日志斷點(diǎn)
可以讓我們少寫 console.log
五、調(diào)試樣式
當(dāng)你在頁(yè)面中使用Grid或Flex布局時(shí)，可以在布局面板進(jìn)行各種操作，方便調(diào)試：
- 可視化編輯：當(dāng)選中一個(gè)使用Grid或Flex布局的元素時(shí)，可以在樣式面板中看到Grid或Flex布局的可視化編輯器。通過(guò)拖動(dòng)和調(diào)整編輯器中的線條和區(qū)域，可以實(shí)時(shí)修改Grid的布局和對(duì)齊方式。
- 屬性編輯：除了可視化編輯外，還可以直接編輯Grid或Flex布局的相關(guān)屬性，如
grid-template-rows、grid-template-columns、grid-gap、flex-direction、justify-content、align-items等等。修改這些屬性后，布局會(huì)實(shí)時(shí)更新。
