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()