console.log 调试器中的行号

Question

我正在寻找一种制作日志功能的简单方法。

我正在调用函数 logSuc("return from Prom")，函数在第 30 行。

因此代码将始终指向该函数的第 30 行。在控制台中：

所以说有这个代码：

const logSuc = (msg) => {
   console.log(`%c ${msg}`, 'background: green; color: white; display: block;'); 
};

备选方案可以是：

const log = console.log;
function red(msg) {
  return `%c ${msg}`, 'background: red; color: white; display: block;';
}
log(red('its red');

但现在我有两个函数，我想保持简短

所以问题是我的logSuc("")总是指向第30行。

但我希望它指向我调用 logSuc("that worked").

的行

Answer 1

您在 console.log 上使用 Function.prototype.bind 获得的函数将指向调用它的行号。它有点受限，但如果你只想传递一个字符串参数，它会起作用：

const logSuc = console.log.bind(console, '%c %s',
    'background: green; color: white');

已在 Firefox 和 Chrome 中测试。

对于更复杂的行为，您可以手动黑盒包含日志记录功能的脚本，如 this answer 中所述 Chrome 并通过在调试器中激活脚本上的“黑盒”按钮Firefox（在 {} Pretty print source 旁边，一个眼睛图标）。

Answer 2

我建议您将 console.log 替换为 console.trace。这样你就可以看到电话是从哪里来的，从而解决你的问题。

console.log line number in debugger