← Все статьи

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

Пересобранная Output Console: 6 вкладок, без DevTools

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

Открыть DevTools только ради того, чтобы прочитать лог — это переключение контекста, которое ты делаешь сотню раз в день, даже не задумываясь. Пересобранная Output Console полностью убирает это переключение: вьюер логов только для чтения, который живёт прямо внутри страницы, с шестью вкладками для вывода консоли, сетевого трафика, необработанных ошибок и dataLayer от GTM. Никакого F12. Никаких отговорок про заблокированную машину. Это полный разбор.

Что такое Output Console на самом деле

Output Console — одно из встроенных во вкладку окон разработчика JustZix, «панель» (pane), которую расширение отрисовывает прямо в DOM страницы. Она работает только для чтения: в неё ничего не вводят. В отличие от JS Console (REPL, где ты выполняешь код), логи попадают в Output Console сами по себе. Ты её открываешь — и она наполняется.

Открыть её можно двумя способами:

• Из меню плавающей кнопки JustZix — постоянное окно, привязанное к правилу.
• Сочетанием клавиш Ctrl+Alt+K — TEMP-окно, которое ты вызываешь на месте и закрываешь, когда закончил.

Это окно как любая другая панель JustZix: его можно перетаскивать, менять размер, отодвигать в сторону. Оно не блокирует страницу под собой.

Почему окно логов внутри вкладки лучше DevTools

DevTools — отличный инструмент. Он также не всегда доступен и не всегда удобен. Конкретные причины, почему консоль во вкладке выигрывает:

• Заблокированные машины. Корпоративная политика, режим киоска, управляемый профиль Chrome — во множестве окружений DevTools отключён или скрыт. Output Console — это просто часть страницы; ничего разблокировать не надо.
• Никакого переключения контекста. Лог находится рядом с контентом, который ты отлаживаешь, в той же области просмотра. Ты не делишь экран и не закрываешь половину страницы прикреплённой панелью.
• Она переживает аскетичную настройку. Никаких source maps, никаких расширений, которые коллега забыл установить, никакого ритуала «открой DevTools, переключись на нужную вкладку, сбрось фильтр». Это один клик.
• Она поставляется вместе с правилом. Набор правил JustZix можно передать другому. Дай коллеге правило, которое открывает Output Console на конкретном шаблоне URL — и он получит ту же отладочную поверхность, что и ты, без какой-либо настройки со своей стороны.

Это не замена DevTools для глубокой работы. Это правильный инструмент, когда ты хочешь увидеть, что делает страница, без церемоний.

Шесть вкладок, у каждой живой счётчик

Окно разбито на шесть вкладок. У каждой вкладки есть бейдж, показывающий, сколько записей она сейчас содержит, и он обновляется вживую по мере работы страницы:

Разделение между JZconsole и Console сделано намеренно. Твоё собственное отладочное логирование не должно тонуть в шуме страницы, а шум страницы не должен топить твоё логирование. Держи их раздельно или читай их объединёнными во вкладке All.

Контекстная панель фильтров

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

• All — никаких дополнительных фильтров. Это пожарный шланг.
• JZconsole / Console — чекбоксы уровней: log, info, warn, error, debug. Сними галочку с уровня — и эти строки исчезнут. Хочешь только ошибки и предупреждения? Сними галочки с остальных трёх.
• Network — три ряда элементов управления (тип ресурса, класс HTTP-статуса, ползунки размера/длительности плюс фильтр по домену). Подробный разбор вкладки Network раскрывает их детально.
• Errors — никаких чекбоксов; вместо этого каждая ошибка разворачивается, открывая свой стек и детали.
• DataLayer — окно делится на две колонки (об этом ниже).

Поскольку панель контекстная, ты никогда не прокручиваешь мимо нерелевантных элементов управления. Вкладка Console не показывает тебе фильтр по домену; вкладка Network не показывает чекбоксы уровней логирования.

Поле поиска

Под панелью фильтров, всегда на виду, находится поле поиска. Это живой фильтр по подстроке без учёта регистра по записям активной вкладки. Набери checkout — и список сужается по мере ввода. Нажми Esc, чтобы мгновенно его очистить.

