← Все статьи

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

TEMP pane — одноразовые окна разработки под горячей клавишей Ctrl+Alt

Не каждое изменение заслуживает постоянного правила. Ты попадаешь на чужую страницу, у тебя вопрос к DOM, или ты хочешь вставить немного CSS на минуту — вот и всё. Именно для этого существуют TEMP panes: окна, вызываемые горячей клавишей на любой странице, используемые на момент и исчезающие при перезагрузке. Ноль конфигурации, ноль следов в твоих правилах.

Чем TEMP отличается от обычного окна

У JustZix четыре типа окон на странице — CSS pane, JS pane, JS Console и Output Console. Обычно ты создаёшь их в панели расширения, и они принадлежат правилу: сохраняются, возвращаются после перезагрузки, синхронизируются между устройствами. Отлично для того, что ты используешь каждый день.

TEMP pane — это тот же тип окна, но эфемерный. Он рождается не из правила — он рождается из горячей клавиши. Живёт в sessionStorage вкладки, поэтому:

Четыре горячие клавиши

Горячая клавишаTEMP-окноДля чего
Ctrl+Alt+GCSS paneживое редактирование CSS страницы
Ctrl+Alt+HJS paneJS-код, выполняемый по запросу
Ctrl+Alt+JJS ConsoleREPL — печатай, Enter, результат
Ctrl+Alt+KOutput Consoleнаблюдай за console.log страницы

Горячие клавиши работают глобально — не нужно сначала кликать в расширении. Ты нажимаешь её на странице, и окно появляется.

Нажми снова, чтобы закрыть — переключатель

Горячая клавиша — это переключатель. Первое нажатие создаёт окно, второе его закрывает. Никакого риска по ошибке нагромоздить пять TEMP CSS-окон друг на друга — максимум одно TEMP-окно на тип за раз.

Можешь также закрыть его × в заголовке окна, или правым кликом на полосе и «Закрыть». Начиная с v3.2.2 оба способа только скрывают окно — содержимое, лог и геометрия ждут в sessionStorage, пока ты не откроешь окно того же типа снова или не закроешь вкладку. Это устраняет прежнюю проблему с потерей данных при случайном клике по ×.

Кнопка «очистить» в заголовке — управляемое очищение (v3.2.3)

Когда ты действительно хочешь очистить окно TEMP CSS или TEMP JS, в заголовке есть кнопка с иконкой корзины — «очистить» — рядом с кнопкой ×. Очистка идёт в историю отмены (Ctrl+Z возвращает её), а для TEMP CSS немедленно обновляет живой <style> на странице. Это разделяет два намерения: скрытие окна (×) и очистку его содержимого (корзина).

Исчезло при перезагрузке — и в этом весь смысл

Это не ограничение, это вся идея. TEMP pane существует, чтобы ты мог быстро что-то проверить и не оставить беспорядка. Ты открыл страницу клиента, нажал Ctrl+Alt+J, проверил document.querySelectorAll('.price').length, нажал F5 — и страница снова чиста, как будто тебя там никогда не было.

Если ты ловишь себя на том, что печатаешь один и тот же TEMP-код в третий раз — это сигнал превратить его в постоянное правило.

Другой цвет — не спутаешь с сохранённым окном

Постоянные окна окрашены по типу (зелёный, янтарный, фиолетовый, изумрудный). TEMP-окна получают отдельную палитру — оранжевый, красный, розовый, циан — по всей рамке окна, на акценте заголовка и на точке статуса. Один взгляд — и ты знаешь, что это эфемерное окно, не твоя сохранённая конфигурация.

Сценарий 1 — отладка чужой страницы без следа

Классика. Ты попадаешь на страницу, ведущую себя странно. Ctrl+Alt+K открывает Output Console — видишь, что страница логирует и какие ошибки бросает. Ctrl+Alt+J открывает JS Console для запросов к DOM. Готово — перезагрузка, исчезло.

Сценарий 2 — разовый CSS без загромождения правил

Ты хочешь отключить sticky-шапку на пять минут, потому что она закрывает то, что ты читаешь. Ctrl+Alt+G, печатаешь header{position:static!important}, читаешь спокойно, закрываешь. Никакого правила не создано, нечего вычищать потом.

Сценарий 3 — REPL в продакшене

Ты хочешь проверить поведение API на живой странице. Ctrl+Alt+H открывает TEMP JS pane — вставляешь fetch('/api/...').then(r=>r.json()).then(console.log), выполняешь кнопкой Run, результат попадает в консоль. После перезагрузки код исчез — не остаётся в каком-либо правиле, которое кто-то мог бы по ошибке запустить позже.

Почему именно G/H/J/K

Это соседние клавиши правой руки, в стиле Vim-кластера — удобны под пальцами. Ctrl+Alt+H/J/K/L было бы естественнее, но Ctrl+Alt+L на Linux (GNOME) блокирует экран — операционная система перехватывает горячую клавишу раньше, чем расширение её увидит. Поэтому мы сдвинули весь кластер на одну клавишу влево. G/H/J/K свободны во всех распространённых браузерах и операционных системах.

Ловушки

Смотри также

Установи JustZix — и держи четыре окна разработки на расстоянии горячей клавиши на каждой странице.

Оцени эту статью

Оценок пока нет — оцени первым.

Попробуй сам

Установи JustZix и вставь любой сниппет из этой статьи. Две минуты от нуля до работающего правила на всех твоих устройствах.

Получить JustZix

Возможности · Как это работает · Примеры · Применение