← Все статьи

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

JS Console на любой странице — REPL с историей ↑↓, без DevTools

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

F12 → Console → печатаешь что-то → кликаешь в другом месте → экран перестраивается, DevTools пропали. Или чаще: ты не хочешь, чтобы DevTools были открыты, когда клиент в комнате. У JustZix v2.13.66+ есть JS Console — плавающий REPL в стиле терминала на странице. Ctrl+Enter, история ↑/↓, Ctrl+L = очистка, перехватывает каждый console.log из контекста страницы.

Чем отличается от консоли DevTools

Функционально:

• JS Console живёт на странице — плавающее окно с заголовком и двумя секциями (лог вывода + textarea ввода). Не пропадает при смене фокуса, не закрывается при перезагрузке.
• Хранение по вкладке — черновик ввода, лог вывода (до 200 строк), история команд (до 100) — всё в sessionStorage. Перезагрузи вкладку → всё ещё там. Консоль DevTools — вывод стирается при перезагрузке.
• Иерархия scope — Console появляется только на страницах, совпадающих с URL-паттерном её папки/группы/правила. Разная конфигурация для каждого проекта.
• Синхронизация между устройствами — у тебя есть Console «отладка Stripe» на ноутбуке и на рабочей машине. История команд НЕ синхронизируется (sessionStorage по вкладке), но само окно — да.

Что одинаково: контекст страницы. Твой код имеет доступ к window, document, глобалям страницы (например, app.store в React+Redux-приложении). Тот же движок вычисления, тот же scope.

Первое использование за 60 секунд

1. В опциях JustZix выбери папку/группу/правило с релевантным URL-паттерном.
2. Нажми «Окна» → модальное окно со списком CSS panes + JS panes + JS Console. Выбери «+ Console».
3. Введи имя («Stripe REPL»), цвет (фиолетовый по умолчанию #7C3AED).
4. Посети совпадающий URL — Console появляется как плавающее окно (якорь сверху справа).
5. Напечатай document.title в поле ввода, нажми Ctrl+Enter. Вывод покажет > document.title (эхо команды) + "Настоящий заголовок страницы" (результат).

Горячие клавиши

История: максимум 100 записей, дедуп последней команды (без повторов), сохраняется в sessionStorage по вкладке. ↑/↓ работают только когда ты на краю textarea — это позволяет нормально перемещаться внутри многострочного кода.

Перехват console.log/warn/error/info (v2.13.67)

Твой eval может вызвать console.log('x') — он появится в выводе Console под командой:

> console.log('hello'); 42
[log] hello
  42

Сначала залогированные значения, потом возвращаемое значение. Работает и для console.warn, console.error, console.info — у каждого свой префикс ([warn], [err], [info]) и цвет.

Бонус: если сама страница что-то логирует из контекста страницы во время твоего eval (например, fetch в твоём коде логирует ошибку XHR), ты увидишь это в Console. Это золото для отладки — аналитик видит точно, что происходит под капотом.

Что ты реально контролируешь

1. Быстрый тест fetch перед добавлением в правило

> fetch('/api/products/12345').then(r => r.json()).then(console.log)
[log] {id: 12345, name: "...", price: 99.99}

Проверь, что эндпоинт возвращает то, что ты ожидаешь. Без открытия панели Network в DevTools.

2. «Что в Redux»

> window.__REDUX_DEVTOOLS_EXTENSION__?.connect?.(); store?.getState?.()
  {user: {...}, cart: {...}, products: [...]}

Дамп текущего состояния в один клик, без установки Redux DevTools.

3. «Сколько h2 на этой странице»

> document.querySelectorAll('h2').length
  47

Проверки структуры страницы, предварительная валидация CSS-селекторов.

4. Разовое переопределение

> document.querySelectorAll('.ad').forEach(el => el.remove())
  undefined

Чисто деструктивно, один раз. Ты не хочешь правило CSS/JS для этого — ты хочешь действие один раз. Console даёт тебе JS с нулевыми затратами.

5. Обучение

Ты обучаешь джуниор-разработчика или кого-то без опыта DevTools. Демонстрируешь typeof null, [].map(x => x + 1), Array.from('hello'). Console на странице менее пугающая, чем DevTools.

Иерархия scope — Console «отладка GA» только на *shop*

JS Console, привязанная к папке «E-commerce», появляется на каждой странице, совпадающей с shop.com/*. Не на YouTube. Не в Gmail. Console «Stripe Dashboard» на dashboard.stripe.com/* — бесполезна в другом месте, поэтому не появляется. Каждый проект получает свой REPL.

Плюс: hide-for-page (нажми ✕ на заголовке pane, или правый клик → скрыть) — Console исчезает для текущей вкладки. Перезагрузка вкладки = восстанавливает (флаг sessionStorage сброшен).

Ловушки

• Async eval — await fetch(...) без обёртки не работает (нет top-level await). Оберни в IIFE: (async () => { const r = await fetch(...); console.log(await r.json()); })(). Или используй .then(...).
• Лимит sessionStorage — сохраняются последние 200 строк вывода, более старые обрезаются (чтобы хранилище не росло без границ). История до 100 команд.
• Перезагрузка вкладки = не теряет вывод. Закрытие вкладки = теряет его. Если хочешь что-то сохранить — скопируй во внешний файл или в постоянное JS-правило.
• iframe в sandbox — Console не отображается внутри содержимого iframe (если только URL iframe отдельно не совпадает со scope-паттерном). Cross-origin iframe = отдельный scope.

Что делать дальше

JS Console — 3-й тип «окна на странице» JustZix. Первый (CSS pane) — живой редактор CSS. Второй (JS pane) — постоянный JS-код с Run-on-demand. Третий (Console) — REPL. Четвёртый (Output Console) — кастомный логгер для пользовательского JS, запланирован.

Установи JustZix и получи REPL в каждой вкладке, без F12.