#Проверяйте изменения интерфейса в браузере с Claude in Chrome

_{Средний уровень · Факультатив · около 15 минут · Нужно: Подключите инструмент через MCP · Сверено с Claude Code v2.1.285 (stable) 06.10.2026}

#Цель

К концу этого факультатива вы сможете подключить Claude Code к своему браузеру и поручить Claude проверить изменённую вами страницу: её консоль, то, что она показывает, и скриншот.

#Что понадобится

• Google Chrome или Microsoft Edge с расширением Claude in Chrome версии 1.0.36 или новее (Prerequisites).
• План Pro, Max, Team или Enterprise и вход через /login. При работе с API-ключом Claude Code держит интеграцию с Chrome выключенной.
• macOS, Linux или нативная Windows: в WSL интеграция с Chrome не поддерживается.
• Один из ваших репозиториев с папкой .practice/ и python3, чтобы раздавать страницу локально.
• Расход лимита: небольшой.

#Идея

Claude in Chrome через расширение подключает Claude Code к браузеру, которым вы пользуетесь каждый день. Claude открывает собственные вкладки в видимом окне, так что вы наблюдаете за его работой, и останавливается, чтобы вы сами прошли страницу входа или CAPTCHA.

В отличие от Chrome DevTools MCP из урока 7, который вы запускали с временным профилем, здесь используется состояние входа вашего браузера: Claude может попасть на любой сайт, где вы залогинены. Какие сайты Claude может просматривать, где нажимать и печатать, решают разрешения расширения для сайтов.

#Разбор примера

1. Сохраните страницу с ошибкой и раздайте папку только на этот компьютер:

cat > .practice/ui-demo.html <<'EOF'
<!doctype html>
<title>Linkcheck status</title>
<h1>Linkcheck status</h1>
<p id="status">Loading...</p>
<script>document.getElementById('stauts').textContent = 'Ready';</script>
EOF
python3 -m http.server 8000 --bind 127.0.0.1 --directory .practice

2. Во втором терминале запустите Claude Code с Chrome: claude --chrome. В первый раз появится окно с объяснением интеграции; нажмите Enter.
3. Выполните /chrome. Если он показывает Status: Enabled и Extension: Installed, интеграция работает. Если нет, закройте Claude Code, перезапустите Chrome и снова выполните claude --chrome: при первом запуске Claude Code устанавливает файл подключения, который Chrome читает только при старте (Extension not detected).
4. Попросите:

Open http://127.0.0.1:8000/ui-demo.html and tell me what the page shows. Read its console for errors, reloading the page if you need to catch errors from page load, and save a screenshot of it to disk.

Одобряйте каждый запрос, начинающийся с Claude in Chrome wants to; для этого сайта можно разрешить все действия на время сессии. Claude откроет вкладку, сообщит, что страница по-прежнему показывает Loading..., расскажет, что в консоли, и назовёт путь к скриншоту. Формулировки у вас будут другими.

#Ваша очередь

Исправьте ошибку и попросите Claude доказать исправление в браузере.

1. Попросите Claude исправить скрипт в .practice/ui-demo.html, чтобы страница показывала Ready.
2. Попросите перезагрузить страницу в Chrome, снова прочитать консоль и сохранить новый скриншот.

#Проверка

Факультатив пройден, когда выполнено всё это:

• /chrome показывает Status: Enabled и Extension: Installed.
• Оба скриншота существуют: ls -l для каждого пути, который назвал Claude.
• Самопроверка (не тестируется): после исправления в консоли нет ошибок, а на новом скриншоте видно Ready.

Если Claude не пользуется браузером, запустите сессию с --chrome или выполните /chrome и выберите Enabled by default. Тогда инструменты браузера будут загружаться в каждую сессию, а это расходует больше контекста.

#Что дальше

• Use Claude Code with Chrome: другие сценарии — от заполнения форм до записи GIF — и решение проблем.
• Get started with Claude in Chrome: само расширение, его горячие клавиши и разрешения.

_{Источники: Use Claude Code with Chrome}

_{Назад к оглавлению Среднего уровня · Тема: MCP · Застряли на уроке?}