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

Herramientas y recursos excepcionales en el ecosistema de Chrome DevTools

Herramientas, controladores de protocolo, visualizadores de trazas y frontends independientes construidos en torno a Chrome DevTools y el Chrome DevTools Protocol (CDP). Siguiendo el Awesome Manifesto, mantenemos esta lista centrada en lo que es realmente útil en lugar de indexar todo lo que hay en el ámbito.

Contenido

• Aprendizaje
• Trazado y perfilado
• Chrome DevTools Protocol
• Usar el frontend de DevTools con otras plataformas
• Extensiones de DevTools
• Proyectos antiguos

---

Aprendizaje

• Dev Tips - Gran colección de trucos como gifs animados.
• DevTools Tips - Colección de trucos ilustrados como mini tutoriales.
• Web cheatcodes - Herramientas de desarrollo del navegador para no desarrolladores.
• Dear Console - Una colección de fragmentos para usar en la consola del navegador.
• Chrome Secret Menus - Guía de las páginas internas chrome:// de Chrome y las herramientas de diagnóstico.
• Front-end Debugging Tools Handbook - Guía práctica de depuración front-end entre DevTools, extensiones de frameworks e IDEs.

---

Trazado y perfilado

Las trazas de DevTools Performance y los registros V8 .cpuprofile son JSON puro por debajo, y algunos visualizadores independientes hacen maravillas con ellos:

• trace.cafe - Comparte y visualiza trazas de rendimiento web directamente en el panel Performance de DevTools (fuente).
• speedscope - Visualizador de flamegraphs rápido e interactivo que importa .cpuprofile y trazas de línea de tiempo de Chrome.
• cpupro - Analizador V8/Chrome .cpuprofile profundo con flamegraphs, árboles de llamadas y diagnóstico de puntos calientes.
• Perfetto - Suite de perfilado de sistema y análisis de trazas (ui.perfetto.dev) con soporte de trazas Chromium y consultas SQL de trazas.

---

Chrome DevTools Protocol

Sugerencia pro: activa el Protocol Monitor integrado de Chrome (More tools > Protocol monitor) para ver el tráfico CDP en vivo y lanzar comandos en bruto directamente en el navegador.

• ChromeDevTools/devtools-protocol - Ubicación canónica del JSON del protocolo, los tipos de TypeScript y el rastreador de incidencias para errores del protocolo.
• DevTools Protocol API Docs - Interfaz navegable para explorar los dominios, métodos y eventos del protocolo.

Desarrollar con el protocolo

• chrome-remote-interface Wiki - Recetas útiles para tareas CDP en bruto comunes.
• Chrome Protocol Proxy - Proxy para inspeccionar y depurar el tráfico de cliente CDP.

Las dos grandes bibliotecas de automatización

• Puppeteer - API de alto nivel de Node.js para controlar Chrome mediante CDP y WebDriver BiDi. Ver también awesome-puppeteer.
• Playwright - Automatización multi-navegador para Chromium, Firefox y WebKit en Node.js, Python, .NET y Java. Ver también awesome-playwright.

Bibliotecas para controlar el protocolo (o una capa superior)

• JavaScript/Node.js: chrome-remote-interface - Cliente CDP de bajo nivel
• Rust: chromiumoxide - Biblioteca async/tokio con tipos generados
• Rust: Rust Headless Chrome - Cliente Chrome headless de alto nivel
• Java: chrome-devtools-java-client - Cliente de protocolo de bajo nivel
• Java: jvppeteer - Chrome headless para Java
• Python: Zendriver - Automatización de navegador CDP asíncrona
• Python: PyCDP - Wrappers sin E/S (ver también Trio driver)
• Python: ChromeController - Gestión de navegador de alto nivel
• Go: chromedp - Acciones y tareas de alto nivel
• Go: Rod - Automatización y scraping de alto nivel
• Go: cdp - Bindings con seguridad de tipos para CDP
• C#/.NET: Puppeteer Sharp - Port de Puppeteer
• C#/.NET: dotnet-chrome-protocol - Biblioteca de runtime y generación de código de esquema
• Ruby: Ferrum - API de alto nivel para controlar Chrome
• Ruby: Cuprite - Controlador Capybara
• Kotlin: chrome-devtools-kotlin - Biblioteca cliente basada en corrutinas
• Kotlin: kdriver - Automatización de alto nivel basada en corrutinas
• Clojure: clj-chrome-devtools - Wrapper CDP autogenerado
• Clojure: cuic - Automatización de pruebas UI de alto nivel
• PHP: chrome-devtools-protocol - Biblioteca cliente

Automatización de navegador con agentes

