Chrome acaba de se tornar o navegador definitivo para Agentes (Finalmente!)

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00A equipe do Chrome finalmente lançou uma atualização que permite ao servidor MCP do Chrome DevTools
00:00:06se comunicar com uma instância aberta do Chrome para depurar problemas em páginas de login,
00:00:12analisar sessões ao vivo e até realizar depurações avançadas, como acessar
00:00:17elementos selecionados, erros específicos e até atividades de rede.
00:00:21Mas com outras ferramentas de IA, como Agent Browser e Playwright, que já oferecem CLI
00:00:26e habilidades via servidor MCP, será que o Chrome DevTools MCP terá que
00:00:31adicionar isso no futuro?
00:00:33Inscreva-se no canal e vamos descobrir.
00:00:35Alguns meses atrás, Anjis criou um vídeo dando uma ótima visão geral do servidor MCP
00:00:44do Chrome DevTools, mas na época ele só podia abrir uma nova sessão do Chrome, ou você
00:00:49tinha que conectá-lo a uma porta de depuração remota, o que exigia muita configuração manual.
00:00:53Agora, no Chrome versão 144 ou superior, com a flag de depuração remota ativada, a ferramenta
00:00:58MCP do Chrome detecta automaticamente uma sessão aberta para depuração, o que muda
00:01:04tudo para mim, pois prefiro usar o Claude Code no terminal. Isso significa
00:01:09que não preciso mais de navegadores de IA como Deer e Comet, nem da extensão do Claude,
00:01:15ou mesmo de ferramentas úteis como o React Grab.
00:01:18Vamos ver essas novas funções do Chrome DevTools MCP em ação.
00:01:22Primeiro, você precisa ter o servidor MCP instalado com a opção de autoconexão disponível.
00:01:27Estou usando código aberto, mas ele suporta vários agentes. No Chrome,
00:01:31você deve acessar esta URL e garantir que esta opção esteja ativada.
00:01:36Antes, você teria que iniciar uma sessão com um comando como este e o agente
00:01:40se conectaria à porta exposta via HTTP.
00:01:43Mas com o novo método nesta interface, você inicia o Chrome normalmente, com acesso
00:01:48a todos os seus cookies e histórico, e pode desativá-lo quando terminar.
00:01:53Se você se preocupa com segurança, mais adiante no vídeo mostrarei como conectar
00:01:57a uma versão mais privada do Chrome.
00:01:59Após fazer essas duas coisas — ativar a opção e conectar ao servidor MCP
00:02:04com a autoconexão — deve estar tudo pronto.
00:02:08Posso pedir ao meu agente para verificar o desempenho do Betastack e, no Chrome, verei
00:02:12este pop-up perguntando se permito a depuração remota, seguido por este banner no topo.
00:02:17O agente conseguiu navegar até o site Betastack e agora está usando
00:02:21a ferramenta de auditoria Lighthouse para me dar métricas da web, notas e outros detalhes.
00:02:27Mas agora vamos para algo realmente útil.
00:02:29Aqui está um app de aprendizado de idiomas no qual estou trabalhando.
00:02:31Entrei como admin, fui em conteúdo, escolhi uma unidade e cheguei a este exercício.
00:02:37Notei que, no modal do exercício, o botão de salvar aqui embaixo está diferente
00:02:42dos outros botões do site.
00:02:44Em vez de dizer ao agente para replicar meus passos, como fazer login e navegar
00:02:49até esta página específica, vou selecionar o botão salvar nas ferramentas de inspeção
00:02:55e perguntar ao agente se ele consegue ver o elemento que selecionei.
00:02:58Depois de um momento, ele consegue identificar que selecionei o botão de salvar.
00:03:02Então, vou pedir para ele mudar o estilo desse botão para ficar igual ao do novo exercício,
00:03:06que é este outro botão que vocês estão vendo aqui.
00:03:09Em poucos segundos, ele alterou o estilo do botão exatamente como eu queria.
00:03:13Se você estiver rodando o servidor MCP em um sandbox, terá que usar a opção
00:03:18da URL do navegador com a porta para depuração remota via HTTP, não WebSockets.
00:03:23E para quem prioriza segurança, será necessário adicionar o diretório de dados do usuário
00:03:28em um local específico como opção no servidor MCP. Assim, os agentes não terão
00:03:33acesso aos seus cookies, senhas, histórico de navegação e tudo mais.
00:03:36Você teria que fazer login novamente nos sites se quisesse que o agente os acessasse.
00:03:41Apesar de ser incrível, se você viu meus vídeos anteriores, sabe que não sou
00:03:46o maior fã de servidores MCP, pois eles consomem muito contexto se você usar
00:03:51muitos deles ao mesmo tempo.
00:03:52Felizmente, o servidor MCP do Chrome DevTools permite fazer tudo via CLI,
00:03:59o que pouca gente sabe por estar meio escondido. Você precisa entrar
00:04:04no diretório de habilidades e depois em Chrome DevTools CLI para achar esse recurso experimental,
00:04:10que fornece ao seu agente as informações de como utilizá-lo.
00:04:12Também há instruções de instalação, caso você ainda não o tenha instalado.
00:04:16Isso é basicamente uma camada fina sobre o servidor MCP.
00:04:20Se você já o tem rodando em um agente, este CLI não usará aquela instância,
00:04:24pois ele utiliza seu próprio daemon.
00:04:26Este comando mostra informações sobre o daemon padrão e você já pode
00:04:30ver a flag da URL do navegador configurada com outras como headless e isolated.
00:04:34Mas note que não há opção de autoconexão nas opções disponíveis no CLI.
00:04:39Então, se não iniciou o Chrome pelo terminal, você teria que fechar o atual e
00:04:43rodá-lo assim, garantindo que, se usar a flag da porta de depuração remota,
00:04:48também use a flag de dados do usuário.
00:04:50Agora, com isso pronto, posso iniciar o daemon, listar as páginas e ele
00:04:54mostrará apenas uma nova aba, já que não há muita coisa aberta no momento.
00:04:57Mas, claro, o poder real aparece quando você o utiliza com um agente.
00:05:01Se eu desativar a ferramenta MCP do Chrome, selecionar este botão no DevTools e pedir ao agente
00:05:06para usar o CLI e descobrir qual elemento está selecionado, vemos que ele consegue.
00:05:10Ele identificou corretamente.
00:05:11Note que as informações no diretório de dados do usuário persistem entre as sessões.
00:05:15Isso mantém todos os meus cookies, dados de navegação e assim por diante.
00:05:19Além disso, o Chrome DevTools CLI pode fazer muito mais coisas.
00:05:22Recomendo que você explore essa habilidade e talvez, no futuro, eles
00:05:26introduzam o recurso de autoconexão também no CLI.
00:05:28Então é isso, um resumo rápido de alguns dos novos recursos do servidor MCP
00:05:32e do CLI do Chrome DevTools, que com certeza vão melhorar sua experiência de depuração
00:05:38com assistentes de código.
00:05:39Como usuário do Arc — sim, ainda uso o Arc — eu adoraria ver esse recurso nele futuramente.
00:05:45Mas por enquanto, estou satisfeito usando o Agent Browser da Vassal, que tem
00:05:50funcionado muito bem para mim.
00:05:51Se você não conhece o Agent Browser, veja o vídeo que fiz um tempo atrás, embora
00:05:55ele tenha melhorado bastante desde então.
00:05:58Talvez seja hora de eu gravar um novo vídeo sobre ele.

