Я не знал о такой возможности, пока сам ИИ не продемонстрировал мне эту команду. Теперь использую ее почти каждый день.

Вот команда: 

chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=8000 \
  --dump-dom http://127.0.0.1:3011/docs

Все. Одна строка. Сейчас объясню, почему это важно.

Что на самом деле происходит

Если вы пробовали когда-нибудь скрейпить страницу с помощью curl, вам знакома такая проблема — вы получаете необработанный HTML-код, отправленный сервером до запуска JavaScript. Для современных веб-приложений это практически бесполезно. Страница пуста, пока React (или Vue, или любой другой фреймворк) не завершит рендеринг.

Флаг --dump-dom работает иначе. Он дожидается выполнения JavaScript, а затем выводит полностью отрендеренный DOM — именно то, что пользователь видит в браузере. 

# Это дает вам статический HTML — без JS, часто пустые div'ы
curl http://127.0.0.1:3011/docs

# Это дает вам реальную DOM после выполнения JS
chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=8000 \
  --dump-dom http://127.0.0.1:3011/docs

Параметр --virtual-time-budget=8000 выделяет странице 8 секунд виртуального времени на завершение рендеринга до того, как произойдет сброс. Увеличьте это значение, если гидратация вашего приложения происходит медленно.

Почему это кардинально меняет подход к отладке ИИ

Вот операции, которые обычно приходится выполнять разработчику, когда что-то в пользовательском интерфейсе не работает — например, элемент div, который не прокручивается:

  1. Открыть браузер.
  2. Открыть DevTools.
  3. Проанализировать элемент.
  4. Скопировать DOM.
  5. Вставить его в Claude или ChatGPT.
  6. Попросить исправить проблему.

Это работает. Но это ручной, медленный процесс, который легко забывается.

Оптимизированный подход: передать отрендеренную DOM напрямую в ИИ-инструмент.

chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=8000 \
  --dump-dom http://localhost:3000 > dom_snapshot.html

После этого нужно вставить файл dom_snapshot.html в чат. ИИ увидит фактическую DOM в реальном времени — реальные имена классов, реальную вычисленную структуру, реальное вложение.

Почему DOM важнее исходного кода

Вот что стало для меня откровением.

Когда вы даете ИИ ваши JSX или компонентные файлы и спрашиваете: «Почему этот div не прокручивается?» — ему приходится прослеживать пропсы, состояние, условные операторы и контекст, чтобы понять, как на самом деле выглядит DOM во время выполнения. Это слишком много переменных. Именно поэтому разработчик-человек открывает DevTools, а не перечитывает исходный код — исходник и результат не всегда одно и то же.

Отображенная DOM устраняет всевозможные догадки. Не нужно распутывать компоненты, не нужно искать пропсы. ИИ видит ровно то же, что и браузер: финальный, вычисленный HTML со всеми примененными классами. 

# Извлеките DOM и найдите "сломанный" элемент
chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=8000 \
  --dump-dom http://localhost:3000 \
  | grep -A 20 'class="sidebar"'

Вставьте этот вывод в чат с ИИ. В девяти случаях из десяти он сразу же обнаружит проблему — отсутствующий атрибут overflow-y: auto, родительский элемент с атрибутом height: 0 или что-то еще.

Полезные вариации

Сохранить в файл для вставки в ИИ:

chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=8000 \
  --dump-dom http://localhost:3000 > snapshot.html

Передать через grep для конкретного раздела:

chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=8000 \
  --dump-dom http://localhost:3000 \
  | grep -A 50 'id="main-content"'

Использовать в скрипте для автоматических проверок DOM:

#!/bin/bash
DOM=$(chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=8000 \
  --dump-dom http://localhost:3000)

if echo "$DOM" | grep -q 'class="error-banner"'; then
  echo "Error banner is showing - something is wrong"
  exit 1
fi

Отлично работает и в CI

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

# Быстрая проверка работоспособности SSR
OUTPUT=$(chromium --headless --no-sandbox --disable-gpu \
  --virtual-time-budget=5000 \
  --dump-dom https://staging.yourapp.com)

WORD_COUNT=$(echo "$OUTPUT" | wc -w)
if [ "$WORD_COUNT" -lt 100 ]; then
  echo "Page looks empty - possible SSR failure"
  exit 1
fi

Общая идея

Значимость этой команды заключается не только в сценарии скрейпинга. Дело в том, что она устраняет разрыв между тем, что видят инструменты ИИ, и тем, что на самом деле происходит в браузере.

Исходный код — это абстракция. DOM — это реальность. Когда вы предоставляете ИИ реальный объект — полностью отрендеренный, обработанный JavaScript и с примененными классами — он перестает гадать и начинает исправлять.

Одна команда. Без DevTools. Без ручного копирования. Просто реальная DOM, готовая к вставке.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Civil Learning: This One Chromium Command Changed How I Debug Frontend Issues with AI

Предыдущая статья15 концепций полного стека, которые должен знать каждый фронтенд-разработчик