代码调试之chrome

651 阅读1分钟

iShot2021-12-17 11.24.05.png

无条件JS断点

  • 默认断点 没条件断点.png

条件JS断点

方式一:添加有条件的断点

  • 直接在想打断点处右键
  • 添加条件断点...(add conditional breakpoint) iShot2021-12-17 10.05.11.png

iShot2021-12-17 10.10.36.png

方式二:如果已经有了断点

  • 点击断点处右键
  • 修改断点...(Edit breakpoint...) image.png

循环中的条件断点

image.png

XHR断点

看下juejin.cn

fetch/xhr请求断点

  • XHR/提取断点
    • 勾上任何XHR或提取 XHR2.png
  • 一个断点对应一个XHR请求
    • 首页断住17下,17个请求 XHR断点1.png

断在指定的XHR请求处

  • XHR/提取断点
    • 网址包含:fetch或xhr请求完整地址或者包含在地址中的字符串 image.png

事件断点

  • 点击网页中绑定了点击事件的地方:
    • 没啥用,调试会进入一堆内置库,几乎找不到业务代码(如果只想调试业务代码的话) 案例: 点击掘金的热榜 image.png

产线环境添加sourceMap

参考 debuger~产线环境添加sourceMap.png

其他

其他没试过,用过再说