Key Takeaway

A nova atualização do servidor MCP do Chrome DevTools transforma o navegador em uma ferramenta definitiva para agentes de IA, facilitando a depuração ao vivo e a automação de tarefas web complexas.

Highlights

O Chrome DevTools MCP agora permite a comunicação direta com instâncias abertas do navegador para depuração avançada.

A versão 144 ou superior do Chrome introduz a detecção automática de sessões (autoconexão), eliminando configurações manuais complexas.

Integração nativa com agentes de IA como Claude Code, permitindo analisar elementos selecionados e sessões ao vivo.

Capacidade de realizar auditorias de desempenho via Lighthouse e manipular estilos CSS em tempo real através de comandos do agente.

Existência de uma interface CLI oculta no diretório de habilidades que oferece funcionalidades experimentais para desenvolvedores.

Opções de privacidade que permitem isolar dados do usuário e cookies, garantindo segurança ao interagir com agentes de IA.

Persistência de dados no diretório do usuário, facilitando o fluxo de trabalho entre diferentes sessões de depuração.

Timeline

Introdução e Novidades do Chrome DevTools MCP

O vídeo começa apresentando a atualização crucial que permite ao servidor MCP do Chrome DevTools se comunicar com instâncias abertas do navegador. Esta funcionalidade é essencial para depurar páginas de login e analisar atividades de rede em tempo real. O narrador menciona ferramentas concorrentes como Agent Browser e Playwright, questionando se o Chrome precisará evoluir ainda mais. Anteriormente, o processo exigia a abertura de novas sessões ou configurações manuais de portas de depuração remota. Agora, a integração promete ser muito mais fluida para desenvolvedores que utilizam agentes de IA.

