站長(zhǎng)資訊網(wǎng)本篇文章介紹了一些Chrome調(diào)試時(shí)的技巧，希望對(duì)各位學(xué)習(xí)前端開發(fā)的朋友有幫助！
前端開發(fā)Chrome調(diào)試的小技巧
1、呼出快捷指令面板：cmd + shift + p
在Devtools界面下，鍵入cmd + shift + p將其激活，然后開始在欄中鍵入要查找的命令或輸入？號(hào)以查看所有可用命令 .
如下圖:其中Open file,Go to line,Go to symbol對(duì)于快速打開文件和定位文件位置還是節(jié)省了不少時(shí)間.
2、性能監(jiān)視器： performance monitor
3、本地覆蓋：local overrides
感覺(jué)這個(gè)特性是超級(jí)棒。 使用我們自己的本地資源覆蓋網(wǎng)頁(yè)所使用的資源。 多說(shuō)無(wú)益，直接舉個(gè)例子大家就明白了。
大家看到了吧，我們可以把網(wǎng)絡(luò)資源直接和本地資源映射，再次刷新網(wǎng)頁(yè)，取得資源文件就是本地的了。這種對(duì)js、css等文件批量修改調(diào)試特別有用。
local overrides還可以模擬Mock數(shù)據(jù)，如果后端API還不OK或者不想頻繁的發(fā)布后臺(tái)API。這個(gè)功能是相當(dāng)有用，不過(guò)聽說(shuō)還不支持XHR請(qǐng)求。
4、控制臺(tái)內(nèi)置指令
私以為如果網(wǎng)頁(yè)里面如果沒(méi)有引用jquery是不是就不能使用$這樣的語(yǔ)法了,nonono
$(selector, [startNode])：?jiǎn)芜x擇器
可以選擇元素并觸發(fā)元素事件.
$$（選擇器，[startNode]）：全選擇器 $x(path, [startNode])：xpath選擇器
$x(path)返回與給定xpath表達(dá)式匹配的DOM元素?cái)?shù)組 .
$x('//p'):返回頁(yè)面上的所有p元素。
getEventListeners（object）:獲取指定對(duì)象的綁定事件
5、Console…的多種用法
1.變量打印：%s、%o、%d、和%c
例如： const text = "文本1"
console.log(打印${text}) //結(jié)果為打印文本1
2.布爾斷言打印：console.assert()
做前端調(diào)試時(shí)很有用。
3.console.table()內(nèi)容可以以表格的形式輸出.
