chrome开发者工具部分忽略的功能

算是学习笔记，一些忽略的功能

快捷键

• cmd+ [和cmd + ]切换开发者工具的不同tab面板，这和vim里切换tab是一致的
• ESC 在每个面板切换显示console面板

功能

Elements

• 选中元素时，右键上的copy css path和copy xpath，有时候非常有用
• 可以通才拖拽改变节点顺序
• 选中元素时，h键可以切换元素的显示隐藏(丝姐补充)

Styles

• Toggle element state可以查看不同状态下的元素样式

DOM Breakpoints

• 右键添加 Break on，可以用来查看节点被哪个脚本修改

Source

• 添加XHR breakpoints来拦截特定的异步请求
• Call Stack 里对语句右键可以Restart Frame在当前语句重新执行
• 添加black box script忽略在某些库代码里不停的跳转，设置面板里Source会有管理黑盒js的功能
• 勾选Async可以捕捉异步调用的Call stack
• cmd+d 可以多选文本 (丝姐补充)

Console

• monitorEvents监听事件，monitorEvents(document, ['click'])监听document的click事件