Somos extremadamente exigentes con esta sección. Ahora mismo todo el mundo está encapsulando un navegador para agentes — espera que cualquier PR que añada otro servidor MCP o CLI de agente se cierre salvo que tenga tracción real y haga algo novedoso con CDP por debajo.

• chrome-devtools-mcp - Servidor MCP oficial para Chrome DevTools, que también incluye una CLI.
• Webcmd - Compila la navegación del sitio en comandos CLI deterministas por sitio para agentes de IA.
• Lumen - Agente de navegador centrado en la visión con reproducción determinista autocurativa sobre CDP.
• bdg - Sesión CDP de fondo persistente que expone el DOM, la red, la consola y los métodos de protocolo en bruto como comandos de shell.

Adaptadores de navegador

• devtools-remote-debugger - Depura una página web de forma remota mediante un agente CDP implementado en JS del lado del cliente.
• Inspect - Usa DevTools con navegadores y WebViews de iOS y Android. (código cerrado)

Usar el frontend de DevTools con otras plataformas

La UI de DevTools es una aplicación web que habla CDP sobre un WebSocket, así que puedes incrustarla o apuntarla a Node, Ruby, webviews móviles o runtimes personalizados (consulta chrome://inspect para las targets integradas).

• ChromeDevTools/devtools-frontend - Repositorio fuente canónico de la UI de Chrome DevTools (publicado en npm como chrome-devtools-frontend).
• Chii y Eruda - Servidor de depuración remota que usa la verdadera UI devtools-frontend (Chii, un reemplazo moderno de Weinre) y la consola DevTools móvil dentro de la página (Eruda).
• vscode-js-debug - Depurador oficial de JavaScript y Chrome CDP compatible con DAP que alimenta VS Code.
• VS Code - Elements for Microsoft Edge - Paneles Elements y Network integrados dentro de VS Code.
• Debugging Node.js with Chrome DevTools - Guía sobre depurar y perfilar Node.js con node --inspect.
• ruby/debug - Depurador oficial de Ruby, que admite conectar Chrome DevTools mediante CDP (rdbg --open=chrome).

---

Extensiones de DevTools

• React Developer Tools - Inspecciona jerarquías de componentes React, props y flamegraphs del profiler.
• Vue.js Developer Tools - Inspecciona componentes, estado y enrutado de Vue.js.
• Angular DevTools - Inspección del árbol de componentes y perfilado de detección de cambios para Angular.
• Redux Devtools - Depuración de viaje en el tiempo e historial de acciones para Redux.
• Ember.js Inspector - Inspecciona objetos, rutas y datos de Ember.js.
• Web Component DevTools - Inspecciona, modifica y observa elementos personalizados y shadow DOM en la página.
• Clockwork - Perfilado de aplicaciones PHP e inspección de peticiones en DevTools.
• RailsPanel - Panel de perfilado de peticiones y SQL de Ruby on Rails.

Proyectos antiguos

Proyectos viejos, probablemente ya no mantenidos… Pero aún geniales.

• ndb - Experiencia de depuración de Node.js mejorada basada en el frontend DevTools.
• thetool - Perfilado de CPU, memoria, cobertura y tipos para Node.js.
• Facebook Stetho - Depuración nativa de Android con Chrome DevTools.
• PonyDebugger - Depuración remota de red y Core Data para apps iOS vía Chrome DevTools.
• betwixt - Proxy de red a nivel de sistema inspeccionado mediante un panel Network de DevTools independiente.
• Dirac - Depuración de ClojureScript con un fork personalizado de DevTools.
• VS Code - Debugger for Chrome - Depurador original de Chrome para VS Code (sustituido por el vscode-js-debug integrado, que tiene una rica implementación CDP/DAP).
• noice-json-rpc - Biblioteca TypeScript/JS basada en proxy que expone los dominios CDP directamente como una API.
• PuPHPeteer - Puente PHP a Node Puppeteer.
• Insight - Kit de herramientas de depuración WebGL para Chrome DevTools.
• Remote Debug Gateway - Conecta un cliente de depuración a varios navegadores a la vez.
  • DevTools multiusuario: DevTools Remote - Depura de forma remota el navegador de otra persona.
• DevTools Backend - Implementación independiente del backend de Chrome DevTools para depurar cualquier entorno web.
• Controlador Python CDP: pychrome - Manejador de transporte CDP de bajo nivel.
• ios-webkit-debug-proxy - Expone instancias de Mobile Safari y UIWebView vía CDP.
  • Remote Debug iOS WebKit adapter - Se basa en ios-webkit-debug-proxy y traduce el Protocolo de Depuración Remota de WebKit a CDP.
• IE Diagnostics Adapter - Adaptador de protocolo que traduce IE 11 a CDP.