页面内窗口 — CSS、JS 和控制台
JustZix 为你提供五种开发窗口,直接渲染在你访问的页面上——无需打开 DevTools。你可以拖动它们、边对边吸附成自己的迷你仪表盘,并用一个快捷键调出临时副本。
就在页面上的开发者工具
JustZix 把它的开发者窗口直接渲染在你访问的页面里——不在 DevTools 面板中,也不在单独的标签页里。你可以把每个窗口拖到任意位置、把它的边缘吸附到另一个窗口上,并把多个窗口组合成一个紧挨着真实内容的迷你仪表盘。
每个窗口都有两种形态:持久的——绑定到某条具体规则并随它一起加载——以及临时的(TEMP),由快捷键调出供快速测试。窗口是保留还是在重新加载后消失,由你决定。
CSS pane 与 JS pane
CSS pane 是一个实时样式编辑器:你输入一条规则,就在同一瞬间看到页面随之改变——无需保存、无需重新加载。它的内容按标签页分别保存,因此每个页面都有自己的草稿。
JS pane 是一个按需运行的 JavaScript 编辑器。代码不会自行启动——准备好后,你用 Run 按钮或 Ctrl+Enter 快捷键来执行它。两个编辑器上方都有一个搜索栏,带匹配计数、高亮和 Ctrl+Alt+←/→ 跳转。
JS Console 与 Output Console
JS Console 是页面内的 REPL:你输入一个表达式、按回车、得到结果,并用上下方向键调回先前的命令——就像在终端里一样。
Output Console 是页面日志查看器,含六个带计数的标签页:All、JZconsole、console.*、Network、错误和 dataLayer 推送。Network 标签收集网络请求,并让你按域名、大小和时间进行过滤。
AI Helper
AI Helper 是内置的 AI 助手,可连接到 OpenAI、Anthropic 或 Gemini。它检查页面结构,自行在 TEMP 窗口中测试代码,并且——只有在你确认之后——才把可用的方案转化为现成的 CSS 或 JS 规则。
TEMP 窗口
TEMP 版本是同样的窗口,但是临时性的。你用快捷键调出它们:Ctrl+Alt+G 打开 TEMP CSS pane,Ctrl+Alt+H 打开 TEMP JS pane,Ctrl+Alt+J 打开 TEMP JS Console,Ctrl+Alt+K 打开 TEMP Output Console。
你可以像操作持久窗口一样拖动、吸附和调整 TEMP 窗口的大小。每种类型的窗口都会分别记住它最近一次的大小(每台设备独立)——双击标题栏会在这个记住的大小和默认的 380×240 之间切换。每个窗口的颜色、字体和大小都可从右键菜单设置。
用 × 关闭不再清空内容——窗口只是被隐藏,其状态(代码、日志、几何位置)会留在会话中,直到你重新打开同类型的窗口。当你真的想从头开始时,TEMP CSS 和 TEMP JS 的标题栏上有一个"清除"按钮(垃圾桶图标,清除会进入撤销历史)。TEMP 窗口的数据只在标签页关闭时才消失——这就是会话的自然边界。
在独立窗口中打开编辑面板
有时把编辑面板放在页面旁边比替代页面更方便。Ctrl+Alt+I 快捷键会在浏览器的独立窗口中打开面板,自动选中与当前页面匹配的第一条已启用规则,并停在 CSS 标签上。Ctrl+Alt+O 对应 JS 标签,Ctrl+Alt+P 对应 动作 标签。如果页面上没有规则匹配,面板会以空白状态打开,方便你新建一条。
在已经打开的面板中使用同样的快捷键不会再开一个窗口——它们会切换当前规则的标签。匹配基于物理按键,因此快捷键在所有键盘布局上都能用,包括波兰 Programmers 布局(AltGr 不再让 Ctrl+Alt+O 失灵)。
相关博客文章
更深入讲解此主题的文章。