Chrome DevTools调试时如何查找含指定字符串的变量/对象？

一、DevTools全局搜索定位字符串片段 #

• 打开DevTools的Sources面板，按下Ctrl+Shift+F（Windows/Linux）或Cmd+Opt+F（Mac）唤起全局搜索框
• 输入目标字符串片段（比如s=或你推测的s参数相关特征），勾选「正则表达式」选项，支持模糊匹配
• 搜索结果会列出所有包含该片段的JS文件，点击结果可直接跳转到对应代码行；若代码被压缩，点击面板左下角的{}按钮格式化后再查看

二、条件断点精准拦截参数生成 #

• 先定位到发起翻页请求的代码（比如fetch、XMLHttpRequest调用处，可通过Network面板的「发起者」列快速跳转）
• 在目标代码行点击行号设置断点，右键断点选择「编辑条件」，输入匹配逻辑：

  // 示例：检查请求参数中的s属性是否包含特征值
  requestParams?.s?.includes("你的目标片段")
  // 或监控所有字符串变量
  typeof this === 'string' && this.includes("hahaha")
  

• 当代码执行到满足条件的逻辑时会自动暂停，此时可通过调用栈回溯参数生成的完整流程

三、全局监控字符串创建（进阶） #

• 打开Console面板，执行以下代码覆盖原生String构造函数，监控所有新生成的字符串：

  const originalString = String;
  String = function(value) {
    const str = originalString(value);
    if (str.includes("你的目标片段")) {
      debugger; // 触发断点
      console.log("匹配到目标字符串:", str, new Error().stack); // 打印调用栈溯源
    }
    return str;
  };
  String.fromCharCode = originalString.fromCharCode; // 保留原生方法
  

• 后续页面中只要生成包含目标片段的字符串，就会自动触发断点，控制台会输出调用栈帮你找到生成位置

四、抓包+逆向参数生成逻辑 #

• 打开Network面板，筛选「XHR/Fetch」类型，找到包含s参数的翻页请求
• 查看请求的「发起者」（Initiator），点击跳转至发起请求的代码位置
• 若s参数为加密生成，复制请求中的s参数值，在全局搜索框搜索该值，定位到生成加密值的函数
• 将目标函数代码复制到本地Node.js环境，补充依赖后测试运行，验证是否能生成一致的s参数

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