← 全部文章

前端窗口

重建后的 Output Console:6 个标签页,无需 DevTools

16 5月 2026 · 作者 JustZix Team

只为读一条日志而打开 DevTools,是一种你每天不假思索地做上百次的上下文切换。重建后的 Output Console 彻底去掉了这次切换:一个只读日志查看器,就活在页面内部,用六个标签页覆盖 console 输出、network 流量、未捕获错误以及 GTM 的 dataLayer。无需按 F12,也没有「机器被锁死」的借口。下面是完整讲解。

Output Console 到底是什么

Output Console 是 JustZix 的一个标签页内开发者窗口 —— 一个由扩展直接渲染进页面 DOM 的「面板」。它是只读的:你不往里面打字。与 JS Console(一个让你运行代码的 REPL)不同,日志会自己流入 Output Console。你把它打开,它就会被填满。

有两种方式打开它:

• 从 JustZix 悬浮按钮菜单打开 —— 一个绑定到规则的持久窗口。
• 用键盘快捷键 Ctrl+Alt+K 打开 —— 一个 TEMP 窗口,即时召唤、用完即关。

它和任何其他 JustZix 面板一样是一个窗口:可以拖动、缩放、挪到一边。它不会挡住下方的页面。

为什么标签页内的日志窗口胜过 DevTools

DevTools 很出色。但它并不总是可用,也并不总是方便。标签页内 console 胜出的具体理由:

• 被锁死的机器。企业策略、kiosk 模式、受管控的 Chrome 配置 —— 大量环境会禁用或隐藏 DevTools。Output Console 只是页面的一部分;没有什么需要解锁。
• 没有上下文切换。日志就紧挨着你正在调试的内容,在同一个视口里。你不必把屏幕一分为二,也不必用停靠面板盖住半个页面。
• 它在简陋环境里照样能用。没有 source map,没有同事忘记安装的扩展,没有「打开 DevTools、切到正确的标签页、清掉过滤器」的仪式。一次点击即可。
• 它随规则一起分发。一个 JustZix 规则包是可分享的。把一个会在特定 URL 模式上打开 Output Console 的规则交给同事,他们就得到了和你一样的调试界面 —— 他们那边零配置。

它不是深度工作场景下 DevTools 的替代品。当你想看清一个页面在做什么而又不想搞那套仪式时,它就是对的工具。

六个标签页,每个都带一个实时计数徽标

窗口被组织成六个标签页。每个标签页都带一个徽标,显示它当前持有多少条目,并随页面运行实时更新:

JZconsole 和 Console 之间的拆分是刻意的。你自己的调试日志不应淹没在页面的噪音里,而页面的噪音也不应淹没你的日志。把它们分开看,或者在 All 下合并着读。

上下文相关的过滤栏

在标签页和搜索框之间,有一条会根据当前激活的标签页而变化的过滤栏。没有单一的全局过滤器 —— 每一类数据都得到对它有意义的控件:

• All —— 没有额外过滤器。它是消防水龙头。
• JZconsole / Console —— 级别复选框:log、info、warn、error、debug。取消勾选某个级别,那些行就会消失。只想看错误和警告?把另外三个取消勾选。
• Network —— 三行控件(资源类型、HTTP 状态类别、大小/时长滑块外加一个域名过滤器)。关于 Network 标签页的深入讲解会详细介绍这些。
• Errors —— 没有复选框;取而代之的是,每个错误都可展开以揭示它的堆栈和细节。
• DataLayer —— 窗口分成两栏(下文细说)。

因为这条栏是上下文相关的,你永远不会滚过无关的控件。Console 标签页不会给你显示域名过滤器;Network 标签页也不会给你显示日志级别复选框。

搜索框

在过滤栏下方,始终可见的是一个搜索框。它是一个对当前标签页中条目生效的实时、不区分大小写的子串过滤器。输入 checkout,列表就随你输入而收窄。按 Esc 即刻清空它。

