Elements

chrome devtools 中 Elements panel 是審查 dom 元素和 css 的, 可以實(shí)時(shí)修改 dom/css.

windows: ctrl + shift + i

mac: cmd + opt + i

DOM

修改 html & 屬性

節(jié)點(diǎn)右鍵, 如下圖, 可以:

添加屬性(enter)

修改 html(F2)

刪除元素(delete)

除了右鍵, 還可以:

h toggle 元素的 visibility 屬性

拖拽節(jié)點(diǎn), 調(diào)整順序

拖拽節(jié)點(diǎn)到編輯器

ctrl + z 撤銷(xiāo)修改

查看元素上綁定了哪些事件

默認(rèn)會(huì)列出 All Nodes, 這些包括代理綁定在該節(jié)點(diǎn)的父/祖父節(jié)點(diǎn)上的事件, 因?yàn)樵谠诿芭莼虿东@階段會(huì)經(jīng)過(guò)該節(jié)點(diǎn)

Selected Node Only 只會(huì)列出當(dāng)前節(jié)點(diǎn)上綁定的事件

每個(gè)事件會(huì)有對(duì)應(yīng)的幾個(gè)屬性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

handler是處理函數(shù), 右鍵可以看到這個(gè)函數(shù)定義的位置, 一般 js 庫(kù)綁定事件會(huì)包一層, 所以這里很難找到對(duì)應(yīng)handler

isAtribute 表明事件是否通過(guò) html 屬性(類(lèi)似onClick)形式綁定的

useCapture 是 addEventListener 的第三個(gè)參數(shù), 說(shuō)明事件是以 冒泡 還是 捕獲 順序執(zhí)行

Styles

修改樣式

添加規(guī)則

添加、修改屬性 同樣可以通過(guò) ctrl + z 取消

斷點(diǎn)

代碼斷點(diǎn)

設(shè)置斷點(diǎn)

在 Sources 面板 js 文件行號(hào)處設(shè)置斷點(diǎn), 這里除了常規(guī)斷點(diǎn)外, 還有個(gè)條件斷點(diǎn)(右鍵 conditional breakpoint), 在設(shè)置的條件為 true 時(shí)才會(huì)斷電, 在循環(huán)中需要斷點(diǎn)時(shí)比較有用.

斷點(diǎn)后可以查看 堆棧, 變量 信息:

在調(diào)用堆棧這里可以切換到堆棧中的任何地方重新執(zhí)行(右鍵restart frame), 如果想查看斷點(diǎn)前的信息時(shí)比較有用.

斷點(diǎn)后的變量保存到全局

選中變量, 右鍵 Evalute in console

在 console 中選中輸出的內(nèi)容, 右鍵 store as global variable

事件斷點(diǎn)

元素上事件斷點(diǎn)

devtools 可以查看某一個(gè)元素上綁定了哪些事件: Elements > Event Listeners

dom mutation 斷點(diǎn)(推薦)

dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 結(jié)構(gòu)改變時(shí)觸發(fā). devtools 可以對(duì) DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 時(shí)斷點(diǎn). 對(duì)上面 元素上事件斷點(diǎn)(mouseover) 后不容易找到業(yè)務(wù)代碼, 使用 mutation 斷點(diǎn), 斷點(diǎn)后配合 call stack 就可以找到業(yè)務(wù)代碼了, 如下圖

這種情況使用全局搜索(ctrl + shift + f) 代碼中 css classname 也能找到業(yè)務(wù)代碼, 然后直接斷點(diǎn)也可以.

全局事件斷點(diǎn)

devtools 還可以對(duì)事件發(fā)生時(shí)斷點(diǎn), 比如 click 發(fā)生時(shí)斷點(diǎn), 這個(gè)跟 元素上事件斷點(diǎn) 不同, 不會(huì)限定在元素上, 只要是事件發(fā)生, 并且有 handler 就斷點(diǎn); 還可以對(duì) resize, ajax, setTimeout/setInterval 斷點(diǎn).

下面這個(gè)圖是 resize 時(shí)中斷, 因?yàn)閹?kù)都代理了, 還需要在斷點(diǎn)處一步一步跟下去才能走到業(yè)務(wù)代碼中.

幾個(gè)常用的斷點(diǎn)快捷鍵:

F8: 繼續(xù)執(zhí)行

F10: step over, 單步執(zhí)行, 不進(jìn)入函數(shù)

F11: step into, 單步執(zhí)行, 進(jìn)入函數(shù)

shift + F11: step out, 跳出函數(shù)

ctrl + o: 打開(kāi)文件

ctrl + shit + o: 跳到函數(shù)定義位置

ctrl + shift + f: 所有腳本中搜索

Console

元素選擇

$(selector)

即使當(dāng)前頁(yè)面沒(méi)有加載jQuery,你也依然可以使用$和$$函數(shù)來(lái)選取元素,實(shí)際上,這兩個(gè)函數(shù)只是對(duì)document.querySelector()和document.querySelectorAll()的簡(jiǎn)單封裝,$用于選取單個(gè)元素,$$則用于選取多個(gè):

$_

使用 $_ 來(lái)引用最近的一個(gè)表達(dá)式

$0 - $4

除了$_,你還可以使用$0,$1,$2,$3,$4這5個(gè)變量來(lái)引用最近選取過(guò)的5個(gè)DOM元素。 $0 為Elements HTML 面板中選中的元素。 $1 為上一次在 HTML 面板中選中的元素。 $2、$3、$4 同樣的。不過(guò)只能到$4

copy

復(fù)制到剪切板,copy之后,直接ctrl+v

信息輸出

在js代碼中打點(diǎn)console.log() 類(lèi)似debugger