← Все статьи

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

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

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

Консоль DevTools отлично работает — когда она открыта. Большую часть времени она закрыта. И хуже: консоль DevTools показывает логи каждой страницы, которую ты используешь в данный момент. Сложно выловить «мои логи именно этого потока» в лавине шума. Output Console (с v2.13.66) — это просмотрщик логов только для чтения в самой вкладке — ты видишь логи этой вкладки, ограниченные этим доменом, всегда доступные как другие панели JustZix.

Четыре типа окон — куда вписывается Output Console

Первые три типа что-то делают со страницей. Output Console слушает. Каждый вызов console.log/warn/error/info/debug страницы (и других скриптов JustZix) приходит как цветная строка. Плюс — выделенный канал window.JUSTZIX.log() (с v2.13.73; основной алиас с v2.13.76, с брендовым именем и пренебрежимо малым риском конфликта), который НЕ перенаправляется в нативную консоль, только в Output Console — твои скрипты могут логировать, не загрязняя DevTools.

Архитектура — хук страницы + broadcast к sink'ам

Output Console работает в два шага:

1. Хук страницы (MAIN world) — Внедряется через chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) (невосприимчив к CSP с v2.13.74). Оборачивает console.log/warn/error/info/debug, сохраняя passthrough к оригиналу (DevTools ничего не теряют), но каждый вызов также делает window.postMessage({source:'jz-output-console', kind:'console', level, text, t}).
2. Broadcast к sink'ам (ISOLATED world) — Контент-скрипт JustZix слушает window.message и делает broadcast записей ко всем текущим отрендеренным панелям Output Console через Map _outputConsoleSinks. Каждая панель добавляет свою строку в свой лог (состояние по экземпляру).

Плюс stringifyArg — преобразователь аргументов, осознающий типы:

• string/number/bool → литерал
• Error → .stack (полный stack trace, не только сообщение)
• объект → JSON.stringify с защитой от циклов (WeakSet, так что JSON.stringify(window) не зависает)
• функция → sentinel [Function: name]
• undefined → литерал undefined (не исчезает внутри JSON.stringify)

viewMode: [C+J] / [C] / [J] — два канала, одна панель

С v2.13.73 у Output Console есть циклическая кнопка viewMode в заголовке. Три состояния:

Реализация: нулевые накладные расходы JS на строку. Каждая запись получает класс jz-output-line-{kind}, а режим добавляет класс jz-output-mode-{mode} на pane. CSS-правила скрытия делают остальное:

.jz-output-mode-standard .jz-output-line-jz { display: none; }
.jz-output-mode-jz       .jz-output-line-console { display: none; }
/* .jz-output-mode-both показывает всё */

Фильтры по уровню + поиск — функции для опытных пользователей

Под кнопкой ⚙ открывается popover с 5 чекбоксами: log / info / warn / error / debug. Все отмечены по умолчанию кроме debug (по умолчанию выключен — страницы злоупотребляют console.debug для спама). Тот же механизм, что и у viewMode — класс jz-output-hide-{level} + CSS-правило, нулевые накладные расходы JS.

Плюс переключатель поиска 🔍 над логом. Живой фильтр с совпадением по подстроке, регистронезависимый. Esc его очищает. Сохраняется в sessionStorage по вкладке — фильтры/поиск переживают перезагрузку.

// Напечатай в JS Console:
for (let i = 0; i < 5; i++) console.log(`Действие пользователя ${i}`);
for (let i = 0; i < 5; i++) console.warn(`Предупреждение пользователя ${i}`);
JUSTZIX.log('Лог моего скрипта');

// Output Console покажет 11 строк.
// Переключи на [J] → только 1 (JUSTZIX.log).
// Переключи на [C] + только фильтр «warn» → 5 (console.warn).
// Поиск «пользователя 3» → ловит «Действие пользователя 3» + «Предупреждение пользователя 3».

Сценарий 1 — мониторинг dataLayer.push (отладка GTM)

Классическая проблема GTM: хочешь знать, что каждый тег отправляет в dataLayer. Консоль DevTools = пробираться сквозь десятки других логов. Output Console:

// JS-правило (запускается автоматически на сайте):
const origPush = window.dataLayer.push;
window.dataLayer.push = function(event) {
  JUSTZIX.log('[dataLayer]', JSON.stringify(event));
  return origPush.call(this, event);
};
JUSTZIX.log('Хук dataLayer установлен.');

Output Console в режиме [J] показывает только твои строки JUSTZIX.log — каждый тег GTM = одна цветная строка. Фильтр «purchase» → только e-commerce. Фильтр «ga4» → только события GA. Никакого F12, никакого Tag Assistant, никакой панели Network.

Сценарий 2 — мониторинг долгого QA-потока

