打开调试工具

F12

打开命令菜单

快捷键： CTRL+SHIFT+P

menu

截屏：screen shoot

切换调试版面的位置：dock

常用tab

  • Element
  • Console
  • Source
  • Network
  • Application

Element

查找某个元素：CTRL+F

查询方式：

  • 文本查询
  • css选择器
  • xpath: //全局查找 /
  • console面板中输入js代码：inspect(element) eg: inspect(document.getElementById('section_seven'))

编辑样式：

  • 让:hover常驻

    hover

  • 编辑class

  • 观察flex / grid布局

    flex/grid

console

快捷键：

  • CTRL+SHIFT+J

执行语句

$_：返回上一条语句的执行结果

$0：返回上一个选择的dom节点

console.log(error warn table clear group time assert trace)

log级别的筛选

eye icon：可以观察某个值的变化

eye icon

Sources

  • 直接在代码中添加debugger; 运行到这一行代码的时候即可进入调试

  • 直接在element的dom节点中添加调试动作。subtree modifications表示当这个节点的子树发生改变时进入调试模式；attribute modifications表示当这个节点的属性发生改变时进入调试模式；node removal表示当这个节点被移除时进入调试模式。

    element debug

  • watch可用于监视某一个变量值的变化，功能类似于console面板中eye icon的功能；call stack可用于将某个文件加入到ignore list，这样调试的时候就不会进入这个文件；event listener breakpoints可用于监听某个事件的发生，当这个事件发生的时候就进入调试模式；

    面板

ignore

event

  • debug时可以使用ctrl+p输入文件名快速定位要打断点的文件；使用ctrl+shift+F输入变量名、方法名来快速搜索