如何在Chrome重载页面时向网站JS文件注入console.log以调试函数？

这问题我太熟了！作为前端调试常客，有几个靠谱的方法能帮你在无法编辑源文件的情况下，每次页面重载都自动注入自定义JS代码：

方法1：浏览器开发者工具的「本地覆盖」功能 #

这是浏览器原生支持的持久化修改方案，适合需要长期调试同一个页面的场景：

• 打开Chrome/Firefox的开发者工具（F12），切换到「Sources」面板
• 在左侧文件树里找到你要修改的JS文件，右键点击它，选择「Override content」（Chrome）或「Save for overrides」（Firefox）
• 选择本地一个空文件夹来存放修改后的文件，浏览器会自动复制源文件到这个文件夹
• 在开发者工具的编辑器里直接修改文件，添加你需要的console.log()语句，保存更改
• 之后每次重载页面，浏览器都会优先加载你本地修改后的文件，调试逻辑会自动生效

注意：第一次使用时需要授权浏览器访问你选择的本地文件夹，修改后如果想恢复原文件，只需要删除本地覆盖的文件即可。

方法2：用户脚本（User Script） #

用Tampermonkey、Violentmonkey这类浏览器扩展，能让你的自定义JS在指定网站每次加载时自动运行：

1. 安装Tampermonkey扩展（各大浏览器应用商店都能找到）
2. 点击扩展图标，选择「创建新脚本」
3. 替换默认模板为类似下面的代码（根据你的目标函数调整）：

// ==UserScript==
// @name         注入调试日志
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  给目标函数添加console.log调试
// @author       You
// @match        https://你的目标网站域名/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 替换成你要修改的目标函数名，比如window.xxxFunction
    const originalFunc = window.targetFunction;
    window.targetFunction = function(...args) {
        // 在这里添加你的调试代码
        console.log('目标函数被调用，参数：', args);
        
        // 执行原函数逻辑，保留原有功能
        const result = originalFunc.apply(this, args);
        
        // 也可以在函数结束后加日志
        console.log('目标函数返回值：', result);
        return result;
    };
})();

4. 保存脚本，之后访问目标网站时，脚本会自动注入你的调试代码，页面重载也不会失效

方法3：书签工具（Bookmarklet） #

适合临时快速调试，虽然页面重载后需要手动点击书签，但胜在无需安装扩展：

• 在浏览器书签栏添加一个新书签，把书签的「URL」替换成下面压缩后的代码（同样需要替换目标函数名）：

javascript:(function(){const o=window.targetFunction;window.targetFunction=function(...a){console.log('调用参数:',a);return o.apply(this,a);}})();

• 每次页面加载完成后，点击这个书签，你的调试代码就会注入到页面中
• 如果想让它自动运行，可以修改代码加上页面加载监听：

javascript:(function(){window.addEventListener('load',function(){const o=window.targetFunction;window.targetFunction=function(...a){console.log('调用参数:',a);return o.apply(this,a);}});})();

补充：临时调试（单次生效） #

如果只是单次调试不需要持久化，可以直接用开发者工具的断点功能：

• 在Sources面板找到目标函数的行，点击行号设置断点
• 页面运行到断点时，在控制台直接修改函数逻辑或添加console.log()，不过这种修改在页面重载后会消失，适合快速测试

内容的提问来源于stack exchange，提问作者Patoshi パトシ