搜索和上下文过滤器是可叠加的。在 Network 标签页上,你可以把除 4xx/5xx 状态以外的全部取消勾选,然后在搜索框里输入一段路径片段,以锁定某个出错的端点。

可折叠的 console 日志

现实世界中的 console.* 调用会记录对象、数组、大体积负载。原样倾倒出来,二十条这样的东西会让标签页无法阅读。所以 console.* 条目默认是折叠的 —— 每条显示一行简短预览,类似于:

[Checkout][14:22:07] EVENT: {…}

点击该行,它就展开成一棵包含每个参数的完整 JSON 树,风格类似 DevTools —— 钻入嵌套对象、展开数组、读完整个负载。看完后再把它折回去。你得到的是一个可快速浏览的列表,以及按需的完整细节,而非二选一。

Errors 标签页

Errors 标签页收集真正出错的东西:未捕获的异常和未处理的 promise rejection。每个条目都可展开以显示堆栈跟踪和细节,所以你能从「有东西失败了」直达「这个文件的这一行」,而无需离开页面。

有一个值得事先坦白知道的注意点:一次失败的 fetch 或 XHR —— 一个返回 404 或 500 的 API —— 并不是一个 JavaScript 异常。它不会出现在 Errors 标签页里。对于那些情况,你要去 Network 标签页并按 4xx/5xx 状态过滤。Errors 标签页是给抛出错误的代码用的,不是给失败的请求用的。

DataLayer 标签页

如果页面运行着 Google Tag Manager,DataLayer 标签页就是查看 GTM 收到了什么的最快方式。窗口分成两栏:

• 左侧 —— 「New pushes」:按事件顺序排列的 dataLayer.push(...) 调用流。页面发出的每一次 push 都会在发生时出现在这里。
• 右侧 —— 「Current state」:实时的 window.dataLayer 对象,呈现为一棵带索引(0:、1:、…)的可展开 JSON 树。该快照在每次 push 后刷新,且栏头带有全部展开 / 全部折叠按钮。

你能同时看到正在触发的事件和累积起来的状态 —— 不必猜某次 push 是否落地,也不必打开一个标签调试扩展。

window.JUSTZIX 记录器

Output Console 不只是一个被动的查看器 —— 它附带一套供你自己代码使用的日志 API。你在 JS 面板里、在规则动作里、或在页面代码里写的任何东西,都能直接记录进 JZconsole 标签页:

JUSTZIX.log('cart loaded', cart);
JUSTZIX.info('user is logged in');
JUSTZIX.warn('coupon field empty');
JUSTZIX.error('checkout API failed', err);
JUSTZIX.debug('raw payload', payload);

这五个方法对应 JZconsole 过滤复选框所控制的五个级别。别名让它既方便又安全:

• window.__JUSTZIX__ —— 始终可用。
• window.JZ —— 仅当页面尚未拥有 window.JZ 时才可用,因此 JustZix 永远不会覆盖站点自己的全局变量。

因为你的日志落在它们自己的标签页里,无论页面原生的 console 多么聒噪,它们都保持可读。

一次实用的首次会话

1. 在你想检视的页面上按 Ctrl+Alt+K —— Output Console 作为 TEMP 窗口打开。
2. 从 All 开始,先摸清全貌,然后转到要紧的那个标签页。
3. 在调试你自己的规则?撒上一些 JUSTZIX.log(...) 调用并盯着 JZconsole。
4. 页面行为异常?到 Errors 看抛出的代码,到 Network 看失败的请求。
5. 在审计分析埋点?打开 DataLayer 并触发用户流程。
6. 用级别复选框和搜索框收窄任何东西;Esc 清空搜索。

另见

• 深入 Network 标签页 —— 一个无需 DevTools 的 network 面板
• JustZix 示例 —— 即用型 CSS 与 JS 规则

重建后的 Output Console 把「打开 DevTools 然后翻找」变成了「瞥一眼页面旁边的标签页」。下载 JustZix —— 它免费,可在 Chrome 100+ 上运行,大约两分钟即可安装完成。