Configuração da Autoconexão e Benefícios

Nesta seção, é explicado que o Chrome versão 144 ou superior detecta automaticamente sessões abertas quando a flag de depuração remota está ativa. Isso elimina a necessidade de navegadores específicos para IA ou extensões adicionais, como o Claude Extension. O palestrante demonstra como ativar a opção de autoconexão na interface do servidor MCP e destaca a conveniência de manter cookies e histórico. O processo de inicialização é simplificado, permitindo que o agente se conecte sem comandos complexos de terminal. A facilidade de uso é comparada favoravelmente a métodos antigos de conexão via porta HTTP.

Demonstração Prática: Auditoria e Manipulação de UI

O narrador realiza uma demonstração prática utilizando um agente para verificar o desempenho de um site via Lighthouse. Ao solicitar a análise, o Chrome exibe pop-ups de segurança para permitir a depuração remota de forma controlada. Um exemplo real é mostrado com um aplicativo de aprendizado de idiomas, onde o agente identifica um botão selecionado pelo usuário. O agente de IA consegue então alterar o estilo CSS do botão selecionado para corresponder a outro elemento em segundos. Esta interação demonstra o poder de manipulação visual direta que a ferramenta oferece aos desenvolvedores.

Segurança, Sandboxing e Isolamento de Dados

A segurança é abordada como uma prioridade, especialmente para quem roda servidores MCP em sandboxes. O palestrante explica como usar diretórios de dados de usuário específicos para evitar que agentes acessem senhas ou históricos privados. Se essa opção for utilizada, o usuário precisará fazer login novamente nos sites dentro da sessão isolada. Essa flexibilidade permite equilibrar a conveniência do acesso total com a necessidade de proteção de dados sensíveis. É um passo importante para tornar o uso de agentes de IA mais seguro em ambientes profissionais.

Recursos Ocultos: Chrome DevTools CLI

O vídeo revela um recurso pouco conhecido: o Chrome DevTools CLI, localizado no diretório de habilidades (skills). Embora o narrador não seja fã do consumo de contexto de múltiplos servidores MCP, ele destaca que o CLI é uma camada eficiente que utiliza seu próprio daemon. São mostradas instruções de instalação e como utilizar flags como 'headless' e 'isolated' para maior controle. O CLI permite listar páginas abertas e identificar elementos selecionados sem a interface gráfica do servidor. O autor encoraja a exploração desta ferramenta experimental que promete expandir ainda mais as capacidades de automação.

Considerações Finais e Comparativos

Na conclusão, o autor resume como as novas funções de autoconexão e o CLI melhoram a experiência de depuração com assistentes de código. Ele menciona seu uso pessoal do navegador Arc e expressa o desejo de ver recursos semelhantes integrados nele futuramente. Por enquanto, ele continua recomendando o Agent Browser da Vassal como uma alternativa robusta que tem funcionado bem. O vídeo termina com uma promessa de atualizar o conteúdo sobre o Agent Browser em breve devido às melhorias recentes. O tom final é de otimismo com o avanço rápido das ferramentas de navegação para IA.

Community Posts

View all posts