browser-inspector-mcp

Предоставляет вашему ИИ-инструменту для кодинга ту же видимость CSS, что есть у вас в инструментах разработчика (DevTools) браузера.

Прежде чем ваш ИИ напишет CSS, позвольте ему увидеть, что на самом деле происходит в браузере — реальные отрендеренные имена классов, полный каскад правил, что побеждает и почему. Те же данные, которые человек получает из DevTools. Никакого ручного копирования и вставки.

Полная документация и визуализация →

Требования: Node.js 18+, ИИ-инструмент с поддержкой MCP (Claude Code, Cursor, Windsurf, Cline и т. д.), запущенный локальный сервер разработки.

Конфигурация (добавьте в файл конфигурации MCP вашего ИИ-инструмента):

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Расположение файлов конфигурации:

• Claude Code: ~/.claude.json

• Cursor: ~/.cursor/mcp.json или .cursor/mcp.json

• Windsurf: ~/.codeium/windsurf/mcp_config.json

• Другие: там, где ваш инструмент считывает конфигурацию MCP-сервера

Перезапустите ваш ИИ-инструмент. При первом вызове сообщите ИИ, на каком URL запущен ваш сервер разработки — сессия браузера сохранится на время всего разговора.

Один инструмент, четыре действия: browser_inspect с action: "dom" (отрендеренный DOM), "styles" (полный каскад CSS), "diff" (проверка до/после), "screenshot" (визуальный снимок). Или просто опишите, что вам нужно — Claude выберет правильное действие.

При первом использовании Puppeteer скачает Chromium (~170 МБ).

Перед началом — что вам нужно

Этот инструмент соединяет две вещи, которые у вас уже должны быть настроены: ИИ-инструмент для кодинга и веб-проект, над которым вы активно работаете. Вот что это значит и как это получить.

1. Node.js (движок, на котором работает этот инструмент)

Node.js — это программа, которая позволяет вашему компьютеру запускать JavaScript вне браузера. npm и npx — команды, используемые для установки и запуска этого инструмента, — входят в состав Node.js.

У вас он уже есть? Откройте Терминал (Mac) или Командную строку (Windows) и введите:

node --version

Если вы видите номер версии, например v20.11.0, всё в порядке. Если вы получили ошибку, вам нужно его установить.

Установите его: Скачайте с nodejs.org — выберите версию LTS (ту, что помечена как «Рекомендуется для большинства пользователей»). Запустите установщик. Это всё.

2. ИИ-инструмент для кодинга

Это инструмент, в который вы пишете, когда просите ИИ написать или исправить код. Этот MCP-сервер работает с любым из следующих — вам нужен только один:

Если у вас его еще нет и вы не знаете, с чего начать: попробуйте Cursor. У него самый плавный порог вхождения, если вы пришли из сферы дизайна.

3. Что такое MCP (одно предложение)

MCP (Model Context Protocol) — это стандартный способ предоставления ИИ-инструментам доступа к дополнительным возможностям — например, к браузеру, базе данных или вашей файловой системе. Этот инструмент — одна из таких возможностей. Вы устанавливаете его, добавив несколько строк конфигурации в свой ИИ-инструмент, и он автоматически появляется в наборе инструментов вашего ИИ.

4. Веб-проект, запущенный локально

Этот инструмент проверяет CSS в живом браузере. Это означает, что у вас должен быть запущен веб-проект на вашем компьютере — обычно это React, Vue или аналогичное приложение, которое вы активно разрабатываете.

Когда вы запускаете свой проект локально, он открывается по адресу вроде http://localhost:5173 или http://localhost:3000. Это URL, который вы дадите этому инструменту.

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

Как установить

Вам не нужно ничего устанавливать заранее. Когда вы настроите свой ИИ-инструмент (следующий шаг), он автоматически скачает и запустит browser-inspector-mcp при первом необходимости, используя инструмент под названием npx.

При первом запуске он также скачает браузер под названием Chromium (~170 МБ). Это «безголовый» (headless) браузер, который инструмент использует для проверки вашей страницы — он работает невидимо в фоновом режиме и не имеет ничего общего с вашим обычным Chrome или Safari.

Как настроить ваш ИИ-инструмент

