笔记备忘。
打开Chrome开发者工具
- 打开最近关闭的状态：Ctrl+Shift+I(Windows) 或 Cmd+Opt+I(Mac)
- 快速查看DOM或样式：Ctrl+Shift+C(Windows) 或 Command+Option+C(Mac)
- 快速进入Console查看log运行JavaScript:Ctrl+Shift+J(Windows) 或 Command+Option+J(Mac)
- F12打开
在Console中访问节点
- 使用
document.querySelectAll访问 - 使用
$0快速访问选中的元素 - 拷贝 -> JS Path
在Elements页面按ESC键可以同时打开Console面板。
DOM中断点调试
- 属性修改时打断点：break on -> attribute modifications
- 节点删除时打断点：break on -> node removal
- 子树修改时打断点：break on -> subtree modifications
断点调试JS
- console.log()
- alert()
- debugger
- 事件断点
- 鼠标选中
