如何将 console.log 绑定到另一个 function 调用，以便我可以在调用它的控制台中看到脚本的行号？

Question

我的代码有效，但有额外的括号，如myfunction()(); . 它应该像正常情况一样用单括号执行，例如myfunction(); .

我正在构建console.time(); console.timeEnd(); console.time(); console.timeEnd(); 用于没有本机内置的浏览器（例如 <IE10）的 polyfill。 注意：我有 bind() polyfill 以防你认为 <IE10 没有它。

这是我在“polyfill.js 文件”中的代码。

(function() {
    'use strict';
    var console=window.console,  timers={};
    
    if (!console.time) {
        
        console.time = function(name) {
            var datenow = Date.now();
            name = name? name: 'default';
            if (timers[name]) {
                console.warn('Timer "'+name+'" already exists.');
            }
            else timers[name] = datenow;
        };
        
        console.timeEnd = function(name) {
            var datenow = Date.now();
            name = name? name: 'default';
            if (!timers[name]) {
                console.warn('Timer "'+name+'" does not exists.');
            }
            else {
                var endt = datenow - timers[name];
                delete timers[name];
                //below is the line where some changes are needed, But I don't know how.
                return window.console.log.bind(window.console, name+ ': ' +endt+ 'ms');
            }
        };
    }
}());

现在在另一个文件“main.js 文件”中，当我使用console.time(); console.timeEnd(); console.time(); console.timeEnd(); ，它应该在浏览器控制台中记录此文件的代码行号（而不是 polyfill.js 文件的行号）。 当然它可以工作，但请注意下面的附加括号“()()”并不酷。

console.time();
//any code for performance test goes here.
console.timeEnd()(); //Note here "()()". It should be single "()"

我已经咨询了这 2 个 stackoverflow 问题，但无法得出正确答案。

• 用正确的文件/行号包装控制台日志的包装器？
• 具有正确行号的 console.log 的正确包装器？

我还检查了new Error().stack; 作为一个选项，但我正在为其构建 polyfill 的那些浏览器也不支持它。

注意：如果有人可以用eval(); ， 你可以。 这对我来说也是可以接受的。

Answer 1

实际上有一个名为console.trace的 function，您可以在MDN 页面中阅读更多相关信息。 它所做的是将整个堆栈跟踪打印到调用它的行。

因此，例如，运行下一个代码：

function firstFunc() {
  secondFunc();
}

function secondFunc() {
  console.trace('I was called here!');
}

console.log('Calling firstFunc:');
firstFunc();

将在控制台中打印出这个 output：

Calling firstFunc:

I was called here!
secondFunc @ VM141:6
firstFunc @ VM141:2
(anonymous) @ VM141:10 // Internal browser trace

请注意，在给定的 output 中，所有函数都在 Chrome 控制台中被调用和定义，因此@ VM141: 。 通常，它打印文件而不是 VM。 因此，如果它位于index.js文件中，它将如下所示：

Calling firstFunc:

I was called here!
secondFunc @ index.js:8

兼容性说明

上述方法适用于任何健全的浏览器，以及 IE11+。 这是由于仅在 IE11 中实施了console.trace 。 但是，根据 OP 的要求，我可以想到一种支持 IE10 的创造性方法，那就是使用Error.prototype.stack属性。 现在，当然，正如 MDN 本身提到的那样，它是一个不应该在生产中使用的非标准功能，但也不支持 IE6。

通过创建一个 Error 实例然后打印它的堆栈，您可以获得类似的结果。

const sumWithTrace = (num1, num2) => {
  console.log(new Error().stack); // Creating a new error for its stack property
  return num1 + num2;
};

sumWithTrace(1, 5); // returns 6 and prints trace in console