概览

0

七种断点类型

  1. 行断点:代码运行到当前行之前暂停执行

    1
    2
    3
    在源代码添加debugger关键字
    或者
    点击Sources面板中的源代码的行号
  2. 条件行断点:当满足条件时才会触发该断点

    1
    2
    右击Sources面板中的源代码的行号
    选择“Add conditional breakpoint”

    0

  3. DOM 断点

    1
    2
    3
    4
    即Elements面板提及过的三种DOM断点:
    - 节点属性断点
    - 节点删除断点
    - 子树变更断点

    0

  4. XHR/Fetch 断点

    1
    在页面发出XHR或Fetch请求前加断点

    0

  5. Event Listener 事件监听断点

    1
    可以在所有类型的事件函数被出发前加断点

    0

  6. Exception 异常断点

    0

  7. Function 函数断点

    1
    把想调试的函数名作为参数,调用debug()函数,可以在每次执行该函数前暂停执行代码

    0

Debug

0

0

0

0

0

0

Devtools Nodejs debug

nodeDebug.png

BlackBox

  1. 在源代码窗格右键,选择”BlackBox Script”
    0

  2. 在 Call Stack 中右键某一帧,选择”BlackBox Script”
    0

  3. 在设置中的 Blackboxing 面板添加正则表达式匹配文件名

    0

Workspace:Devtools as IDE 将更改持久化

Source Map

sourceMap.png

Local Overrides

Snippets 代码片段

snippet.png

Content scripts