← Все статьи

Гайды

Мини-IDE во вкладке браузера: 8 инструментов JustZix, заменяющих DevTools

15 мая 2026 · автор JustZix Team

JustZix родился как расширение для внедрения CSS — но за последний год вырос во что-то гораздо большее. Сегодня это мини-IDE в каждой вкладке браузера — 4 типа окон (panes), 6 типов действий, 2 пространства имён JS API и система snap-соединений для расположения их всех в согласованном дашборде по доменам. Никакого F12. Никаких DevTools. Всё в самой вкладке. Эта статья отображает всю картину — что использовать когда, как всё складывается, с чего начать.

Карта: 4 + 6 + 2 + 1

JustZix делится на четыре главных компонента, которые можно использовать вместе или по отдельности:

Плюс snap-соединения как «клей» — позволяют располагать панели и панель действий в группы, двигающиеся вместе.

Окна во фронтенде — 4 типа

1. CSS pane — живой редактор CSS во вкладке

Открываешь панель рядом со страницей, пишешь CSS, видишь изменения вживую. Авто-сохранение во вкладке. Постоянство по вкладке через sessionStorage. Никакого коммита никуда, умирает с вкладкой. Идеально для «мне нужно увидеть, как кнопки выглядели бы в другом цвете, но я это ещё не деплою».

→ CSS pane: живой редактор CSS на любой странице, без DevTools

2. JS Console — REPL с историей ↑↓

REPL-альтернатива DevTools. Eval по Ctrl+Enter. Стрелки вверх/вниз прокручивают историю (sessionStorage по вкладке). Вывод перехватывает только sync — async-задачи попадают прямо в DevTools. Идеально для ad-hoc проверок («сколько элементов с классом X?», «что возвращает этот API?»).

→ JS Console: REPL на любой странице, без DevTools

3. JS pane — скрипты Run-on-demand

Постоянный JS-код с кнопкой ▶. Ctrl+Enter его выполняет. Dirty-состояние (визуальная подсказка, что у тебя невыполненные изменения). Оверлей ошибок (красная полоса в pane без F12). Идеально для деструктивных скриптов («очисти корзину», «удали черновик», «сбрось форму») — ты не хочешь авто-запуска, ты хочешь нажать ▶ по запросу.

→ JS pane: скрипты Run-on-demand, без авто-запуска при каждом визите

4. Output Console — просмотрщик логов только для чтения

4-й тип окна — слушать, не писать. Перехватывает все console.log/warn/error/info/debug страницы (sync + async) плюс выделенный канал window.JUSTZIX.log(). viewMode [C/J/C+J] переключает видимость. Фильтры по уровню, поле поиска. 2000 строк. Невосприимчив к CSP (привилегии расширения).

→ Output Console: наблюдай за console.log страницы в панели вкладки

Типы действий — 6 на панели действий

Панель действий — это плавающая полоса кнопок, которую ты вызываешь вручную. Шесть типов действий — все живут на одной панели, у каждого своя семантика:

TOGGLE3 — трёхпозиционный сегментированный контрол

Сегментированный контрол ровно с 3 состояниями. Каждое состояние получает свою метку, value, цвет и JS-код. Лучший сценарий: переключатель окружений Dev/Staging/Prod (каждое состояние = другой поддомен), переопределение темы Light/Dark/Auto, трёхпозиционный фича-флаг Off/Default/Force-on. 5 настраиваемых цветов (bg/текст активного + bg/hover/текст неактивного).

→ TOGGLE3: трёхпозиционный сегментированный контрол на панели действий

SLIDER — контроллер CSS-переменных под пальцем

Нативный <input type="range"> на панели. Перетаскивание вживую = сохраняет memory (без выполнения кода), отпускание = выполняет код с value как Number. 4 отдельных цвета (bg, заполнение, текст метки, текст value). Сценарий: контроллер яркости (filter:brightness 50-150%), размер шрифта для доступности, троттлинг скорости анимации для отладки, любая CSS-переменная, которую хочешь крутить как физический фейдер.

→ SLIDER: контроллер 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 (хелперы действий) — работает с элементами data-jz-action-id в DOM. 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 + логгер

Snap-соединения — расположение в дашборд

Шесть типов элементов (4 типа panes + панель действий + плавающая кнопка) живут в общем пространстве ID. Перетащи один в пределах ≤20px от другого → они защёлкиваются в группу. Перетащи группу → всё двигается вместе. Якорное позиционирование (TL/TR/BL/BR) держит layout стабильным при изменении размеров окна. Это превращает «несколько отдельных инструментов» в «настраиваемый дашборд по доменам».

→ Snap-соединения: группы панелей — мини-дашборд во вкладке

Как собрать это вместе — 3 практических сетапа

Сетап A: «личный QA-тулбар»

Сверху справа, якорь TR:

• Панель действий: 3-4 BUTTON для самых частых потоков («Login as test user», «Fill demo data», «Reset cart»)
• JS pane под панелью: деструктивные скрипты / массовые операции (Run-on-demand, ▶)
• Output Console под JS pane: мониторит JUSTZIX.log + консоль страницы
• Всё защёлкнуто вертикально. F5 → возвращается на те же места.

Сетап B: «живой редактор CSS»

Левая сторона, якорь TL:

• CSS pane (узкий, высокий): живое редактирование
• Панель действий со SLIDER «Brightness» + TOGGLE3 «Theme»
• Snap край к краю — слайдер + CSS-редактор в одном потоке

Сетап C: «оверлей отладки»

Панель снизу, якорь BL:

• Панель действий с BUTTON «Capture state» + TOGGLE3 «Env DEV/STG/PROD»
• Output Console узкая над панелью (высота ~200px): нон-стоп потоковые логи
• Выглядит как панель DevTools браузера, но это часть вкладки (не пропадает, когда сворачиваешь F12)

Первая минута — что делать сразу после установки

1. Установи JustZix (Скачать здесь). Нажми иконку на панели инструментов после установки.
2. Создай своё первое правило в опциях (расширения → опции JustZix). Выбери «везде» как scope.
3. В CSS-редакторе напечатай: body { background: lightyellow !important; } — сохрани. Посети любой сайт → фон становится жёлтым.
4. Добавь действие BUTTON к этому правилу: метка «🐛 Debug», код JUSTZIX.log('debug');
5. Добавь Output Console в секции «Окна» → сохрани. Вернись на страницу. Клик «🐛 Debug» → одна строка в Output Console.
6. Перетащи Output Console под панель действий, дай ей защёлкнуться. У тебя первый мини-дашборд.

3 минуты от нуля до рабочего сетапа. Всё постоянное — F5 / новая вкладка / перезапуск браузера: сетап возвращается.

Полный список статей по компонентам

Если хочешь более глубокое знание об отдельных компонентах:

• Окна во фронтенде: CSS pane · JS Console · JS pane · Output Console · Snap-соединения
• Типы действий: TOGGLE3 · SLIDER
• API и хелперы: window.JZ + JUSTZIX helpers
• Практические туториалы: Скрытие cookie-баннеров · Тёмная тема для любого сайта · Отладка GTM без разработчиков · Кастомные горячие клавиши · QA-тулбар с нуля · Маркеры окружений

JustZix — это open-source расширение, полностью бесплатное, без аккаунта, без сервера. Всё работает локально в браузере. Установи его и построй свою первую мини-IDE за 3 минуты.