使日志在 JS 行中跳转 - Javascript

有时在调试 JavaScript 代码时，我们需要检查日志并查看导致问题的行号。在控制台中，每个日志条目都需要手动展开以查看其源代码位置。但是，我们可以使用 JavaScript 的 console 对象的 trace() 方法来实现将日志链接到其源代码位置。

使用 console.trace()

console.trace() 方法会输出一个表示函数调用堆栈的跟踪信息。例如：

function foo() {
  console.trace();
}

function bar() {
  foo();
}

bar();

输出：

trace@debugger eval code:3:3
foo@debugger eval code:2:3
bar@debugger eval code:6:3
@debugger eval code:8:1

trace 的输出包含了每个函数调用的文件名、行号和方法名。

结合源代码链接

为了使跟踪链接到其源代码位置，我们需要在 console.trace() 输出的行号的位置添加一个链接，该链接将导航到源代码的行。

以下代码片段提供了一个在控制台中添加源代码链接的函数 logWithLink() 的示例实现。

function logWithLink() {
  var trace = console.trace().split('\n');
  var link = trace[1].replace(/^[^(]*\(|:[^:]*$/g, '').split(':');
  var lineNumber = link[link.length - 2];
  var filename = link.slice(0, -2).join(':');

  console.log.apply(console, arguments);

  var messageNode = Array.prototype.slice.call(document.querySelectorAll('.console-message-body')).find(function(node) {
    return node.textContent.indexOf(arguments[0]) !== -1;
  });

  if (messageNode) {
    var anchor = document.createElement('a');
    anchor.href = 'vscode://file/' + filename + ':' + lineNumber;
    anchor.textContent = ' [source]';
    anchor.style.color = 'gray';
    messageNode.appendChild(anchor);
  }
}

该函数首先调用 console.trace() 并解析输出以获取日志的行号和文件名。然后，它在消息体中找到文本匹配项并在其末尾添加一个源代码链接。该链接将跳转到 vscode（可以按需替换为其他代码编辑器） 中指定的文件名和行号。

使用示例：

function foo() {
  logWithLink('debugging foo');
}

function bar() {
  foo();
}

bar();

输出结果：

debugging foo
    at foo (example.js:2:3) [source]
    at bar (example.js:6:3)
    at global (example.js:8:1)

此时，可以单击日志链接以直接定位到源代码行。

结论

在 JavaScript 开发中，日志记录是一项必不可少的工具。而将日志链接到其源代码位置可以帮助我们更快地找到代码中的问题。console.trace() 方法和 logWithLink() 函数是实现该功能的有用工具。