console.group 和 console.groupEnd 用于控制台日志分组折叠，必须成对使用且严格嵌套；支持 groupCollapsed 默认收起、配合 time 计时，但需防漏闭合与深层嵌套异常。
console.group 和 console.groupEnd 的基本用法
它们不是 HTML 功能，而是浏览器 DevTools 中 console 对象提供的原生方法，用于在控制台中折叠/展开日志块。直接调用即可生效，不需要任何 HTML 标签或 DOM 操作。
关键点：必须成对使用，console.groupEnd() 必须出现在对应 console.group() 之后，否则会报错或行为异常。
-
console.group("加载流程")后续所有console.log()、console.warn()等都会被收进该组 -
console.groupEnd()关闭最近一次打开的组（类似栈结构） - 支持嵌套：多次
console.group()会产生缩进层级
嵌套分组时容易漏掉的配对问题
常见错误是嵌套后忘记按顺序关闭，比如：
console.group("A");
console.group("B");
console.log("inside B");
// 忘了 console.groupEnd() 这里
console.groupEnd(); // 这里实际关闭的是 B，但 A 还开着
结果是控制台可能显示“Group collapsed”但无法展开，或后续日志意外被归入上层组。Chrome 会在未闭合时在控制台底部提示 “console.groupEnd() called without matching console.group()”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 每个
console.group()都要严格对应一个console.groupEnd() - 建议写完
console.group()就立刻补上console.groupEnd()，再填内容，避免遗漏 - 用代码编辑器的括号匹配高亮功能辅助检查
用 console.groupCollapsed 替代 group 实现默认收起
如果日志组信息量大、调试时不想默认展开，直接用 console.groupCollapsed() 更合适——它和 console.group() 行为一致，只是初始状态为折叠。
-
console.groupCollapsed("网络请求")→ 控制台显示带箭头的可点击标题行 - 不会影响性能，只是 UI 展示方式变化
- IE 不支持
console.groupCollapsed()，但现代 Chrome/Firefox/Safari 均支持 - 与
console.groupEnd()的配对规则完全相同
配合 console.time 和条件日志提升可读性
分组常和计时、条件输出组合使用，比如追踪某段逻辑耗时并隔离日志：
console.group("用户登录流程");
console.time("login-total");
await fetch("/api/login", { method: "POST" });
console.timeEnd("login-total");
console.log("响应已接收");
console.groupEnd();
注意：console.time() 和 console.timeEnd() 不受分组影响，它们全局生效；但把它们包进 console.group() 里，能让时间和相关日志视觉上归属同一上下文。
- 不要在
console.group()外写console.timeEnd()，否则时间可能被误判为其他组内操作 - 生产环境记得移除或用
if (process.env.DEBUG)包裹，避免污染输出 - 某些低版本 Safari 对嵌套超过 5 层的 group 渲染异常，建议控制在 3 层以内
console.groupEnd() 或嵌套错位，控制台输出就会失序，反而增加排查成本。 