Вам нужно добавить небольшой фрагмент конфигурации — JSON-блок — в файл на вашем компьютере. JSON — это просто структурированный текстовый формат. Блок выглядит так:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Файл, в который вы его добавляете, зависит от того, какой ИИ-инструмент вы используете. Найдите свой ниже.

Важно: Если в файле конфигурации уже есть другое содержимое, вы добавляете к нему, а не заменяете его. См. примеры ниже.

Claude Code

Расположение файла: ~/.claude.json

~ означает вашу домашнюю папку. На Mac это /Users/yourname/. Файл может еще не существовать — если его нет, создайте его.

Откройте Терминал и выполните:

open -e ~/.claude.json

Это откроет файл в TextEdit. Если файла не существовало, создайте новый и вставьте:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Если в файле уже есть содержимое, найдите раздел "mcpServers" и добавьте в него блок "browser-inspector". Не удаляйте то, что там уже есть.

Сохраните файл, затем закройте и снова откройте Claude Code.

Cursor

Расположение файла: ~/.cursor/mcp.json (применяется ко всем вашим проектам) или .cursor/mcp.json внутри конкретной папки проекта (применяется только к этому проекту)

В Cursor перейдите в: Settings → MCP — обычно там есть интерфейс для прямого добавления MCP-серверов, что проще, чем редактировать файл вручную. Если вы предпочитаете редактировать файл, добавьте тот же JSON-блок, что выше.

Перезапустите Cursor после сохранения.

Windsurf

Расположение файла: ~/.codeium/windsurf/mcp_config.json

Откройте файл, добавьте тот же JSON-блок, сохраните и перезапустите Windsurf.

Cline (расширение для VS Code)

В VS Code с установленным Cline: откройте боковую панель Cline → нажмите на значок настроек → найдите "MCP Servers" → добавьте новый сервер с командой npx и аргументами ["-y", "browser-inspector-mcp"].

Другие инструменты (Continue, OpenCode, Codex и т. д.)

Любой инструмент с поддержкой MCP принимает тот же блок конфигурации. Найдите, где ваш инструмент хранит конфигурацию MCP-сервера, и добавьте её туда.

Как использовать

После настройки инструменты доступны автоматически. Вы не вызываете их по имени — просто опишите, над чем вы работаете.

Запуск сессии: Сообщите ИИ, на каком URL запущен ваш сервер разработки:

I'm working on the dashboard at http://localhost:5173 — the button styles aren't applying correctly.

ИИ будет использовать нужные ему инструменты. Сессия браузера остается открытой на протяжении всего разговора — вам нужно упомянуть URL только один раз.

Что ИИ делает за кулисами:

You:  "The icon in the panel header isn't picking up the brand color"

AI:   → browser_inspect(action="dom", selector=".panel-header")
        sees the real rendered class names, finds the icon is <span class="panel__header-icon">
      → browser_inspect(action="styles", selector=".panel__header-icon", properties=["color"])
        sees there's an explicit color rule on the icon overriding the parent
      → fixes the right rule, first try

Никаких DevTools. Никакого копирования и вставки. Никаких «туда-сюда».

Проблема, которую это решает

Что происходит обычно

Вы просите свой ИИ-инструмент исправить проблему со стилями. Он читает исходные файлы, пишет изменения в CSS и применяет их. Вы проверяете браузер. Все еще неправильно. ИИ пробует снова. Все еще неправильно. После нескольких попыток вы сами открываете DevTools, находите нужный элемент, копируете HTML, вставляете его обратно в чат — и только тогда ИИ понимает, с чем он на самом деле имел дело.

Этот шаг с ручным копированием и вставкой? Это тот разрыв, который устраняет этот инструмент.

Почему это продолжает происходить

ИИ читает исходные файлы. Браузеры рендерят что-то другое.

Современные библиотеки компонентов, такие как Ant Design, Material UI и Radix, генерируют свои собственные имена классов во время выполнения — имена, которые нигде не появляются в вашем исходном коде. Ваш JSX говорит <Menu>. Браузер рендерит ant-dropdown-menu-item-container. ИИ пишет CSS для ant-menu-item, потому что это то, что он нашел в исходном коде. Правило никогда не применяется.