QA-тестировщик записывает 30-минутный поток. Консоль DevTools заполняется через 5 минут (дефолтный максимум ~1000 строк). Output Console:

• maxLines 2000 (с v2.13.73, раньше было 500) — достаточно для долгой сессии.
• sessionStorage по вкладке — перезагрузка не очищает лог (только закрытие вкладки).
• Переключатель auto-scroll в заголовке — отключи его, чтобы остановиться на конкретной строке; прокрутка назад не прыгает вниз при каждом новом логе.
• Кнопка Clear с настраиваемым runColor (с v2.13.71) — очисти лог перед следующим QA-шагом.

Сценарий 3 — отслеживание асинхронных ошибок

Оверлей ошибок JS pane (красная полоса) НЕ ловит асинхронные ошибки — setTimeout(() => { throw err }, 100) не появляется в pane. Output Console их ловит — потому что console.error вызывается и глобальным обработчиком ошибок:

// JS-правило:
window.addEventListener('error', (e) => {
  JUSTZIX.error('[unhandled]', e.message, '@', e.filename + ':' + e.lineno);
});
window.addEventListener('unhandledrejection', (e) => {
  JUSTZIX.error('[promise reject]', e.reason);
});

Output Console в режиме [J] + фильтр «только error» — каждая глобальная ошибка в читаемом списке. Удобно, когда SPA логирует 50 ошибок в минуту, а тебе нужны только твои.

Сценарий 4 — монитор ответов API

На странице есть fetch, не появляющиеся в виде (фоновая синхронизация). Проверь, что отвечает сервер:

// JS-правило — прокси fetch:
const origFetch = window.fetch;
window.fetch = async function(...args) {
  const res = await origFetch.apply(this, args);
  const clone = res.clone();
  clone.json().then(data => {
    JUSTZIX.log('[fetch]', args[0], '→', JSON.stringify(data).slice(0, 200));
  }).catch(() => {});
  return res;
};

Output Console показывает URL + первые 200 символов JSON-ответа. Ищи по URL → видишь один эндпоинт. Отлично для отладки нестабильных fetch без панели Network F12.

Страницы со строгой CSP — почему inline-скрипт падал (фикс v2.13.74)

До v2.13.73 хук страницы внедрялся как элемент <script> с textContent. Работало на ~99% страниц — но строгая CSP (script-src 'self' без 'unsafe-inline', например GitHub, checkout Stripe, банки) молча блокировала выполнение. appendChild удавался (мутация DOM OK), но скрипт не выполнялся, ошибка не бросалась.

Симптом: window.JUSTZIX.log is not a function + console.log не появляется в Output Console. Фикс (v2.13.74): хук переведён на chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) — привилегии расширения бьют CSP страницы. После первой установки Output Console получает приветственное сообщение (с v2.13.76 перечисляет активные алиасы): [JustZix] Output Console hook ready. API: window.JUSTZIX (or JZ / __JUSTZIX__).log/.warn/.error/.info/.debug.

Ловушки

• Только чтение. Нельзя напечатать 2+2 здесь и получить 4. Это потоковый вид, не REPL. Для REPL используй JS Console.
• console.debug ВЫКЛЮЧЕН по умолчанию в фильтрах. В первый раз ты не увидишь debug-логи — это намеренно (debug-спам — пожиратель продуктивности). Включи его в popover ⚙, если нужно.
• Хук страницы должен случиться рано. Хук внедряется при первом рендере панели Output Console. Логи до этого момента теряются. Лучшая практика: панель привязана к родительскому правилу с совпадением URL — так хук устанавливается с загрузки страницы.
• Логгер работает всегда, даже когда страница занимает window.JZ. С v2.13.76 основной алиас — window.JUSTZIX (брендовое имя, пренебрежимо малый риск конфликта), плюс window.__JUSTZIX__ всегда установлен. Более короткий window.JZ — алиас ТОЛЬКО когда свободен — при конфликте со страницей (например, Google Ads) он остаётся за страницей. Используй JUSTZIX.log(), когда не уверен в домене.
• Лимит 2000 строк. Более длинный поток → старые строки вытесняются (FIFO). Сохрани лог в файл через кнопку Clear (экспорт JSON запланирован на v2.13.75; пока копируй-вставляй из DOM).

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

Output Console завершает мини-IDE во вкладке — канал только для чтения рядом с тремя каналами записи (CSS pane / JS pane / JS Console). Вместе это «альтернатива Chrome DevTools для 80% случаев» — никакого F12, ограничено по доменам, с настраиваемым UI. Смотри также window.JZ helpers для выделенного канала логирования и отладку GTM dataLayer.push как конкретное применение.

Установи JustZix — полностью бесплатно, без аккаунта, без сервера.