CSS pane：在任何页面上实时编辑 CSS，无需 DevTools
CSS 实验的标准流程：打开 DevTools，点 Elements，找到节点，改内联样式，刷新 —— 然后一切都没了。JustZix v2.13.40+ 有了 CSS pane —— 一个注入到页面里、带实时 <style> 注入的悬浮文本框。你打 CSS，200 毫秒内看到改动，内容在标签页内的刷新之间持久保留。无需 DevTools，无需 F5。
它具体是什么
一个 CSS pane 是页面上一个可拖动的小窗口（fixed，z-index 2147483640），带一个头部（彩色圆点 + 名称）和里面的一个文本框。你打的内容经过 200 毫秒防抖后进入 <head> 里的 <style id="jz-pane-style-{id}"> —— 你立刻看到效果。内容存在那个标签页的 sessionStorage 里 —— 刷新页面，内容还在；关闭标签页，没了（这是有意的：pane 是一个草稿本，不是永久存档）。
30 秒内创建你的第一个 pane
- 打开 JustZix 选项 → 选一个有 URL 匹配的文件夹、分组或规则。
- 点击「CSS panes (0)」→ 弹出带列表的模态框。点击「+ 添加新 CSS pane」。
- 输入一个名字（「Test」），为圆点选一种颜色 —— 自动保存。
- 访问一个匹配作用域的页面。在右上角（默认锚点）出现 pane。
- 输入
body { background: red; }—— 页面背景在 200 毫秒后变红。
实时预览 —— 防抖与清空
200 毫秒防抖的存在，是为了让快速打字不会把回流刷爆。实际上几乎察觉不到 —— 0.2 秒后改动就可见了。要清掉所有样式：把文本框清空。pane 内部会向 <style> 写入一个空字符串，所以清空也是即时的。
选择器：就像在真正的规则里那样写。常常需要 !important，因为宿主网站有自己的样式。你用 pane 主要是为了测试 —— 当你对结果满意时，把 CSS 复制到一条真正的规则里（规则卡片上的 CSS 标签页）以便永久使用。
按标签页持久化（sessionStorage）
你打的一切都进入当前标签页的 sessionStorage['jz_pane_{id}_content']。后果：
- F5 / 标签页内导航 —— 内容持久保留。pane 重新挂载，文本框从 storage 里重新读取。
- 同一作用域上的新标签页 —— pane 显示为空。每个标签页都是一个单独的草稿本。
- 关闭标签页 —— 内容丢失。不会有「我不小心丢了半小时的工作」—— 关闭 = 有意识地丢弃草稿本。
当你做出了想保留的东西 —— 把它挪到选项里的一条普通 CSS 规则。pane 不是长期保存代码的地方。
多面板 —— 一个页面上 3 个窗口
你可以在同一作用域里有任意数量的 CSS pane。每个都是 head 里一个独立的 <style>，每个都在 sessionStorage 里拥有自己的内容。在实践中：
- Pane 1：「头部覆盖」—— 对顶栏做实验。
- Pane 2：「隐藏广告」—— 几种不同的反广告选择器变体。
- Pane 3：「表单修复」—— 输入框宽度、标签字号。
每个用不同的圆点颜色（绿、红、蓝）。一眼就能在视觉上看清你有 3 套互相独立的样式。
作用域层级（文件夹 → 分组 → 规则）
一个 pane 可以挂到文件夹、分组或规则上：
| 作用域 | pane 何时出现 | 使用场景 |
|---|---|---|
| 文件夹 | URL 匹配 folder.urlPatterns | 对整个商店做 CSS 实验 |
| 分组 | 文件夹匹配 + 分组的 URL 过滤 | 按板块做实验（例如结账） |
| 规则 | 文件夹 + 分组 + 规则的 URL 过滤 | 对某个特定页面做实验 |
继承关系：在分组视图里你看到自身的 pane + 从文件夹继承来的。在规则视图里 —— 自身的 + 分组的 + 文件夹的。和 CSS/JS 规则一样 —— 完整的层级。
分享给同事
pane 走的是和规则一样的同步机制。生成一个分享链接 → 接收者也会收到你的 pane。使用场景：
- 一名前端顾问进入客户的商店，在一个「头部重做」pane 里做实验。
- 点击「分享」—— 链接 24 小时有效。
- 客户在他的 Chrome 里打开链接 → 导入 → 「头部重做」pane 出现在他那里。
- 客户在自己的标签页里看到结果。批准了？顾问就把 pane 内容复制到一条永久 CSS 规则里。
坑
- sessionStorage 可能被禁用（沙箱化的 iframe、隐私模式等）—— 内容不会持久保留，但实时注入仍然有效。
- CSS pane 不是 CodeMirror —— 一个简单的文本框，MVP 里没有语法高亮。升级到 CodeMirror 已在计划中，但对草稿本式的使用来说足够了。
- pane 可能盖住页面的重要元素 —— 抓住头部把它拖到另一个角落。位置按浏览器窗口持久保存（chrome.storage），这样其他标签页会记得它。
- 小视口上 3 个以上的 pane 可能重叠。吸附连接（把一个 pane 拖到另一个上）会创建一个「分组」—— 移动一个，整组跟随。
接下来做什么
CSS pane 是 JustZix 4 种「页内窗口」中的第一种。接下来两种是 JS pane（按需运行的 JavaScript）和 JS Console（带 ↑↓ 历史记录的 REPL）。我们在单独的文章里写过它们。
安装 JustZix，别再只为了偶尔敲个选择器就一直开着 DevTools。
为这篇文章评分
暂无评分 — 成为第一个。