使用DevTools高级调试JavaScript：如何为任意变量赋值特定值设置断点

以下方案基于Chromium内核浏览器（Chrome/Edge）的DevTools实现，无需提前知道变量名即可定位目标值的赋值位置：

• 方案1：全局劫持赋值逻辑触发断点
  该方案可以捕获几乎所有全局/对象属性的赋值操作，匹配到目标值时自动断下。直接在DevTools的Console面板执行对应代码即可：

  // 替换为你需要匹配的目标字符串/数值
  const TARGET = 'your_target_value';
  
  // 劫持Object.defineProperty赋值
  const _defineProperty = Object.defineProperty;
  Object.defineProperty = function (obj, prop, desc) {
    if (desc?.value === TARGET || obj[prop] === TARGET) debugger;
    return _defineProperty.apply(this, arguments);
  };
  
  // 劫持直接赋值操作
  const _reflectSet = Reflect.set;
  Reflect.set = function (target, prop, value) {
    if (value === TARGET) debugger;
    return _reflectSet.apply(this, arguments);
  };
  

  代码执行后，只要任意对象的属性被赋值为你指定的目标值，就会自动触发断点，直接跳转到对应的赋值代码行。
• 方案2：堆扫描定位闭包内的局部变量赋值
  如果目标值是闭包内的局部变量，全局劫持无法捕获，用内存快照方案定位：
  1. 触发你认为目标值会被赋值的操作，打开DevTools的Memory面板，拍一个堆快照
  2. 在快照的搜索栏输入目标值，搜索结果会列出所有持有该值的变量引用，包含局部闭包变量
  3. 右键对应引用选择「在来源面板中显示」，即可直接跳转到变量所在的代码片段，添加普通条件断点即可
• 调试优化技巧
  打开混淆的JS文件后，点击Sources面板右下角的{}（美化代码）按钮，会自动格式化混淆代码，格式化后的代码依然可以正常添加断点，可读性大幅提升。

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