Chrome、Firefox等浏览器中能否实现多控制台或多输出流分离？

Chrome、Firefox均原生支持输出流分离，也可以通过自定义封装实现更灵活的分流效果，具体实现方式如下：

原生控制台内置功能 #

• 级别过滤：两者默认支持按log/info/warn/error四个基础日志级别过滤输出，你可以将不同业务模块的输出绑定到对应级别，在控制台顶部的级别筛选栏勾选需要查看的级别即可隐藏其他无关内容。
• 关键词过滤：你可以给不同模块的输出添加统一的固定前缀，比如[网络层]、[状态管理]、[UI渲染]，直接在控制台的搜索框输入对应前缀即可仅展示该模块的输出，两款浏览器都支持保存自定义过滤规则，无需每次重复输入关键词。
• 自定义分组（类多标签页效果）：Chrome 100+、Firefox 98+以上版本支持在控制台侧边栏添加多个自定义过滤规则，每个规则对应一个独立分组，点击不同分组即可快速切换不同输出流，和你提到的多控制台标签页效果一致。
• 多控制台同时展示：Chrome可以通过Esc快捷键呼出抽屉式副控制台，副控制台和主控制台可以分别设置不同的过滤规则，同时展示两类输出内容；Firefox支持将控制台拆分为独立窗口，和内置控制台同时使用，分别配置过滤规则。

自定义代码封装方案 #

如果需要更高自由度的分流，甚至导出独立日志文件，可以自行封装日志工具：

// 多模块日志封装示例
const logger = {
  network: (...args) => console.log('%c[Network]', 'color: #2196F3; font-weight: bold', ...args),
  store: (...args) => console.log('%c[Store]', 'color: #4CAF50; font-weight: bold', ...args),
  render: (...args) => console.log('%c[Render]', 'color: #FF9800; font-weight: bold', ...args)
}

// 调用示例
logger.network('请求发起', { url: '/api/info', method: 'GET' })
logger.store('状态变更', { oldVal: { id: 0 }, newVal: { id: 1 } })

• 上述封装给不同模块的输出添加了差异化的颜色标识，在控制台中可直观区分，同时也支持直接按前缀关键词过滤。
• 如果需要导出独立日志文件，可以在封装中添加对应模块的日志内存缓存逻辑，需要导出时将对应缓存内容序列化为文本文件下载即可。

内容的提问来源于stack exchange，提问作者UXK