前端浏览器调试

说来惭愧,浏览器调试技巧很薄弱,围绕看性能,调试技巧展开记录

  • 看性能面板
  • 断点调试
  • fidder工具
  • 本地资源替换线上资源排查问题

控制台如何把所有的断点清空

浏览器 DevTools 控制台一次性清空所有断点的方法:

Chrome / Edge / Brave(Chromium 系列)

  1. 打开 DevTools → Sources 面板
  2. 右侧找到 Breakpoints 区域
  3. 点击 Breakpoints 标题右侧的 "⛔️ Remove all breakpoints"(或右键→ Remove all breakpoints)

快捷键:

  • Windows / Linux:Ctrl + Shift + F8
  • macOS:Cmd + Shift + F8

Firefox

  1. DevTools → Debugger 面板
  2. 右侧 Breakpoints 列表顶部有 "Remove all breakpoints" 图标(垃圾桶)

Safari

  1. DevTools → Sources
  2. Breakpoints 列表 → 右上角 "Delete All Breakpoints"

补充:如果在代码里用 debugger; 语句设的断点,DevTools 无法一键清除,需要手动删除或注释代码。