← Все статьи

Окна во фронтенде

Поиск в редакторах кода — найдите что угодно в длинных правилах

17 мая 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 и перестроенной Output Console.
• Все функции JustZix — полный список окон разработчика и редакторов.

Скачайте JustZix — бесплатно, без аккаунта, Chrome 100+. Панели поиска над каждым редактором кода, готовые к использованию.