n8n Hosting

E se o Claude Code pudesse ver e controlar o teu Chrome aberto? Com teus logins, tuas abas, tudo? O Chrome 144 acabou de liberar isso. Um MCP server oficial do Google chamado Chrome DevTools MCP que conecta qualquer agente de IA direto na tua sessão do Chrome. Sem abrir browser novo, sem logar de novo. O agente vê exatamente o que tu vê. 🔴 Formação Vibe Coding (Antigravity, Claude Code e +): https://app.horadecodar.com.br/lp/formacao-vibe-coding?utm_source=yt 🟪 Hospedagem para n8n que eu indico: https://hostinger.com.br/matheusbattisti (use o cupom HORADECODAR para ter +10% de desconto) 📘 Guia Engenharia de Prompt: https://app.horadecodar.com.br/ebookpages/guia-engenharia-de-prompt Até agora todo agente de IA que precisava interagir com o browser abria uma instância limpa. Sem cookies, sem logins, sem nada. Quer debugar teu dashboard atrás de login? Loga de novo no browser do agente. Quer analisar performance da tua aplicação rodando? Abre outra instância. O agente era cego pro teu browser real. O Chrome DevTools MCP resolve isso conectando o agente direto na tua sessão autenticada com acesso ao DevTools completo: Elements, Network, Console, Performance. Funciona com Claude Code, Cursor, Gemini CLI e Copilot. O setup são 3 passos em menos de 2 minutos. Habilita remote debugging no Chrome em chrome://inspect/#remote-debugging. Adiciona o MCP no Claude Code. Reinicia e confirma a conexão. Pra adicionar no Claude Code, usa o comando: claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --autoConnect Ou cria um .mcp.json na raiz do projeto: { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } } Pra demonstrar uso um URL Shortener que construí com Next.js, React, Prisma, SQLite e Tailwind. Dashboard com cards de métricas, formulário pra encurtar URLs e página de analytics com 4 gráficos. Rodo local, logo no Chrome, e o Claude Code acessa essa sessão logada sem precisar autenticar de novo. Mostro 4 demos práticas. Primeiro um screenshot da sessão logada confirmando que o Claude Code vê o dashboard com meus dados sem abrir browser novo. Segundo análise de performance com trace completo identificando o que tá lento na página real com dados reais. Terceiro inspecionar um elemento que eu selecionei no DevTools e o Claude Code investigar problemas de performance e acessibilidade. Quarto debug de network listando todos os requests, identificando os mais lentos e encontrando erros escondidos. O terceiro demo é o mais interessante: eu seleciono um gráfico no DevTools e peço pro Claude Code analisar. Ele vê o elemento que EU selecionei, analisa DOM, CSS, tamanho do componente e sugere melhorias. Pair debugging com IA. Tu aponta o problema, o agente investiga. Importante sobre segurança: o agente tem acesso total à sessão incluindo cookies e senhas salvas. Só habilita remote debugging quando for usar e desliga depois. Não usa com perfil principal se tiver senhas de banco ou produção abertas. O Chrome mostra um banner enquanto o agente tá conectado e cada conexão pede permissão via diálogo. Se o Chrome stable não funcionar, usa a flag --channel=beta no comando. Funciona no Windows e Mac. Testei no Windows sem problemas. Entre no nosso servidor de Discord e me siga nas redes: 🟣 Discord Hora de Codar: https://discord.gg/Veq4mvsWwk 🔴 Instagram: https://www.instagram.com/horadecodar/ 🔷 Telegram: https://t.me/horadecodar TIMESTAMPS 00:00 O Google agora controla seus projetos web! Chrome DevTools MCP 01:09 Como funciona o MCP do Chrome DevTools 02:34 Configurando o Chrome para aceitar o Remote debugging 04:04 Configurando o MCP do Chrome DevTools 05:18 Testando o Chrome DevTools 10:45 Testando app com o novo recurso do Google Chrome 12:14 Conclusão sobre o Chrome DevTools MCP