BrowserTools MCP: MCP-сервис для мониторинга активности браузера в режиме реального времени

Общее введение

BrowserTools MCP это проект с открытым исходным кодом, разработанный командой AgentDeskAI. Он использует расширения Chrome и сервисы Node.js, позволяющие искусственному интеллекту отслеживать активность браузера в режиме реального времени, включая журналы, сетевые запросы и скриншоты, а также анализировать производительность, SEO и доступность веб-сайтов. Проект основан на Антропология Протокол MCP, подходит для использования с Курсор Последняя версия 1.2.0 была выпущена в феврале 2025 года и имеет 2400+ звезд на GitHub. Последняя версия 1.2.0 была выпущена в феврале 2025 года и имеет 2400+ звезд на GitHub. Он прост и практичен, особенно для разработчиков, отлаживающих веб-страницы или оптимизирующих сайты, а все данные хранятся локально, без привлечения сторонних сервисов.

Список функций

• Захват журналов консоли браузера в режиме реального времени для выявления проблем с кодом.
• Мониторинг сетевых запросов на предмет статуса запроса и ошибок.
• Захватите текущий веб-экран, сохраните или вставьте его в редактор.
• Анализ элементов DOM веб-страницы для извлечения определенных данных.
• Проведите аудит производительности, чтобы выявить причину медленной загрузки.
• Проверка SEO-оптимизации и подготовка предложений по ее улучшению.
• Проводит аудит доступности и соответствует требованиям WCAG.
• Поддержка аудита проектов NextJS для оптимизации проблем с фреймворком.
• Обеспечивает режим отладки для последовательного запуска всех инструментов отладки.
• Обеспечивает режим аудита, в котором последовательно запускаются все инструменты аудита.

Использование помощи

Для работы BrowserTools MCP требуется три компонента: расширение Chrome, сервер Node и сервер MCP. Здесь представлено подробное руководство по установке и использованию, чтобы вы могли быстро приступить к работе.

Процесс установки

1. Установите расширение Chrome
   • Загрузите расширение с сайта https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip.
   • Распакуйте ZIP-файл в локальную папку.
   • Откройте Chrome и перейдите в раздел chrome://extensions/.
   • Включите "Режим разработчика" и нажмите "Загрузить расширение".
   • Выберите извлеченную папку и убедитесь, что расширение появилось в списке.
2. Запуск сервера Node
   • Убедитесь, что на вашем компьютере установлен Node.js (рекомендуется 18+).
   • Откройте терминал и запустите его:

     npx @agentdeskai/browser-tools-server@latest
     

   • Появление надписи "Server running on port 3025" означает успешный запуск.
   • Если есть конфликт портов, закройте занимающий их процесс и повторите попытку.
3. Настройка сервера MCP (на примере Cursor)
   • Откройте Cursor и перейдите в раздел Настройки > MCP.
   • Нажмите кнопку Добавить новую глобальную службу MCP.
   • компилятор ~/.cursor/mcp.jsonДобавить:

     {
     "mcpServers": {
     "browser-tools-mcp": {
     "command": "npx",
     "args": ["@agentdeskai/browser-tools-mcp@latest"]
     }
     }
     }
     

   • После сохранения и обновления настроек зеленая точка означает успешное подключение.

Работа основных функций

1. Журналы консоли мониторинга
   • Откройте целевую веб-страницу и нажмите F12, чтобы получить доступ к инструментам разработчика.
   • Нажмите кнопку "Подключить" на панели "BrowserToolsMCP".
   • Журналы отображаются в режиме реального времени и могут быть сохранены локально, нажав кнопку "Сохранить журналы".
2. Перехват веб-запросов
   • Просмотрите детали запроса на вкладке "Сеть".
   • На входе курсора mcp_getNetworkLogs Получить все запросы, или mcp_getNetworkErrors Запрос на просмотр ошибок.
3. захват экрана
   • Установите путь сохранения в панели расширений (по умолчанию) /mcp-screenshots).
   • Нажмите "Сделать скриншот", чтобы сохранить снимок экрана.
   • Если включен параметр "Разрешить автовставку в курсор", снимок экрана автоматически вставляется при наведении курсора на поле ввода.
4. Запуск инструмента аудита
   • Убедитесь, что расширение включено и имеет активные страницы.
   • Введите следующую команду с помощью курсора:
     • runAccessibilityAudit: Проверка доступности (WCAG).
     • runPerformanceAudit: Анализ узких мест в производительности.
     • runSEOAudit: Оптимизация SEO.
     • runBestPracticesAudit: Проверьте лучшие практики.
     • runNextJSAudit: Аудит проекта NextJS.
     • runAuditMode: Последовательное выполнение всех аудитов.
     • runDebuggerMode: Последовательно запустите все инструменты отладки.
   • Результаты возвращаются в формате JSON с оценкой и информацией о вопросе.
5. Режим ввода в эксплуатацию в сравнении с режимом аудита
   • импорт runDebuggerModeЗапустите инструменты отладки в последовательности, чтобы помочь найти проблему.
   • импорт runAuditModeТаким образом, инструмент аудита запускается последовательно, чтобы выявить все точки оптимизации.
   • Проект NextJS автоматически распознает и дополнительно проводит соответствующие аудиты.

предостережение

• Открывайте только одно окно инструмента разработчика, несколько открытий могут привести к путанице данных.
• Перезапуск службы или обновление страницы очистит журнал, поэтому рекомендуется сохранить его заранее.
• При возникновении проблем обращайтесь к @tedx_ai (платформа X) или смотрите документацию по адресу https://browsertools.agentdesk.ai/.

Эти шаги позволят вам в полной мере использовать возможности BrowserTools MCP для повышения эффективности веб-разработки.

сценарий применения

1. веб-отладка
   Разработчики используют его для мониторинга журналов и сетей, чтобы быстро находить ошибки в коде.
2. Оптимизация сайта
   Улучшите пользовательский опыт с помощью инструментов аудита, которые анализируют производительность и SEO.
3. Поддержка разработки искусственного интеллекта
   Разработчики ИИ используют Cursor для оптимизации интеллектуальных приложений с помощью данных в реальном времени.

QA

1. Почему журнал не отображается?
   Убедитесь, что расширение и сервер подключены, и проверьте, что окно инструментов разработчика не открывается более одного раза.
2. Где можно посмотреть результаты аудита?
   После выполнения команды в MCP-клиенте, таком как Cursor, результаты возвращаются в формате JSON.
3. Поддерживаются ли другие браузеры?
   В настоящее время поддерживается только Chrome, в будущем возможны расширения.