Chrome DevTools(开发者工具)中的骚♂操作

既然要追求性能,那就贯彻到底咯。

控制台独有变量

• $ : 相当于 document.querySelector
• $$ : 相当于 document.querySelectorAll
• $_ : 获取上一条命令的返回值
• $[Number] : 获取最近选择的 dom ,整数
• $x

命令

• 使得 dom 可编辑

document.body.contentEditable = true

• 获取DOM的监听事件

getEventListeners(DOM)

• 监听监听事件的触发(禁止禁止套娃)

// 监听这个 DOM 上所有事件
monitorEvents(DOM)

// 监听指定事件
monitorEvents(DOM, event: [String, Array])

// 移除监听
unmonitorEvents()

• 列出所有属性

dir(Object)

• 查看代码覆盖率

1. 打开控制台 : shift+command+P
2. Show Coverage
3. 点击 reload

• 列为表格查看

table(Object)

调试

• 添加常用代码片段

1. Sources 栏目
2. Snippets 标签

• 媒体查询

1. 设备模式
2. Show Media queries