笔记备忘。


打开Chrome开发者工具

  1. 打开最近关闭的状态:Ctrl+Shift+I(Windows) 或 Cmd+Opt+I(Mac)
  2. 快速查看DOM或样式:Ctrl+Shift+C(Windows) 或 Command+Option+C(Mac)
  3. 快速进入Console查看log运行JavaScript:Ctrl+Shift+J(Windows) 或 Command+Option+J(Mac)
  4. 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
  • 事件断点
  • 鼠标选中