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?撤銷修改

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

• 默認(rèn)會(huì)列出?All Nodes, 這些包括代理綁定在該節(jié)點(diǎn)的父/祖父節(jié)點(diǎn)上的事件, 因?yàn)樵谠诿芭莼虿东@階段會(huì)經(jīng)過該節(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 庫綁定事件會(huì)包一層, 所以這里很難找到對(duì)應(yīng)handler
  • isAtribute?表明事件是否通過 html 屬性(類似onClick)形式綁定的
  • useCapture?是?addEventListener?的第三個(gè)參數(shù), 說明事件是以 冒泡 還是 捕獲 順序執(zhí)行

Styles

修改樣式

• 添加規(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)閹於即砹? 還需要在斷點(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: 打開文件
• ctrl + shit + o: 跳到函數(shù)定義位置
• ctrl + shift + f: 所有腳本中搜索

Console

元素選擇

$(selector)

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

$_

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

$0 - $4

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

copy

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

信息輸出

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

文章來源 → ?http://www.html-js.com/article/2327

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的chrome调试工具常用功能整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。