如何在 Chrome DevTools Console 的折叠组中记录消息

Question

我有一个脚本可以在 chrome devtools 控制台中生成此输出：

是否可以在此处记录一些内容：（在折叠组的中间）

或者在这里：（折叠组中的所有消息之后）

此输出生成后？

Answer 1

在控制台对象上执行 for in 循环，您将在 Chrome 中找到以下方法。

调试、错误、信息、日志、警告、dir、dirxml、表、跟踪、组、groupCollapsed、groupEnd、清除、计数、断言、markTimeline、配置文件、profileEnd、时间线、timelineEnd、时间、timeEnd、timeStamp、内存

所以你可以做console.log，console.dir等等。

我使用的最好的如下。

console.log -> 用于基本日志记录
console.dir -> 用于对象和集合
console.error -> 错误消息
console.warn -> 用于警告
console.table -> 用于数据（具有正确的格式）
console.group -> 当你想要颜色编码时

我能给你的最好答案就是尝试一下，看看哪一个最适合具体情况。

Answer 2

您的输出只是嵌套控制台组的示例，因此您当然可以在每个折叠组之间记录输出，如下所示：

但是，我发现您正在尝试在记录输出后修改输出。这是不可能的，因为Console API 不保留对其创建的对象的引用。因此，它可能会在不久之后被垃圾收集。

我尝试了一下，看看是否可以重写控制台 API 函数来实现数据存储，以跟踪控制台日志和对每个组的引用。然而，它似乎会导致堆栈溢出，因此可能有一些底层本机代码在起作用。该解决方案即使有效，也不会修改旧的输出，只会输出新的修改版本。

Answer 3

使用

console.groupCollapsed()

。

参见：

https://developer.mozilla.org/en-US/docs/Web/API/Console/groupCollapsed

https://developer.mozilla.org/en-US/docs/Web/API/Console/group

Answer 4

您可以尝试以下方法对控制台输出进行颜色编码。

console.groupCollapsed('\x1b[36m%s\x1b[0m', `${myVar} some text`);

在此代码中：

• \x1b[36m

  是青色文本的 ANSI 转义码。

• %s

  是字符串

  ${myVar} some text

  的占位符。

• \x1b[0m

  将文本后的颜色重置回默认值。

您可以将 36 替换为其他颜色代码以获得不同的颜色：

• 31：红色
• 32：绿色
• 33：黄色
• 34：蓝色
• 35：洋红色
• 36：青色
• 37：白色