如何用 console.log 省略 file/line 数字

Question

在 Chrome 的控制台中，这些天你可以写出非常棒的东西。签出 this link。我也截图了：

正如您在屏幕截图中看到的，文件名/行号 (VM298:4) 写在右侧。是否有可能删除它，因为在我的例子中这是一个很长的名字，或多或少地破坏了我试图在我的控制台中制作的效果？

Answer 1

另一种选择是使用 sourceURL

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

//# sourceURL=new_file_name.js

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

使用 queueMicrotask 和 console.log.bind 在记录时丢失源文件信息：

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

如果有多个调用，排队微任务将保持日志记录的顺序，而 setTimeout 不保证按顺序执行任务。

Answer 4

为了保持您的日志语句干净，您可以定义以下函数并简单地使用 console.print 来记录而不使用 filename/line 数字：

// 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');

如何用 console.log 省略 file/line 数字

How to omit file/line number with console.log

javascript

browser

google-chrome-devtools

console.log