Окна на странице — CSS, JS и консоли

Инструменты разработчика прямо на странице

JustZix отрисовывает свои окна разработчика прямо внутри открытой страницы — не в панели DevTools и не в отдельной вкладке. Каждое окно можно перетащить в любое место, состыковать его край с другим и объединить несколько в один мини-дашборд рядом с настоящим содержимым.

Каждое окно бывает двух видов: постоянное — привязанное к конкретному правилу и загружаемое вместе с ним — и временное (TEMP), вызываемое горячей клавишей для быстрой проверки. Вы сами решаете, остаётся окно или исчезает при перезагрузке.

CSS pane и JS pane

CSS pane — это живой редактор стилей: вы вводите правило и видите изменённую страницу в тот же миг — без сохранения и без перезагрузки. Его содержимое хранится отдельно для каждой вкладки, так что у каждой страницы свой черновик.

JS pane — это редактор JavaScript, запускаемый по запросу. Код не стартует сам — вы выполняете его кнопкой Run или сочетанием Ctrl+Enter, когда он готов. Над обоими редакторами работает строка поиска со счётчиком совпадений, подсветкой и переходами Ctrl+Alt+←/→.

JS Console и Output Console

JS Console — это REPL на странице: вы вводите выражение, нажимаете Enter, получаете результат, а стрелками вверх и вниз возвращаете прежние команды — как в терминале.

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 есть кнопка «очистить» (иконка корзины, очистка попадает в историю undo). Данные окон TEMP исчезают только при закрытии вкладки — это естественный объём сессии.

Панель редактирования в отдельном окне

Иногда удобнее иметь панель редактирования рядом со страницей, а не вместо неё. Сочетание Ctrl+Alt+I открывает панель в отдельном окне браузера, автоматически выбирает первое активное правило, подходящее текущей странице, и помещает курсор на вкладку CSS. Ctrl+Alt+O делает то же самое для вкладки JS, а Ctrl+Alt+P — для вкладки Действия. Если ни одно правило страницы не подходит, панель открывается пустой, готовой к созданию нового.

В уже открытой панели те же сочетания не создают второе окно — они переключают вкладку активного правила. Сопоставление идёт по физической клавише, поэтому сочетания работают на любой раскладке, включая польскую Programmers (AltGr больше не ломает Ctrl+Alt+O).