URL动态变化时如何持久化JavaScript断点？

按函数名设置全局断点 #

• 打开Chrome DevTools的Sources面板，找到右侧的Breakpoints侧边栏
• 点击侧边栏顶部的「+」按钮，输入目标函数的名称（比如yourTargetFunction），回车确认。只要该函数执行，无论它来自哪个URL的JS文件，都会触发断点。

用代码片段注入断点 #

• 进入Sources面板的Snippets标签，点击「New snippet」新建代码片段
• 写入如下代码（替换成你的目标函数）：

// 替换成你要断点的函数名
const originalFn = window.targetFunction;
window.targetFunction = function(...args) {
  debugger; // 手动触发断点
  return originalFn.apply(this, args);
};

• 保存片段后，在页面加载时右键点击片段选择「Run」，后续目标函数执行时就会自动触发断点。

通过内容匹配定位文件并保留断点 #

• 打开Sources面板的Page标签，按下Ctrl+P（Windows）或Cmd+P（Mac），输入该JS文件中唯一的特征代码片段（比如某个特定函数的部分代码）
• 找到对应的文件后设置断点，Chrome会基于文件内容识别，即使URL随机变化，只要内容一致，断点就会保留。

针对非全局函数的条件断点 #

• 首次找到函数定义并设置断点后，右键断点选择「Edit breakpoint」
• 输入基于函数特征的条件（比如利用函数的toString()结果匹配，或者结合上下文判断），确保只有目标函数执行时才触发断点，避免误触发。

内容的提问来源于stack exchange，提问作者Jez