Chrome DevTools

Source: https://github.com/ChromeDevTools/awesome-chrome-devtools at 83087609da17
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

Awesome Chrome DevTools

Ferramentas e recursos excepcionais no ecossistema do Chrome DevTools

Ferramentas, drivers de protocolo, visualizadores de trace e frontends independentes construídos em torno do Chrome DevTools e do Chrome DevTools Protocol (CDP). Seguindo o Awesome Manifesto, mantemos esta lista focada no que é genuinamente útil em vez de indexar tudo no espaço.

Conteúdo

• Aprendizado
• Tracing e Profiling
• Chrome DevTools Protocol
• Usando o frontend do DevTools com outras plataformas
• Extensões do DevTools
• Projetos aposentados

---

Aprendizado

• Dev Tips - Grande coleção de dicas como gifs animados.
• DevTools Tips - Coleção de dicas ilustradas como mini tutoriais.
• Web cheatcodes - Ferramentas de desenvolvedor do navegador para não desenvolvedores.
• Dear Console - Uma coleção de snippets para usar no console do navegador.
• Chrome Secret Menus - Guia das páginas internas chrome:// do Chrome e ferramentas de diagnóstico.
• Front-end Debugging Tools Handbook - Guia prático de depuração front-end entre DevTools, extensões de frameworks e IDEs.

---

Tracing e Profiling

Os traces do DevTools Performance e os logs .cpuprofile do V8 são JSON puro por baixo, e alguns visualizadores independentes fazem maravilhas com eles:

• trace.cafe - Compartilhe e veja traces de performance web diretamente no painel Performance do DevTools (fonte).
• speedscope - Visualizador de flamegraph rápido e interativo que importa .cpuprofile e traces de linha do tempo do Chrome.
• cpupro - Analisador V8/Chrome .cpuprofile profundo com flamegraphs, árvores de chamadas e diagnóstico de pontos quentes.
• Perfetto - Suíte de perfilagem de sistema e análise de trace (ui.perfetto.dev) com suporte a trace do Chromium e consulta SQL de trace.

---

Chrome DevTools Protocol

Dica pro: ative o Protocol Monitor integrado do Chrome (More tools > Protocol monitor) para assistir ao tráfego CDP ao vivo e disparar comandos brutos direto no navegador.

• ChromeDevTools/devtools-protocol - Local canônico do JSON do protocolo, tipos TypeScript e rastreador de issues para bugs do protocolo.
• DevTools Protocol API Docs - Interface navegável para explorar os domínios, métodos e eventos do protocolo.

Desenvolvendo com o protocolo

• chrome-remote-interface Wiki - Receitas práticas para tarefas CDP brutas comuns.
• Chrome Protocol Proxy - Proxy para inspecionar e depurar o tráfego de cliente CDP.

As duas grandes bibliotecas de automação

• Puppeteer - API Node.js de alto nível para controlar o Chrome via CDP e WebDriver BiDi. Veja também awesome-puppeteer.
• Playwright - Automação multi-navegador para Chromium, Firefox e WebKit em Node.js, Python, .NET e Java. Veja também awesome-playwright.

Bibliotecas para dirigir o protocolo (ou uma camada acima)

• JavaScript/Node.js: chrome-remote-interface - Cliente CDP de baixo nível
• Rust: chromiumoxide - Biblioteca async/tokio com tipos gerados
• Rust: Rust Headless Chrome - Cliente Chrome headless de alto nível
• Java: chrome-devtools-java-client - Cliente de protocolo de baixo nível
• Java: jvppeteer - Chrome headless para Java
• Python: Zendriver - Automação de navegador CDP assíncrona
• Python: PyCDP - Wrappers sem E/S (veja também Trio driver)
• Python: ChromeController - Gerenciamento de navegador de alto nível
• Go: chromedp - Ações e tarefas de alto nível
• Go: Rod - Automação e scraping de alto nível
• Go: cdp - Bindings type-safe para CDP
• C#/.NET: Puppeteer Sharp - Port do Puppeteer
• C#/.NET: dotnet-chrome-protocol - Biblioteca de runtime e geração de código de esquema
• Ruby: Ferrum - API de alto nível para controlar o Chrome
• Ruby: Cuprite - Driver Capybara
• Kotlin: chrome-devtools-kotlin - Biblioteca cliente baseada em corrotinas
• Kotlin: kdriver - Automação de alto nível baseada em corrotinas
• Clojure: clj-chrome-devtools - Wrapper CDP autogerado
• Clojure: cuic - Automação de teste de UI de alto nível
• PHP: chrome-devtools-protocol - Biblioteca cliente

Automação de Navegador Agentica

