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.