如何使用console.log省略文件/行号

Question

现在你可以在 Chrome 的控制台中编写非常好的东西。查看this链接。我还截图了：

正如您在屏幕截图中看到的那样，文件名/行号（

VM298:4

）写在右侧。是否可以删除它，因为在我的情况下，这是一个很长的名称，或多或少会破坏我试图在控制台中实现的效果？

Answer 1

为了保持日志记录简洁，您可以将

console.print()

定义为函数，然后简单地使用

console.print()

，就像使用

console.log()

进行日志记录一样，无需文件名/行号：

// console.print: console.log without filename/line number
console.print = function (...args) {
    queueMicrotask (console.log.bind (console, ...args));
}

console.print

采用与

console.log

相同的参数，例如：

console.print("Text with no filename info.")

console.print('%c Custom CSS and no line numbers! ', 'background: #555555; color: #00aaff');

Answer 2

这很简单。您需要将

setTimeout

与

console.log.bind

:

一起使用

setTimeout (console.log.bind (console, "This is a sentence."));

如果您想对其应用 CSS 或其他文本，只需添加

%c

或任何其他

%

变量：

setTimeout (console.log.bind (console, "%cThis is a sentence.", "font-weight: bold;"));
var css = "text-decoration: underline;";
setTimeout (console.log.bind (console, "%cThis is a sentence.", css));

注意，该方法将始终被放置在日志列表的末尾。例如：

console.log ("Log 1");
setTimeout (console.log.bind (console, "This is a sentence."));
console.log ("Log 2");

将显示为

Log 1
Log 2
This is a sentence.

而不是

Log 1
This is a sentence.
Log 2

我希望这能回答您的问题。

Answer 3

另一种选择是使用 sourceURL

为源脚本文件提供较短的名称

//# sourceURL=new_file_name.js 

Answer 4

使用

queueMicrotask

和

console.log.bind

来在记录时丢失源文件信息：

queueMicrotask (console.log.bind (console, "Look! No source file info..."));

如果有多个调用，排队微任务将保持日志记录的顺序，而

setTimeout

不能保证按顺序执行任务。

Answer 5

好吧，听起来很奇怪，但以上解决方案都不适合我，而且我在 codepen 中。 但我在我的脚本顶部添加了这些行以及答案中的 console.print，并且它起作用了。

//# sourceMappingURL-=
//# sourceURL-=