chrome瀏覽器是世界上最適合開發(fā)人員使用的瀏覽器的，沒有之一。
Live Expression
從 chrome70起，我們可以在控制臺(tái)上方可以放一個(gè)動(dòng)態(tài)表達(dá)式，用于實(shí)時(shí)監(jiān)控它的值。
- 點(diǎn)擊 "Create Live Expression" 眼睛圖標(biāo)，打開動(dòng)態(tài)表達(dá)式界面。
image.png
- 輸入要監(jiān)控的表達(dá)式，比如查看當(dāng)前的時(shí)間戳，輸入 Date.now()
- 會(huì)發(fā)現(xiàn)當(dāng)前時(shí)間戳?xí)恢弊儎?dòng)。也就是表示式被重新計(jì)算了，Live Expression 的執(zhí)行頻率是250毫秒。
下面是一些有用的表達(dá)式：
- document.activeElement 高亮當(dāng)前focus的node
- document.querySelector(s) 高亮任意node，參數(shù)s是css選擇器表達(dá)式，相當(dāng)于在hover這個(gè)node。
- $0 高亮當(dāng)前所選中的node
- $0.parentElement 高亮當(dāng)前所選中的node的父節(jié)點(diǎn)
Store DOM nodes as global variables
我們可以把頁面上的某元素節(jié)點(diǎn)作為全局變量。
- 比如當(dāng)前頁面有一個(gè)按鈕，我們審核該元素，右鍵選擇 "store as global variable"
image.png
- console面板中會(huì)顯示該元素的引用名稱，一般是 temp1 temp2。
- 在console中輸入
monitorEvents(temp1)會(huì)監(jiān)視并打印出該元素的所有事件。 - 這個(gè)你可以在按鈕上點(diǎn)擊，移動(dòng)，甚至按鍵，會(huì)發(fā)現(xiàn)一系列的mouse, click等事件
- 使用
unmonitorEvents(temp1)停止記錄事件。 - 使用
monitorEvents(temp1, ['mouse', 'focus'])只記錄某類型的事件?？梢蕴?mouse, key, click, touch和control等。
參考：
https://developers.google.com/web/updates/2018/08/devtools
https://developers.google.com/web/updates/2018/10/devtools#bonus
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference
