浏览器标签页里的迷你 IDE：取代 DevTools 的 8 个 JustZix 工具
JustZix 起步时是个注入 CSS 的扩展 —— 但在过去一年里它成长为更大得多的东西。今天它是每个浏览器标签页里的一个迷你 IDE —— 4 种窗口类型（pane）、6 种动作类型、2 个 JS API 命名空间，以及一套吸附连接系统，把它们全部按域名摆成一个连贯的仪表盘。无需 F12。无需 DevTools。一切都在标签页本身里。本文勾勒整幅图景 —— 何时用什么、它们如何拼合、从哪里开始。
地图：4 + 6 + 2 + 1
JustZix 分为四个主要组件，你可以一起用，也可以分开用：
| 组件 | 它做什么 | 类型数量 |
|---|---|---|
| CSS/JS 规则 | URL 匹配时注入 <style> / <script> —— 自动运行 | 2（CSS、JS） |
| 栏动作 | 悬浮栏里的按钮 —— 手动调用 | 6（BUTTON、SELECT、INPUT、TEXTAREA、SLIDER、TOGGLE3） |
| 前端窗口 | 带自己 pane 逻辑的悬浮面板 | 4（CSS pane、JS pane、JS Console、Output Console） |
| JS 辅助函数 | 程序化访问 —— MAIN world 里的命名空间 | 2（window.JZ、window.JUSTZIX） |
此外 吸附连接作为「胶水」—— 让你把面板和动作栏摆成会一起移动的组。
前端窗口 —— 4 种类型
1. CSS pane —— 标签页里的实时 CSS 编辑器
在页面旁边打开一个面板，写 CSS，实时看到改动。在标签页里自动保存。通过 sessionStorage 按标签页持久化。不向任何地方提交，随标签页一起消失。非常适合「我得看看按钮换个颜色会怎样，但我还没要部署」。
→ CSS pane：在任何页面上实时编辑 CSS，无需 DevTools
2. JS Console —— 带 ↑↓ 历史的 REPL
DevTools 的 REPL 替代品。Ctrl+Enter 求值。上/下箭头翻历史（按标签页的 sessionStorage）。输出只捕获同步的 —— 异步任务直接进 DevTools。非常适合临时检查（「有多少个元素带类 X？」、「这个 API 返回什么？」）。
→ JS Console：在任何页面上的 REPL，无需 DevTools
3. JS pane —— 按需运行的脚本
带 ▶ 按钮的持久 JS 代码。Ctrl+Enter 执行它。脏状态（你有未执行改动的视觉提示）。错误浮层（pane 里的红色横条，无需 F12）。非常适合破坏性脚本（「清空购物车」、「删除草稿」、「重置表单」）—— 你不想它们自动运行，你想按需点击 ▶。
4. Output Console —— 只读日志查看器
第 4 种窗口类型 —— 倾听，不写。捕获页面所有的 console.log/warn/error/info/debug（同步 + 异步），外加专用的 window.JUSTZIX.log() 通道。viewMode [C/J/C+J] 切换可见性。按级别过滤、搜索字段。2000 行。对 CSP 免疫（扩展权限）。
→ Output Console：在标签页面板里观察页面的 console.log
动作类型 —— 动作栏里 6 种
动作栏是一条你手动调用的悬浮按钮栏。六种动作类型 —— 全都活在同一条栏里，每个有自己的语义：
| 类型 | UX | 激活状态的 memory |
|---|---|---|
| BUTTON | 单击 → 执行代码 | 无 —— 触发即忘 |
| SELECT static | 2-N 个选项的下拉 | 有（dataset） |
| SELECT js | 选项由 JS 生成的下拉 | 有（原生 <select>） |
| INPUT | 单行文本字段 + 回车→运行 | 有（按标签页） |
| TEXTAREA | 多行文本 + 失焦→运行 | 有（按标签页） |
| TOGGLE3 | 三态分段控件 | 有（idx 0/1/2） |
| SLIDER | 范围滑块（input + change 事件） | 有（Number） |
TOGGLE3 —— 三态分段控件
恰好 3 个状态的分段控件。每个状态获得自己的 label、value、颜色和 JS 代码。最佳使用场景：Dev/Staging/Prod 环境切换器（每个状态 = 不同子域名）、Light/Dark/Auto 主题覆盖、Off/Default/Force-on 三态功能开关。5 种可配置颜色（激活态背景/文字 + 非激活态背景/悬停/文字）。
SLIDER —— 触手可及的 CSS 变量控制器
动作栏里原生的 <input type="range">。实时拖动 = 保存 memory（不执行代码），松手 = 以 value 作为 Number 执行代码。4 种独立颜色（背景、填充、label 文字、value 文字）。使用场景：亮度控制器（filter:brightness 50-150%）、无障碍字号、调试用的动画速度节流、任何你想像物理推子那样旋动的 CSS 变量。
API —— 两个命名空间，两种角色
JustZix 在 MAIN world 里安装两个独立的命名空间。每个有自己的用途和生命周期 —— 故意不混在一起：
window.JUSTZIX（日志器）—— 自 v2.13.76 为首选别名。品牌名 = 与页面脚本的冲突风险微乎其微。JUSTZIX.log/.warn/.error/.info/.debug向 Output Console 派发（kind='jz'）；不转发到原生控制台。别名：window.__JUSTZIX__（始终），window.JZ（仅在空闲时）。window.JZ（动作辅助函数）—— 操作 DOM 中的data-jz-action-id元素。JZ.click(label)/JZ.value(label)/JZ.setValue(label, v)/JZ.action(label)。可能被页面占用（Google Ads 有自己的 window.JZ）→ 兜底：原生document.querySelector('[data-jz-action-id="..."]')。
→ window.JZ + window.JUSTZIX：程序化 API + 日志器
吸附连接 —— 摆成仪表盘
六种元素类型（4 种 pane + 动作栏 + 悬浮按钮）活在一个共享的 ID 空间里。把一个拖到离另一个 ≤20px 处 → 它们吸附成一组。拖动整组 → 一起移动。锚点定位（TL/TR/BL/BR）让布局在窗口缩放时保持稳定。这把「一些独立的工具」变成「一个按域名可配置的仪表盘」。
如何把它们拼起来 —— 3 个实用配置
配置 A：「个人 QA 工具栏」
右上角，锚点 TR：
- 动作栏：3-4 个 BUTTON 对应最常见的流程（「Login as test user」、「Fill demo data」、「Reset cart」）
- 栏下面的 JS pane：破坏性脚本 / 批量操作（按需运行，▶）
- JS pane 下面的 Output Console：监控 JUSTZIX.log + 页面控制台
- 全部垂直吸附。F5 → 回到同样的位置。
配置 B：「实时 CSS 编辑器」
左侧，锚点 TL：
- CSS pane（窄、高）：实时编辑
- 带一个 SLIDER「Brightness」+ 一个 TOGGLE3「Theme」的动作栏
- 边对边吸附 —— 滑块 + CSS 编辑器在一个流里
配置 C：「调试叠层」
底部栏，锚点 BL：
- 带一个 BUTTON「Capture state」+ 一个 TOGGLE3「Env DEV/STG/PROD」的动作栏
- 栏上方一个窄的 Output Console（高度约 200px）：不停流动的日志
- 看起来像浏览器的 DevTools 面板，但它是标签页的一部分（最小化 F12 时它不会消失）
第一分钟 —— 装好之后立刻做什么
- 安装 JustZix（在此下载）。安装后点击工具栏里的图标。
- 在选项里创建你的第一条规则（扩展 → JustZix 选项）。作用域选「处处」。
- 在 CSS 编辑器里输入：
body { background: lightyellow !important; }—— 保存。访问任何网站 → 背景变黄。 - 给这条规则添加一个 BUTTON 动作：label「🐛 Debug」，代码
JUSTZIX.log('debug'); - 在「窗口」区域添加一个 Output Console → 保存。回到页面。点击「🐛 Debug」→ Output Console 里出现一行。
- 把 Output Console 拖到动作栏下面，让它吸附。你就有了你的第一个迷你仪表盘。
从零到一个能用的配置，3 分钟。一切都持久化 —— F5 / 新标签页 / 重启浏览器：配置都会回来。
按组件分的完整文章列表
如果你想对单个组件有更深入的了解：
- 前端窗口：CSS pane · JS Console · JS pane · Output Console · 吸附连接
- 动作类型：TOGGLE3 · SLIDER
- API 与辅助函数：window.JZ + JUSTZIX 辅助函数
- 实操教程：隐藏 cookie 横幅 · 为任何网站启用深色模式 · 不靠开发调试 GTM · 自定义键盘快捷键 · 从零搭建 QA 工具栏 · 环境标记
JustZix 是一个开源扩展，完全免费，无需账号，没有服务器。一切都在浏览器里本地运行。安装它，3 分钟内搭出你的第一个迷你 IDE。
为这篇文章评分
暂无评分 — 成为第一个。