在Firefox控制台中记录源代码链接

Question

我正在编写一个使用console.log()的日志记录器。当我调用日志记录器方法而不是console.log()时，每个日志行都显示相应于调用console.log()的代码行的相同位置。 我想在消息中包含一个链接，可以显示生成日志的行。

在Google Chrome中，可以记录URL和行号以及列号（由冒号分隔），它会自动转换为链接。如果我点击链接，就可以查看指定行的源代码。这是一个示例：

// press F12 and click on link in the console log, this will open the source code in the "Sources" tab at line-column 3:5
console.log('http://akfs.nspmotion.com/test/example.js:3:5');

<script src="http://akfs.nspmotion.com/test/example.js"></script>

在Firefox控制台中是否有任何方法可以实现类似这样的功能？

- jcbp

---

我对你的需求感到困惑。请发布一张图片或更多的描述。我的困惑在于，几乎每个 console.log() 都有一个链接显示在输出右侧，该链接显示了脚本名称、行号和 console.log() 发生的位置。文件名是一个链接，可以在调试器中或在单独的选项卡中打开，并显示 JavaScript 文件的完整内容以及跳转到行号。除此之外，您还需要什么？ - Makyen

看起来你在问题中放了一个不可见的 JSFiddle 链接。请[编辑]问题，将 JSFiddle 中的代码包含在问题中。你应该考虑将它放在一个片段中。当你尝试发布这个问题时，可能已经被告知链接到 JSFiddle 必须包含代码。为什么你不在问题中直接包含单行代码呢？由于版权问题，我们不能为你复制代码。你需要[编辑]问题。 - Makyen

谢谢您的回复。我已经包含了一小段代码，并解释了我想要做什么。 - jcbp

我不相信你特别想要的东西是可能的。然而，你可以通过使用 console.trace() 得到接近的结果。 - Makyen

Answer 1

目前在Firefox DevTools中还没有将包括行和列信息的日志URL链接到调试器的功能。因此，我现在已经在bug 1360447中请求该功能。

- Sebastian Zartner

Answer 2

在查看我其中一个代码库的确切问题后，我发现没有办法创建一个字符串，当打印到Firefox（113.0.2）控制台时，能够像标准的console.log(*)函数一样链接回源文件/行。

我的解决方案是通过使用'groupCollapsed'打印一个CSS格式化的日志，然后在组内打印跟踪信息（尽管它包含了一些日志类的堆栈部分，但仍然会生成可点击的链接，可以将您带到Firefox的调试面板中的源代码位置。

// Configure logging styling and function using a bit field
let consoleCSS = "background-color: white; color: black";
let consoleFunc = console.log;
if((logItem.level & CRITICAL) !== 0) { consoleCSS =      "background-color: #FDF2F5; color: #A4000F"; consoleFunc = console.error; }
else if((logItem.level & ERROR)    !== 0) { consoleCSS = "background-color: #FDF2F5; color: #A4000F"; consoleFunc = console.error; }
else if((logItem.level & TRACE)    !== 0) { consoleCSS = "background-color: white; color: black";     consoleFunc = console.trace;}
else if((logItem.level & WARN)     !== 0) { consoleCSS = "background-color: #FFFBD6; color: #715100"; consoleFunc = console.warn;}
else if((logItem.level & INFO)     !== 0) { consoleCSS = "background-color: white; color: black";     consoleFunc = console.info;}
else if((logItem.level & DEBUG)    !== 0) { consoleCSS = "background-color: white; color: black";     consoleFunc = console.debug;}
else if((logItem.level & LOG)      !== 0) { consoleCSS = "background-color: white; color: black";     consoleFunc = console.log;}

if(logItem.level)
{
    // Print a formatted log message with timestamp, level, component and message
    const logMessage = `${logItem.timestamp}: ${logItem.level.toString} : ${logItem.component} :  ${logItem.content}`;
    //print a collapsed group styled to look appropriate but holding a stack trace inside
    console.groupCollapsed( "%c%s",consoleCSS,logMessage );            

    //print message with normal console func - log, error, warn, etc
    consoleFunc( logMessage );

    //output a stack trace (which is clickable in firefox)
    console.trace();

    //close the console group
    console.groupEnd();
}

这是在Chrome中的输出 还有在Firefox中

- Benjamin Van Citters