如何使用Chrome调试器在代码任意位置检测指定值并暂停执行？

Chrome原生调试器没有直接提供“全局范围内任意变量出现指定值就暂停”的功能，但可以通过以下几种自定义方案实现类似效果：

• 全局变量定时检测
  如果需要监控全局作用域内的变量，可以在控制台执行一段定时检查脚本，当匹配到目标值时触发断点：

  // 替换成你的目标值
  const TARGET_VALUE = '你要检测的值';
  // 定时检查全局变量
  const checkInterval = setInterval(() => {
    for (const key in window) {
      try {
        // 避免访问内置属性报错
        if (window[key] === TARGET_VALUE) {
          console.log(`检测到目标值，变量名：${key}`);
          debugger;
          // 找到后可以清除定时器
          clearInterval(checkInterval);
        }
      } catch (e) {
        // 跳过无法访问的属性
        continue;
      }
    }
  }, 100); // 检查间隔，可根据需要调整
  

  优点：覆盖所有全局变量；缺点：有一定性能开销，无法检测局部作用域的变量。

• 拦截函数调用跟踪参数/返回值
  如果你想跟踪所有函数调用时的参数或返回值是否包含目标值，可以通过修改Function.prototype来实现拦截：

  const TARGET_VALUE = '你要检测的值';
  const originalCall = Function.prototype.call;
  const originalApply = Function.prototype.apply;
  
  // 拦截call方法
  Function.prototype.call = function(...args) {
    if (args.some(arg => arg === TARGET_VALUE)) {
      console.log(`函数调用参数匹配目标值：`, this, args);
      debugger;
    }
    const result = originalCall.apply(this, args);
    if (result === TARGET_VALUE) {
      console.log(`函数返回值匹配目标值：`, this, result);
      debugger;
    }
    return result;
  };
  
  // 拦截apply方法
  Function.prototype.apply = function(thisArg, argsArray) {
    if (argsArray?.some(arg => arg === TARGET_VALUE)) {
      console.log(`函数调用参数匹配目标值：`, this, argsArray);
      debugger;
    }
    const result = originalApply.call(this, thisArg, argsArray);
    if (result === TARGET_VALUE) {
      console.log(`函数返回值匹配目标值：`, this, result);
      debugger;
    }
    return result;
  };
  

  调试完成后记得恢复原方法，避免污染全局环境：

  Function.prototype.call = originalCall;
  Function.prototype.apply = originalApply;
  

  优点：能跟踪函数的输入输出值；缺点：性能影响较大，可能会拦截大量无关函数调用。

• 对象属性监听（针对已知对象）
  如果目标值可能出现在某个特定对象的属性中，可以用Object.defineProperty监听属性的赋值操作：

  const TARGET_VALUE = '你要检测的值';
  // 替换成你要监听的目标对象和属性名
  const targetObj = window.someObject;
  const propName = 'targetProp';
  
  // 保存原始属性值
  const originalValue = targetObj[propName];
  Object.defineProperty(targetObj, propName, {
    set(value) {
      if (value === TARGET_VALUE) {
        console.log(`属性${propName}被设置为目标值：`, value);
        debugger;
      }
      // 赋值到内部属性
      this[`_${propName}`] = value;
    },
    get() {
      return this[`_${propName}`] ?? originalValue;
    },
    configurable: true // 允许后续恢复属性配置
  });
  

  优点：精准监听特定属性，性能开销小；缺点：需要提前知道目标对象和属性。

需要注意的是，这些方法都属于自定义调试手段，调试完成后务必清理对应的定时器、拦截器或属性监听，避免影响页面正常运行。

内容的提问来源于stack exchange，提问作者F. Sabatié