BrowserTools MCP: serviço MCP para monitoramento em tempo real da atividade do navegador

Introdução geral

Ferramentas do navegador MCP é um projeto de código aberto desenvolvido pela equipe do AgentDeskAI. Ele usa extensões do Chrome e serviços Node.js para permitir que a IA monitore a atividade do navegador em tempo real, incluindo registros, solicitações de rede e capturas de tela, bem como para analisar o desempenho da Web, SEO e acessibilidade. O projeto é baseado em Antrópica Protocolo MCP, adequado para uso com Cursor A versão mais recente, 1.2.0, foi lançada em fevereiro de 2025 e tem mais de 2400 estrelas no GitHub. A versão mais recente, 1.2.0, foi lançada em fevereiro de 2025 e tem mais de 2.400 estrelas no GitHub. É simples e prático, especialmente para desenvolvedores que depuram páginas da Web ou otimizam sites, e todos os dados são armazenados localmente sem envolver serviços de terceiros.

Lista de funções

• Capture logs do console do navegador em tempo real para localizar problemas de código.
• Monitore as solicitações de rede quanto ao status da solicitação e aos erros.
• Capture a tela atual da Web, salve-a ou cole-a no editor.
• Analise os elementos DOM da página da Web para extrair dados específicos.
• Realize uma auditoria de desempenho para descobrir a causa do carregamento lento.
• Verifique a otimização de SEO e forneça sugestões de aprimoramento.
• Realiza auditorias de acessibilidade e está em conformidade com as WCAG.
• Suporte à auditoria de projetos NextJS para otimizar problemas de estrutura.
• Fornece o modo de depuração para executar todas as ferramentas de depuração em sequência.
• Fornece um modo de auditoria que executa todas as ferramentas de auditoria em sequência.

Usando a Ajuda

O BrowserTools MCP requer três componentes para ser executado: a extensão do Chrome, o servidor Node e o servidor MCP. Aqui está um guia detalhado de instalação e uso para garantir que você comece a usar rapidamente.

Processo de instalação

1. Instalar a extensão do Chrome
   • Faça o download da extensão em https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip.
   • Extraia o arquivo ZIP para uma pasta local.
   • Abra o Chrome e vá para chrome://extensions/.
   • Ative o "Modo de desenvolvedor" e clique em "Carregar extensão".
   • Selecione a pasta extraída e verifique se a extensão aparece na lista.
2. Executando o servidor Node
   • Certifique-se de que o Node.js esteja instalado em seu computador (recomenda-se ter mais de 18 anos).
   • Abra um terminal e execute-o:

     npx @agentdeskai/browser-tools-server@latest
     

   • A mensagem "Server running on port 3025" indica que a inicialização foi bem-sucedida.
   • Se houver um conflito de portas, feche o processo ocupante e tente novamente.
3. Configuração do servidor MCP (Cursor como exemplo)
   • Abra o Cursor e vá para Configurações > MCP.
   • Clique em Add New Global MCP Service (Adicionar novo serviço global de MCP).
   • compilador ~/.cursor/mcp.jsonAdicionar:

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

   • Depois de salvar e atualizar as configurações, um ponto verde indica uma conexão bem-sucedida.

Operação das principais funções

1. Monitoramento dos registros do console
   • Abra a página da Web de destino e pressione F12 para acessar as ferramentas do desenvolvedor.
   • Clique em "Connect" (Conectar) no painel "BrowserToolsMCP".
   • Os registros são exibidos em tempo real e podem ser salvos localmente clicando em "Save Logs" (Salvar registros).
2. Captura de solicitações da Web
   • Visualize os detalhes da solicitação na guia Rede.
   • Digite no Cursor mcp_getNetworkLogs Obter todas as solicitações, ou mcp_getNetworkErrors Exibir solicitação de erro.
3. captura de tela
   • Definir o caminho para salvar no painel de extensão (padrão) /mcp-screenshots).
   • Clique em "Take Screenshot" para salvar a captura de tela.
   • Quando a opção "Allow Auto-Paste into Cursor" (Permitir colar automaticamente no cursor) está ativada, a captura de tela é colada automaticamente ao focalizar a caixa de entrada do cursor.
4. Execução da ferramenta de auditoria
   • Certifique-se de que a extensão esteja ativada e tenha páginas ativas.
   • Digite o seguinte comando no Cursor:
     • runAccessibilityAuditVerificação de acessibilidade (WCAG).
     • runPerformanceAuditAnálise de gargalos de desempenho: Analise gargalos de desempenho.
     • runSEOAuditOtimização de SEO.
     • runBestPracticesAuditVerificação de práticas recomendadas.
     • runNextJSAuditAuditoria do projeto NextJS.
     • runAuditModeExecute todas as auditorias sequencialmente.
     • runDebuggerModeExecute todas as ferramentas de depuração em sequência.
   • Os resultados são retornados no formato JSON com a pontuação e os detalhes da pergunta.
5. Modo de comissionamento versus modo de auditoria
   • importação runDebuggerModeExecute as ferramentas de depuração em sequência para ajudar a localizar o problema.
   • importação runAuditModeDessa forma, a ferramenta de auditoria é executada sequencialmente para detectar todos os pontos de otimização.
   • O projeto NextJS reconhece automaticamente e executa adicionalmente as auditorias relevantes.

advertência

• Abra apenas uma janela da ferramenta do desenvolvedor; várias aberturas podem causar confusão de dados.
• Reiniciar o serviço ou atualizar a página limpará o registro, portanto, é recomendável salvá-lo com antecedência.
• Entre em contato com @tedx_ai (Plataforma X) ou consulte a documentação em https://browsertools.agentdesk.ai/ se tiver problemas.

Essas etapas permitem que você aproveite ao máximo o poder do BrowserTools MCP para aumentar a eficiência do seu desenvolvimento web.

cenário do aplicativo

1. depuração da web
   Os desenvolvedores o utilizam para monitorar registros e redes para encontrar rapidamente erros de código.
2. Otimização de sites
   Melhore a experiência do usuário com ferramentas de auditoria que analisam o desempenho e o SEO.
3. Suporte ao desenvolvimento de IA
   Os desenvolvedores de IA incorporam o Cursor para otimizar aplicativos inteligentes usando dados em tempo real.

QA

1. Por que o registro não aparece?
   Confirme se a extensão e o servidor estão conectados e verifique se a janela de ferramentas do desenvolvedor não foi aberta mais de uma vez.
2. Onde os resultados da auditoria são visualizados?
   Depois de executar o comando em um cliente MCP, como o Cursor, os resultados são retornados no formato JSON.
3. Há suporte para outros navegadores?
   Atualmente, apenas o Chrome é compatível, com possíveis extensões no futuro.