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

Question

My code works but with additional parenthesis like myfunction()(); . It should execute with single parenthesis just like normal eg myfunction(); .

I'm building console.time(); console.timeEnd(); console.time(); console.timeEnd(); polyfill for browsers (eg <IE10) which do not have native built-in. Note: I have bind() polyfill in-case you think <IE10 does not have it.

Here is my code in "polyfill.js file".

(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');
            }
        };
    }
}());

Now in another file "main.js file", when I use console.time(); console.timeEnd(); console.time(); console.timeEnd(); , it should log code-line-number of this file in browser console (not the line-number of polyfill.js file). Of-course it works but notice additional parenthesis "()()" below which is not cool.

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

I have consulted these 2 stackoverflow questions, but couldn't come up with the right answer.

• Wrapping a wrapper of console log with correct file/line number?
• A proper wrapper for console.log with correct line number?

I also checked new Error().stack; as an option, but it is also not supported in those browser for which I'm building my polyfill.

Note: If anyone can suggest a solution with eval(); , you can. It is also acceptable for me.

Answer 1

There is in fact a function for that called console.trace , which you can read more about in the MDN page . What it does is print the entire stack trace to the line where it has been called from.

So, for example, running the next code:

function firstFunc() {
  secondFunc();
}

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

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

will print out this output in the console:

Calling firstFunc:

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

Notice that in the given output, all functions are being called and defined in the Chrome console, hence the @ VM141: . Generally, it prints the file instead of VM. So, had it been located in an index.js file, it would look like this:

Calling firstFunc:

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

Compatibility Note

The above method works for any sane browser, and IE11+. That is due to the implementation of console.trace only in IE11. However, per OP's request, I can think of a creative way to support IE10, and that is by using the Error.prototype.stack property . Now, of course, as MDN itself mentions it, it's a non-standard feature that should not be used in production, but neither is supporting IE6.

By creating an Error instance and then printing its stack, you can achieve a similar result.

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