Chrome 浏览器 JS 调试之改变 JS 运行逻辑

观一
159 阅读5分钟

前言

在前端开发和安全测试中，我们经常需要修改 JavaScript 代码的运行逻辑，比如：

  • 关闭前端加密功能
  • 绕过前端某些 flag 检查
  • 打印请求发送的数据到控制台
  • 注入调试代码
  • Hook 前端加密函数

传统方式需要修改源码并重新打包，但 Chrome DevTools 提供了更便捷的方式——Overrides（本地覆盖）功能，可以让我们在不修改服务器文件的情况下，直接改变前端代码的运行逻辑。

什么是 Overrides？

Overrides（本地覆盖） 是 Chrome DevTools 的一个强大功能，位于 Sources → Overrides 面板。

它的核心作用是：让浏览器在运行网页时优先使用本地修改后的前端文件，而不是线上服务器提供的文件，由此达到控制前端运行逻辑的目的。

image.png

使用场景

Overrides 功能适用于以下场景：

  • ✅ 注入调试代码（console.log / debugger）
  • ✅ 移除限制逻辑（如前端校验、JS 反调试）
  • ✅ 替换某个函数逻辑
  • ✅ Hook 某个前端加密函数
  • ✅ 绕过前端加密/混淆
  • ✅ 控制页面按钮、流程逻辑
  • ✅ 临时修复线上 bug（紧急情况）

具体操作步骤

下面我们以在控制台打印某个参数的值这个场景为例，详细演示如何使用 Overrides 功能。

步骤 1：启用 Overrides 并创建本地目录

  1. 打开 Chrome DevTools（按 F12 或右键选择"检查"）
  2. 切换到 Sources 标签
  3. 在左侧面板找到 Overrides 标签（如果没有，点击 >> 展开）
  4. 点击 "Select folder for overrides" 按钮
  5. 选择一个本地文件夹作为映射目录（建议选择空文件夹，避免混乱）

image.png

image.png

步骤 2：找到需要修改的代码文件

  1. 在 Sources 面板的左侧文件树中，找到你想要修改的 JavaScript 文件
  2. 在代码编辑器中定位到需要修改的代码位置 image.png
  3. 选中该文件，右键 → "Add to overrides"（添加到覆盖）

image.png

添加成功后，你会在 Overrides 文件夹中看到这个文件：

image.png

步骤 3：修改本地 JS 代码

现在你可以直接编辑这个文件了。在代码中添加你想要执行的逻辑，比如：

// 原代码
for (let i = 0; i < 10; i++) {
    // 某些逻辑
}

// 修改后：添加 console.log
for (let i = 0; i < 10; i++) {
    console.log('当前 i 的值:', i);  // 添加调试代码
    // 某些逻辑
}

真实场景中的常见修改：

  1. 注入调试代码

    console.log('参数值:', param);
debugger; // 断点

  2. 移除限制逻辑

    // 原代码：if (this.isEnabled) return false;
// 修改后：直接返回 true
return true;

  3. 替换函数逻辑

    // 原代码：shouldEncrypt() { return true; }
// 修改后：
shouldEncrypt() { 
    return false; // 永远不加密
}

  4. Hook 加密函数

    const originalEncrypt = encrypt;
encrypt = function(data) {
    console.log('加密前的数据:', data);
    const result = originalEncrypt(data);
    console.log('加密后的数据:', result);
    return result;
};

例如，输出某个变量的值： image.png 修改完成后，按 Ctrl+S（Windows）或 Cmd+S（Mac）保存。

步骤 4：刷新页面使修改生效

刷新页面（按 F5 或 Ctrl+R），浏览器会自动使用你修改后的本地文件，而不是服务器上的原始文件。

刷新后，你可以在控制台看到打印出来的值：

image.png

注意事项

✅ 优点

  • 无需重新打包：修改后刷新页面即可生效
  • 不影响服务器：只修改本地文件，不会影响线上代码
  • 可持久化：修改会保存在本地，下次打开浏览器仍然有效
  • 支持多文件：可以同时覆盖多个文件

⚠️ 注意事项

  1. 仅当前浏览器有效：修改只在你当前使用的浏览器中生效
  2. 需要保持 Overrides 启用：关闭 Overrides 后，修改会失效
  3. 文件路径需匹配：如果服务器文件路径改变，需要重新添加
  4. 代码格式化：如果代码被压缩，建议先点击 {} 按钮格式化代码
  5. 语法错误检查：修改代码时注意语法，错误会导致页面无法正常运行

🔧 如何禁用 Overrides

如果需要恢复原始代码：

  1. 在 Overrides 面板中，取消勾选 "Enable local overrides"
  2. 或者删除本地覆盖文件夹中的文件
  3. 刷新页面即可恢复原始代码

实际应用案例

案例 1：绕过前端加密判断

// 原代码
shouldEncryptForEndpoint: function(url) {
    if (!this.isEnabled) return false;
    // 复杂的加密判断逻辑
    return true;
}

// 修改后：永远不加密
shouldEncryptForEndpoint: function(url) {
    return false; // 直接返回 false
}

案例 2：打印请求参数

// 在 axios 请求拦截器中添加
axios.interceptors.request.use(function(config) {
    console.log('请求 URL:', config.url);
    console.log('请求参数:', config.data);
    console.log('请求头:', config.headers);
    return config;
});

案例 3：Hook 解密函数

// 找到解密函数并 Hook
const originalDecrypt = decrypt;
decrypt = function(encryptedData) {
    console.log('加密数据:', encryptedData);
    const plaintext = originalDecrypt(encryptedData);
    console.log('解密后的明文:', plaintext);
    return plaintext;
};

总结

Chrome DevTools 的 Overrides 功能是一个非常强大的调试工具，它让我们可以：

  • 🎯 快速调试：无需修改源码和重新打包
  • 🔍 深入分析：可以查看和修改任何前端代码逻辑
  • 🛠️ 灵活测试：临时修改代码逻辑进行测试
  • 🔐 安全研究：分析前端加密、混淆等安全机制

掌握这个功能，可以大大提高前端开发和调试的效率。希望这篇文章对你有帮助！

参考资料：

avatar
文章
阅读
粉丝