console.log with line numbers2019-02-17

Have you ever wished for console.log to prepend a line number in front of the log statement so that you can quickly figure out which part of your code is executing? Manually adding them is tedious and error-prone, we have to update every line numbers whenever we updated our code.

Is there a way to automatically add the line numbers to every console.log statements? Without the help of transpiler plugin like babel, just in vanilla JavaScript?

Let's build a line-logger to replace our console.log function.

const STACK_LINE_REGEX = /(\d+):(\d+)\)?$/;

function lineLogger(...log) {
  let err;

  try {
    throw new Error();
  } catch (error) {
    err = error;
  }

  try {
    const stacks = err.stack.split('\\n');
    const [, line] = STACK_LINE_REGEX.exec(stacks[2]);

    return this(`[${line}]`, ...log);
  } catch (err) {
    return this(...log);
  }
}

lineLogger.call(console.log, 'foobar');
lineLogger.call(console.error, 42);

So lots of things is happening here, in short, the basic idea is that we can get the line number through stack trace by throwing an error. Then we just need to parse the stack trace and select the nearest function call where we call lineLogger() and print them. Here is the actual output in action.

[22] foobar
[23] 42

Just thought of it the other day and also almost immediately after that thought that it's super pointless 😂. In practice, you should use a transpiler plugin to do such things. Throwing errors and generating stack trace for each of them is going to harm performance. However, as just a funny trick to do only during debugging, I think it is pretty interesting and we can learn more about the stack trace from it.

Obviously, I'm not the first one to ever thought of it either. A quick search on npm can find a lots of similar concept packages already sitting out there, each with different and even more interesting approach. I recommend to go to see their source code, they're actually brilliant.

Edit on GitHub