← 全部文章

前端窗口

代码编辑器中的搜索 —— 在长规则里找到任何东西

17 5月 2026 · 作者 JustZix Team

一条 CSS 规则可以长到数百行。一段 JS 片段也可以。滚动着去找你需要微调的那一个选择器,很快就让人厌烦。JustZix 现在在每个代码编辑器上方放了一个真正的搜索栏 —— 计数器、高亮、导航箭头和键盘快捷键。下面是它的工作原理。

搜索栏出现在哪里

搜索栏直接位于 CodeMirror 编辑器上方,出现在三个地方:

• 规则中的 CSS 编辑器;
• 规则中的 JS 编辑器;
• 动作的 JS 代码编辑器。

到处都是同一个组件,所以你在一个地方学会它,就在所有地方都会用了。

基础:输入框和计数器

这个栏是一个文本输入框加一个搜索图标按钮。输入一个查询,JustZix 就会在当前编辑器中找到每一处出现。一个匹配计数器以 n / total 显示你的位置 —— 例如 3 / 12 意味着你在十二个匹配中的第三个上。如果没有可找的东西,计数器也会告诉你。

高亮:当前项对比其余

每个匹配都会被高亮,让你一眼看出分布,而这两种状态是故意做得不同的:

活动匹配还会被自动滚动到视野内 —— 你永远不必去找你在哪里。移到下一个匹配,黄色高亮就跟着你跳,而上一个则退回蓝色。

在匹配之间导航

当一次搜索找出不止一个结果时,栏里会出现 ▲ 和 ▼ 箭头。点 ▼ 去下一个匹配,▲ 去上一个。计数器更新,黄色高亮移动,编辑器滚动。只有一个匹配时,不需要箭头,它们就不碍事。

键盘:要点

你很少需要鼠标。从搜索框内部:

有一个细节值得知道:Enter 通常跳到下一个已有的匹配 —— 但如果你自上次搜索以来更改了查询文本,Enter 会从头重新搜索。所以你可以编辑你的查询然后直接按 Enter;你不必清空并重新输入。

全局快捷键 —— 不离开编辑器就能搜索

最有用的快捷键从代码编辑器内部就能用,不只是在搜索框里:

Ctrl+Alt+←/→ 这一组从搜索框和代码编辑器本身都能用。这意味着你可以运行一次搜索,点回代码里去编辑,然后仍然逐个步进匹配,而双手不离开键盘。

一个典型的工作流

1. 你在编辑一条很长的 CSS 规则。按 Ctrl+Alt+F —— 焦点跳到搜索框。
2. 输入 margin。计数器显示 1 / 8;八个匹配发出蓝光,第一个发出黄光并滚动到视野内。
3. 按几次 Enter 逐个步进,或用 Shift+Enter 往回退。
4. 找到了你想要的那个。点进代码里,编辑它。
5. 需要下一个?Ctrl+Alt+→ —— 无需返回搜索框。
6. 完成 —— Esc 清空搜索框。

编辑会使结果失效 —— 这是有意的

一旦你编辑了代码,被高亮的结果就不再反映当前文本 —— 所以它们会失效,你重新搜索。这是有意为之的:指向已移动或已删除文本的过时高亮会比没有高亮更糟。只需在搜索框里按 Enter(或先按 Ctrl+Alt+F 再按 Enter),就能针对更新后的代码运行一次新的搜索。

为什么它对大规则很重要

一条隐藏 Cookie 横幅、修复布局并修补十几个站点的通用规则可以很长。编辑器内搜索把「滚动并眯眼」变成「输入并跳转」。这是一个你会经常用到的小功能。

另请参阅

• JustZix 有什么新东西 —— 与 AI Helper 和重建的输出控制台并肩的代码搜索。
• JustZix 的全部功能 —— 开发者窗口和编辑器的完整列表。

下载 JustZix —— 免费、无需账户、支持 Chrome 100+。每个代码编辑器上方都有搜索栏,可随时使用。