Somos extremamente exigentes com esta seção. Todos estão encapsulando um navegador para agentes agora — espere que qualquer PR adicionando outro servidor MCP ou CLI de agente seja fechada, a menos que tenha tração real e faça algo novo com CDP por baixo.

• chrome-devtools-mcp - Servidor MCP oficial para o Chrome DevTools, que também inclui uma CLI.
• Webcmd - Compila a navegação do site em comandos CLI determinísticos por site para agentes de IA.
• Lumen - Agente de navegador voltado para visão com replay determinístico auto-curativo sobre CDP.
• bdg - Sessão CDP de segundo plano persistente expondo DOM, rede, console e métodos de protocolo brutos como comandos shell.

Adaptadores de Navegador

• devtools-remote-debugger - Depure uma página web remotamente via um agente CDP implementado em JS do lado do cliente.
• Inspect - Use o DevTools contra navegadores e WebViews iOS e Android. (código fechado)

Usando o frontend do DevTools com outras plataformas

A UI do DevTools é um app web que fala CDP sobre um WebSocket, então você pode incorporá-lo ou apontar para Node, Ruby, webviews móveis ou runtimes personalizados (veja chrome://inspect para alvos integrados).

• ChromeDevTools/devtools-frontend - Repositório fonte canônico para a UI do Chrome DevTools (publicado no npm como chrome-devtools-frontend).
• Chii e Eruda - Servidor de depuração remota usando a UI real devtools-frontend (Chii, um substituto moderno do Weinre) e o console DevTools móvel na página (Eruda).
• vscode-js-debug - Depurador oficial JavaScript e Chrome CDP compatível com DAP que alimenta o VS Code.
• VS Code - Elements for Microsoft Edge - Painéis Elements e Network embutidos dentro do VS Code.
• Debugging Node.js with Chrome DevTools - Guia sobre depurar e perfilar Node.js com node --inspect.
• ruby/debug - Depurador oficial do Ruby, que suporta conectar o Chrome DevTools via CDP (rdbg --open=chrome).

---

Extensões do DevTools

• React Developer Tools - Inspecione hierarquias de componentes React, props e flamegraphs do profiler.
• Vue.js Developer Tools - Inspecione componentes, estado e roteamento do Vue.js.
• Angular DevTools - Inspeção de árvore de componentes e profiling de detecção de mudanças para Angular.
• Redux Devtools - Depuração por volta no tempo e histórico de ações para Redux.
• Ember.js Inspector - Inspecione objetos, rotas e dados do Ember.js.
• Web Component DevTools - Inspecione, modifique e observe elementos customizados e shadow DOM na página.
• Clockwork - Perfilagem de aplicações PHP e inspeção de requisições no DevTools.
• RailsPanel - Painel de perfilagem de requisições e SQL do Ruby on Rails.

Projetos aposentados

Projetos antigos, provavelmente não mantidos mais… Mas ainda legais.

• ndb - Experiência de depuração Node.js aprimorada construída sobre o frontend do DevTools.
• thetool - Perfilagem de CPU, memória, cobertura e tipos para Node.js.
• Facebook Stetho - Depuração nativa Android com Chrome DevTools.
• PonyDebugger - Depuração remota de rede e Core Data para apps iOS via Chrome DevTools.
• betwixt - Proxy de rede em nível de sistema inspecionado através de um painel Network do DevTools independente.
• Dirac - Depuração ClojureScript com um fork customizado do DevTools.
• VS Code - Debugger for Chrome - Depurador original do Chrome para VS Code (substituído pelo vscode-js-debug integrado, que tem uma rica implementação CDP/DAP).
• noice-json-rpc - Biblioteca TypeScript/JS baseada em proxy expondo domínios CDP diretamente como uma API.
• PuPHPeteer - Ponte PHP para o Node Puppeteer.
• Insight - Kit de ferramentas de depuração WebGL para Chrome DevTools.
• Remote Debug Gateway - Conecte um cliente de depuração a múltiplos navegadores de uma vez.
  • DevTools multiusuário: DevTools Remote - Depure remotamente o navegador de outra pessoa.
• DevTools Backend - Implementação independente do backend do Chrome DevTools para depurar ambientes web arbitrários.
• Driver Python CDP: pychrome - Manipulador de transporte CDP de baixo nível.
• ios-webkit-debug-proxy - Expõe instâncias do Mobile Safari e UIWebView via CDP.
  • Remote Debug iOS WebKit adapter - Baseia-se em ios-webkit-debug-proxy e traduz o Remote Debugging Protocol do WebKit para CDP.
• IE Diagnostics Adapter - Adaptador de protocolo que traduz IE 11 para CDP.