javascript - 将控制台输出行上的链接重定向到包装函数的调用者

Question

我已经为 window.console 编写了一个装饰器/包装器，这样我就可以在我的生产环境中禁用杂散的 console.log。 我遇到的是我的包装器现在显示为实际日志命令的来源。这使得通过控制台进行调试有点麻烦，因为单击控制台中最右侧的链接只会导致我自己的输出函数。

以下代码是真实脚本的简化版本，其中我删除了一些功能，例如启用/禁用和缓存/刷新已隐藏的行。

    //Save reference to original function
    var oConsole = window.console;

    //Create custom console output method
    var wConsole = function (method) {
        return function () {
            if (!window.console[method].enabled) {
                //Apply log command to original console method
                oConsole[method].apply(oConsole, Array.from(arguments)); //This is the row i get linked to
            }
        };
    };

    //Create a new console object for overriding original functions
    var overrides = {
        o: oConsole,
        log: wConsole("log"),
        debug: wConsole("debug"),
        info: wConsole("info"),
        warn: wConsole("warn"),
        error: wConsole("error")
    }

    //Using jQuery i create a new instance and extend my defined overrides onto the original version
    window.console = $.extend({}, window.console, overrides);

    console.log("test 123"); //This is the row i want to link to

当我点击右边的链接时...
...我得到了这一行的链接。


有没有一种方法可以使函数“透明”，使链接指向我的包装函数的被调用者？

该解决方案只需要在 Google Chrome 中运行，因为我在 Google Chrome 中执行了大部分开发工作。

Answer 1

Chrome 有一个“黑盒”脚本文件的选项。虽然这似乎主要是为了在调试时忽略框架脚本(单步执行代码时将跳过黑框脚本)，但它也会对您的情况有所帮助，因为它不会显示为控制台输出的来源。

1. 打开开发者工具
2. 转到设置(F1 或通过主菜单)
3. 打开黑盒选项卡
4. 启用复选框
5. 添加一个与您的控制台覆盖文件相匹配的模式
6. 要快乐

来源:https://developers.google.com/web/tools/chrome-devtools/javascript/guides/blackbox-chrome-extension-scripts