Поиск и контекстные фильтры складываются друг с другом. На вкладке Network ты можешь снять галочки со всего, кроме статусов 4xx/5xx, а затем набрать фрагмент пути в поле поиска, чтобы прижать один сбойный эндпоинт.

Сворачиваемые логи консоли

Реальные вызовы console.* логируют объекты, массивы, большие полезные нагрузки. Если вывалить их сырыми, двадцать таких записей сделают вкладку нечитаемой. Поэтому записи console.* свёрнуты по умолчанию — каждая показывает короткую строку-превью, что-то вроде:

[Checkout][14:22:07] EVENT: {…}

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

Вкладка Errors

Вкладка Errors собирает то, что реально сломалось: непойманные исключения и необработанные отклонения промисов. Каждая запись разворачивается, показывая трассировку стека и детали, так что ты можешь перейти от «что-то упало» к «вот эта строка в этом файле», не покидая страницу.

Одна честная оговорка, которую стоит знать заранее: упавший fetch или XHR — API, возвращающий 404 или 500 — это не JavaScript-исключение. Он не появится во вкладке Errors. Для таких случаев ты идёшь на вкладку Network и фильтруешь по статусу 4xx/5xx. Вкладка Errors — для кода, который выбросил исключение, а не для запросов, которые провалились.

Вкладка DataLayer

Если на странице работает Google Tag Manager, вкладка DataLayer — самый быстрый способ увидеть, что получает GTM. Окно делится на две колонки:

• Слева — «Новые пуши»: поток вызовов dataLayer.push(...) в порядке событий. Каждый пуш, который делает страница, появляется здесь по мере того, как он происходит.
• Справа — «Текущее состояние»: живой объект window.dataLayer в виде индексированного (0:, 1:, …) разворачиваемого JSON-дерева. Снимок обновляется после каждого пуша, а в заголовке колонки есть кнопки развернуть всё / свернуть всё.

Ты видишь сразу и события по мере их срабатывания, и накопленное состояние — никаких догадок, долетел ли пуш, никакого открытия расширения для отладки тегов.

Логгер window.JUSTZIX

Output Console — это не просто пассивный вьюер, она поставляется с API логирования для твоего собственного кода. Всё, что ты пишешь в панели JS, в действии правила или в коде страницы, может логироваться прямо во вкладку JZconsole:

JUSTZIX.log('cart loaded', cart);
JUSTZIX.info('user is logged in');
JUSTZIX.warn('coupon field empty');
JUSTZIX.error('checkout API failed', err);
JUSTZIX.debug('raw payload', payload);

Пять методов соответствуют пяти уровням, которыми управляют чекбоксы фильтра JZconsole. Алиасы делают это удобным и безопасным:

• window.__JUSTZIX__ — доступен всегда.
• window.JZ — доступен, только если страница ещё не владеет своим window.JZ, так что JustZix никогда не затирает собственный глобал сайта.

Поскольку твои логи попадают в свою отдельную вкладку, они остаются читаемыми независимо от того, насколько болтлива нативная console страницы.

Практичная первая сессия

1. Нажми Ctrl+Alt+K на странице, которую хочешь изучить — Output Console откроется как TEMP-окно.
2. Начни с All, чтобы получить общую картину, затем перейди на вкладку, которая важна.
3. Отлаживаешь собственное правило? Расставь вызовы JUSTZIX.log(...) и наблюдай за JZconsole.
4. Страница ведёт себя странно? Проверь Errors на выброшенный код, Network — на проваленные запросы.
5. Проверяешь аналитику? Открой DataLayer и запусти пользовательский сценарий.
6. Сузь что угодно чекбоксами уровней и полем поиска; Esc очищает поиск.

Смотри также

• Вкладка Network в деталях — сетевая панель без DevTools
• Примеры JustZix — готовые к использованию правила CSS и JS

Пересобранная Output Console превращает «открой DevTools и копай» в «брось взгляд на вкладку рядом со страницей». Установи JustZix — это бесплатно, работает на Chrome 100+ и устанавливается примерно за две минуты.