Chrome調試技巧

選擇

即使不在 jQuery 和 DOM 環境中，在開發者控制檯中仍可使用“$”選擇元素，等價於 document.querySelector()，而“$$”可返回數組。

$('#id')
$('.className')
$('tagName')
$('.className #id')
...

可編輯

document.body.contentEditable=true

獲取事件數組

getEventListeners($('selector'))
// 獲取特定事件
getEventListeners($('selector')).eventName[0].listener
// 示例
getEventListeners($('firstName')).click[0].listener

監控事件

monitorEvents($('selector'))
monitorEvents($('selector'), 'eventName')
monitorEvents($('selector'), eventNames[])
unmonitorEvents($('selector'))

執行時間

// 指定標籤計時開始
console.time('labelName')
// 輸出指定標籤開始計時到當前的時間間隔(ms)
console.timeEnd('labelName')

表格化

// 表格化展示對象屬性等
console.table(varName)

檢查元素

// 高亮突出
inspect($('selector'))

列出元素屬性

// 返回一個包含關聯元素中所有屬性的對象
dir($('selector'))

引用上一次結果值

$_

一些語言中有類似的東西。

PowerShell 中，在循環結構中用“$_”代表循環實例。

清空

// 清空控制檯輸出等
clear()