Есть и вторая проблема: даже когда ИИ нацеливается на правильный элемент, он не может подтвердить, применилось ли его изменение. Применился ли CSS? Перекрыло ли его что-то? Был ли font-weight уже жирным или просто выглядел так? Без DevTools каждый ответ — это догадка.

Три сценария развития событий

Проблема 1 — Чтение рецепта, а не блюда

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

Это ИИ, читающий исходные файлы CSS. Он читает оригинальную выкройку. Браузер отрендерил что-то другое. ИИ продолжает изменять не тот шов.

Инспектор — это примерочная. Вы проверяете, что было на самом деле построено, прежде чем прикасаться к этому.

Проблема 2 — Настройка телевизионной антенны

Вы на заднем дворе настраиваете телевизионную антенну. Кто-то внутри смотрит на картинку. Каждый раз, когда вы ее двигаете, вы кричите «лучше или хуже?» и ждете. Каждая настройка — это круговой путь.

Это цикл «нажать-проверить-нажать». ИИ вносит изменение. Вы идете к браузеру. Вы смотрите. Вы возвращаетесь и печатаете то, что увидели. Каждый цикл — это круговой путь без прямой связи между человеком, держащим антенну, и человеком, смотрящим на экран.

Этот инструмент — провод. ИИ сам проверяет результат, без того, чтобы вы ходили туда-сюда.

Проблема 3 — Лечение не того пациента

Врач видит кого-то бледного и уставшего. Не обследуя его, он предполагает дефицит железа и назначает соответствующее лечение. Через шесть недель ничего не изменилось. Все это время была щитовидка.

ИИ смотрит на текст, который кажется жирным на скриншоте. Он предполагает, что font-weight установлен на высокое значение. Он пытается переопределить его. Но значение было 400 — текст просто так выглядел при таком размере. ИИ потратил сессию на решение проблемы, которой не существовало.

Проверяйте, прежде чем назначать лечение. Вычисленное значение — это обследование.

Для кого это

Дизайнеры, использующие ИИ-инструменты для кодинга — Cursor, Claude Code, Windsurf, Cline. Вы мыслите и проверяете визуально. Открытие DevTools и вставка HTML обратно в чат — это резкое переключение контекста, которое нарушает ваш поток. Это полностью устраняет этот шаг.

Frontend-инженеры, которые хотят, чтобы их ИИ-напарник замыкал цикл самостоятельно — проверять, изменять, подтверждать — без необходимости объяснять ему, что на самом деле рендерит браузер.

Контрибьюторы дизайн-систем, работающие с библиотеками компонентов, где имена классов во время выполнения не совпадают с исходными. Ant Design, Material UI, Radix, Shadcn — везде, где браузер строит структуру, отличную от той, что в JSX.

Любой, кто отлаживает CSS и когда-либо говорил «почему это не применяется?» и хотел, чтобы ИИ мог просто посмотреть на браузер, а не гадать.

Работает вместе с claude --chrome

Интеграция claude --chrome от Anthropic позволяет Claude Code перемещаться, нажимать, заполнять формы и делать скриншоты в вашем живом браузере. browser-inspector-mcp делает другое: он читает каскад CSS — какое правило побеждает, откуда оно пришло, почему стиль не применяется.

Они предназначены для разных задач. Хороший рабочий процесс: используйте claude --chrome для перехода к состоянию, которое вы хотите проверить, а затем используйте browser-inspector-mcp для отладки CSS. Ни один инструмент не заменяет другой.

Один инструмент, четыре действия

dom — Посмотрите, что на самом деле построил браузер

Прежде чем ИИ напишет какой-либо CSS, он вызывает это. Возвращает реальный отрендеренный HTML — фактические имена классов во время выполнения, фактическую структуру DOM — для любого элемента, на который вы укажете.

Это примерочная. ИИ проверяет, что было на самом деле построено, прежде чем прикасаться к этому.

styles — Посмотрите каждое правило CSS и кто побеждает

Когда изменение стиля не отображается, это возвращает полный каскад CSS для элемента: каждое правило, которое сработало, по порядку, откуда оно пришло (таблица стилей + номер строки) и какие свойства активны, а какие переопределены.

Также поднимается