斷點(diǎn)
- F12點(diǎn)擊source進(jìn)入
- 點(diǎn)擊
{}格式化代碼,使代碼更清晰 - js代碼中
debugger;會(huì)自動(dòng)創(chuàng)建一個(gè)斷點(diǎn),記得在上線前刪除
- 點(diǎn)擊
- DOM節(jié)點(diǎn)操作的斷點(diǎn)(Element內(nèi)右擊對(duì)應(yīng)dom元素)
- 當(dāng)節(jié)點(diǎn)內(nèi)部子節(jié)點(diǎn)變化時(shí)斷點(diǎn)（Break on subtree modifications）
- 當(dāng)節(jié)點(diǎn)屬性發(fā)生變化時(shí)斷點(diǎn)（Break on attributes modifications）
- 當(dāng)節(jié)點(diǎn)被移除時(shí)斷點(diǎn)（Break on node removal）
- 事件監(jiān)聽(tīng)斷點(diǎn):Event Listener Breakpoints
console
關(guān)于console
console.dir()
傳入一個(gè)dom節(jié)點(diǎn)，可以輸出該節(jié)點(diǎn)的各項(xiàng) js屬性，而不像console.log只能輸出一個(gè)節(jié)點(diǎn)樹(shù)
console.time() 和 console.timeEnd()
輸出期間經(jīng)過(guò)的時(shí)間
console.trace()
用來(lái)追蹤函數(shù)的調(diào)用軌跡。
console.table(obj)
用表格形式展現(xiàn)對(duì)象
console.count()
計(jì)數(shù)器，如傳入一個(gè)字符串則對(duì)于該字符串單獨(dú)計(jì)數(shù)
console.log()
下面以console.log為例理解Chrome中console的機(jī)制
console只有在Chrome DevTools開(kāi)啟的情況下才會(huì)執(zhí)行，因此
- 如果一開(kāi)始Chrome DevTools即開(kāi)啟,則
console結(jié)果符合預(yù)期，同直接在控制臺(tái)中執(zhí)行語(yǔ)句 - 如果
console語(yǔ)句執(zhí)行之后才開(kāi)啟，則將輸出內(nèi)存中此時(shí)對(duì)應(yīng)的值(而非console語(yǔ)句所處位置應(yīng)有的值) - 如果
console輸出的值為...(通常是因?yàn)樵撝禐間et屬性方式獲取),通過(guò)點(diǎn)擊展開(kāi),則展開(kāi)后的值為點(diǎn)擊時(shí)內(nèi)存中的值(為了獲得console時(shí)的值可以使用JSON.parse(JSON.stringify(value)))
( 注意 : node 中 console.log 的表現(xiàn)和瀏覽器表現(xiàn)不一致)
Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.
