javascript - Chromium console.error 内部实现 - 是什么导致错误堆栈中文件的超链接路径？

Question

我注意到使用时可见的错误堆栈console.error能够使 URI 超链接。这种格式化也发生在浏览器 Devtools 和我使用的 IDE 中（带有集成 Git Bash 终端的 WebStorm）。

示例屏幕（这来自 Jest 测试框架，但在通常的console.error调用中也提供了此类超链接）：

由于 Node.js 在底层使用 Chrome 的 V8 JS 引擎，我试图调试console.error内部实现，但我在这行代码上碰壁 了——它使用流来输出错误消息，之前它只是一个没有任何特殊的字符串格式化（新行除外），然后成为控制台中的格式化输出（包括超链接）。我不知道下面会发生什么。

该Console.prototype.error方法似乎是通过为其分配Console.prototype.warn方法来创建的，这令人困惑。此外，Devtools 控制台的检查功能在调试 Node.js时不会导航到console方法的实现，即使 Node 的代码比浏览器的代码更易于访问——我的意思是可以在一定程度上调试 Node 的内部结构，即不是浏览器中的东西。

我的问题：是否可以以可控的方式将超链接内容（我的意图是超链接到模块的路径）输出到控制台输出？

出现了这个问题，因为我正在为console我在项目中使用的方法编写一个 Node.js 包装器，并且因为我注意到调用堆栈中文件的超链接，所以我想在我的包装器中使用该功能。我知道有一些库可以包装console并提供大量功能，但我想要一个小型包装器，只包含一两个功能。如果有人知道提供到控制台输出的这种可控超链接的库，我会很感激分享一个链接，所以我可以查找它的实现。

标签： javascripthyperlinkconsolechromium

Answer 1

IDE

正如其他人在评论中已经提到的那样：链接是 IDE/文本编辑器的一项功能。您可以提供文件路径，但可能无法单击，具体取决于您的 IDE/文本编辑器。例如，console.error(`${__filepath}:${line}:${column}`)

浏览器（基于 Chromium）

是的，这在某种程度上是可能的。只需在文件路径前加上file:///.

// index.js

const line = 2;
const column = 9;

console.error('ERROR: ', `file:///${__filename}:${line}:${column}`.replace(/\\/g, '/'));
console.log('done'); // set a breakpoint here inside of devtools

1. 跑node --inspect-brk index.js
2. 打开chrome://inspect
3. 选择Open dedicated DevTools for Node（这将使源在 Devtools > Sources > Node 中可见）或在节点进程下检查。
4. 允许代码运行到您的断点。检查控制台并单击链接

笔记

• replace(/\\/g)将确保路径有效（至少在 Windows 上）
• 这是file:///链接在浏览器中工作的少数几个地方之一。
• 您还可以生成源地图并链接到sourceMappingURL
  https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map