← 全部文章

前端窗口

在任何页面上用 JS Console —— 带 ↑↓ 历史的 REPL，无需 DevTools

15 5月 2026 · 作者 JustZix Team

F12 → Console → 打点东西 → 点了别处 → 屏幕重新排布，DevTools 没了。或者更常见的：客户在房间里时你不想开着 DevTools。JustZix v2.13.66+ 有了 JS Console —— 页面上一个终端风格的悬浮 REPL。Ctrl+Enter、↑/↓ 历史、Ctrl+L = 清屏，捕获页面上下文里的每一条 console.log。

它和 DevTools 的 Console 有何不同

功能上：

• JS Console 活在页面上 —— 一个带头部和两个区域（输出日志 + 输入文本框）的悬浮窗口。它不会在切换焦点时消失，也不会在刷新时关闭。
• 按标签页持久化 —— 输入草稿、输出日志（最多 200 行）、命令历史（最多 100 条）—— 全在 sessionStorage 里。刷新标签页 → 一切还在。DevTools 的 Console —— 刷新时输出被清空。
• 作用域层级 —— Console 只出现在匹配它所属文件夹/分组/规则 URL 模式的页面上。每个项目有不同的配置。
• 多设备同步 —— 你在笔记本和工作机上都有一个「调试 Stripe」的 Console。命令历史不同步（sessionStorage 按标签页），但窗口本身会同步。

相同的地方：页面上下文。你的代码可以访问 window、document、页面的全局变量（例如 React+Redux 应用里的 app.store）。同一个求值引擎，同一个作用域。

60 秒内首次使用

1. 在 JustZix 选项里选一个带相关 URL 模式的文件夹/分组/规则。
2. 点击「窗口」→ 弹出带 CSS pane + JS pane + JS Console 列表的模态框。选「+ Console」。
3. 输入一个名字（「Stripe REPL」），颜色（默认紫色 #7C3AED）。
4. 访问一个匹配的 URL —— Console 作为悬浮窗口出现（锚定在右上角）。
5. 在输入框里打 document.title，按 Ctrl+Enter。输出显示 > document.title（命令回显）+ "真正的页面标题"（结果）。

键盘快捷键

历史：最多 100 条，对上一条命令去重（不会重复），按标签页持久化在 sessionStorage 里。↑/↓ 只在你处于文本框边界时生效 —— 让你能在多行代码里正常导航。

捕获 console.log/warn/error/info（v2.13.67）

你的求值可以调用 console.log('x') —— 它会出现在 Console 输出里、命令的下方：

> console.log('hello'); 42
[log] hello
  42

先是被记录的值，然后是返回值。对 console.warn、console.error、console.info 也同样有效 —— 每个都有自己的前缀（[warn]、[err]、[info]）和颜色。

额外好处：如果页面本身在你求值期间从页面上下文里记录了什么（例如你代码里的一个 fetch 记录了一个 XHR 错误），你会在 Console 里看到它。这对调试是金矿 —— 分析师能精确看到底层发生了什么。

你真正能查什么

1. 把 fetch 加进规则前的快速测试

> fetch('/api/products/12345').then(r => r.json()).then(console.log)
[log] {id: 12345, name: "...", price: 99.99}

验证端点是否返回你预期的东西。无需打开 DevTools 的 Network 面板。

2.「Redux 里有什么」

> window.__REDUX_DEVTOOLS_EXTENSION__?.connect?.(); store?.getState?.()
  {user: {...}, cart: {...}, products: [...]}

一键 dump 当前状态，无需安装 Redux DevTools。

3.「这个页面上有多少个 h2」

> document.querySelectorAll('h2').length
  47

检查页面结构，预先验证 CSS 选择器。

4. 一次性覆盖

> document.querySelectorAll('.ad').forEach(el => el.remove())
  undefined

纯粹是破坏性的，只一次。你不想为此写一条 CSS/JS 规则 —— 你只想要这个动作执行一次。Console 给你零成本的 JS。

5. 教学用途

你在教一名初级开发，或者一个没有 DevTools 经验的人。你演示 typeof null、[].map(x => x + 1)、Array.from('hello')。页面上的 Console 比 DevTools 没那么吓人。

作用域层级 —— 只在 *shop* 上的「调试 GA」Console

一个挂到「电商」文件夹的 JS Console 出现在每个匹配 shop.com/* 的页面上。不会在 YouTube 上。不会在 Gmail 上。一个挂到 dashboard.stripe.com/* 的「Stripe Dashboard」Console —— 在别处没用，所以不会出现。每个项目都有自己的 REPL。

此外：为当前页面隐藏（点击 pane 头部的 ✕，或右键 → 隐藏）—— Console 在当前标签页消失。刷新标签页 = 恢复（sessionStorage 标志被重置）。

坑

• 异步求值 —— 不带包装的 await fetch(...) 不起作用（没有顶层 await）。把它包进一个 IIFE：(async () => { const r = await fetch(...); console.log(await r.json()); })()。或者用 .then(...)。
• sessionStorage 上限 —— 保留最后 200 行输出，更老的会被裁掉（这样 storage 不会无限增长）。历史最多 100 条命令。
• 刷新标签页 = 不丢输出。关闭标签页 = 丢失。如果你想保留什么 —— 把它复制到外部文件，或一条永久 JS 规则里。
• 沙箱化的 iframe —— Console 不会显示在 iframe 内容里（除非 iframe 的 URL 单独匹配某个作用域模式）。跨源 iframe = 单独的作用域。

接下来做什么

JS Console 是 JustZix 4 种「页内窗口」中的第 3 种。第一种（CSS pane）—— 实时 CSS 编辑器。第二种（JS pane）—— 带按需运行的持久 JS 代码。第三种（Console）—— REPL。第四种（Output Console）—— 给用户 JS 用的自定义日志器，已在计划中。

安装 JustZix，在每个标签页里都有一个 REPL，无需 F12。