Chrome DevTools已添加断点未命中 反而暂停在React模块异常处

在以下业务代码的第2、3、5、6、7行手动添加了Chrome DevTools调试断点：

else{
    console.log('In the patch>>>>>>>started<<<<<<<');
    axios.put(patchUser, { name : name, dateofbirth : dob, hobbies : hobby })
    .then((res) => {
        console.log(res);
        console.log("<<<<<<<<<<<<<<<<<<<<<>>>>>>>>In the patch....>>>>>>>>>>>");
        alert(res);
        window.location.reload(false);
    })
}

调试时断点未在上述位置触发暂停，反而在React模块内部代码的第4行（即throw Error()语句位置）暂停，对应代码如下：

if (prefix === undefined) {
  // Extract the VM specific prefix used by each line.
  try {
    throw Error();
  } catch (x) {
    var match = x.stack.trim().match(/\n( *(at )?)/);
    prefix = match && match[1] || '';
  }
} // We use the prefix to ensure our stacks line up with native stack frames.


return '\n' + prefix + name;

• 先确认代码分支是否命中：加断点的逻辑包裹在else块内，先验证触发操作时逻辑确实走到了该else分支，没有进入前置的if判断分支，否则断点自然不会触发。
• 检查异常暂停配置：打开DevTools的Sources面板，查看Pause on exceptions（异常暂停）按钮是否处于开启状态。如果开启了「捕获所有异常时暂停」，React内部这段主动抛错又立即catch的栈格式化逻辑就会触发暂停——这段代码是React运行时用来识别当前环境栈信息前缀的常规逻辑，不属于业务报错。如果不需要在这类内部捕获的异常处暂停，可以关闭异常暂停，或者勾选「Pause on uncaught exceptions」（仅在未捕获异常时暂停）。
• 解决sourcemap映射错位问题：React项目经构建工具打包后，如果sourcemap映射不准确，在DevTools里手动添加的行号断点会和实际运行的代码位置错位，导致断点无法命中。最直接的验证方式是在需要断点的业务代码行手动添加debugger;语句，保存后重新触发操作，debugger语句会强制在对应代码运行时暂停，不受行号映射偏差影响。
• 屏蔽第三方库内部断点干扰：对于React这类不需要调试的框架内部代码，可以在DevTools中打开对应脚本文件，右键选择Blackbox script（黑盒脚本），后续调试器会直接跳过该脚本内的所有断点和暂停逻辑，不会再停在框架内部的无关代码位置。

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