Chrome DevTools es el conjunto de herramientas para desarrolladores web integrado en Google Chrome. Se abre con F12, Ctrl + Shift + I en Windows y Linux o Cmd + Option + I en Mac. Te permite inspeccionar y editar en vivo el HTML y el CSS de una página, ejecutar JavaScript, ver cada petición de red, medir el rendimiento, emular teléfonos y auditar páginas. Esta guía repasa los paneles que más vas a usar, en el orden en que suelen hacer falta, y los atajos que más tiempo ahorran.
Cómo abrir DevTools y orientarte
Además de los atajos de teclado, puedes hacer clic derecho en cualquier elemento y elegir Inspeccionar: DevTools se abre con ese elemento seleccionado. El menú de Chrome también tiene Más herramientas > Herramientas para desarrolladores.
Desde el principio importan tres controles:
- Las pestañas de paneles en la parte superior (Elements, Console, Sources, Network y más). Los paneles menos usados se esconden tras la flecha
>>. - La posición del panel en el menú de tres puntos: derecha, abajo, izquierda o ventana independiente. La ventana independiente es útil con dos pantallas.
- El menú de comandos:
Ctrl + Shift + P(Cmd + Shift + Pen Mac). Escribe el nombre de cualquier función (“screenshot”, “disable JavaScript”, “dark mode”) para encontrarla. Es la forma más rápida de descubrir lo que puede hacer DevTools.
Elements: inspeccionar y editar HTML y CSS
El panel Elements muestra el DOM en vivo, no el código fuente original, así que incluye todo lo que haya añadido JavaScript. Selecciona un nodo y el panel Styles de la derecha mostrará cada regla CSS que se aplica, cuál gana y cuáles aparecen tachadas.
Cosas que conviene probar:
- Haz clic en cualquier valor de Styles para editarlo y ver el resultado al instante. Los cambios se pierden al recargar, salvo que configures local overrides.
- Activa estados como
:hovery:focuscon el botón :hov para dar estilo a estados interactivos sin mantener el ratón quieto. - Haz clic en la muestra de color junto a un color para abrir el selector, que además muestra la relación de contraste del texto.
- Abre la pestaña Computed para ver el valor final de cada propiedad y el modelo de caja.
- Busca las insignias flex y grid junto a los elementos: al hacer clic se superponen las líneas del layout sobre la página.
Console: ejecutar JavaScript y leer errores
La consola muestra los errores, avisos y salidas de console.log de la página, y permite ejecutar JavaScript en su contexto. Ayudas útiles:
$0es el elemento seleccionado en el panel Elements.$$('a')devuelve como array todos los elementos que coinciden con un selector.copy(obj)copia un valor al portapapeles.- Filtra por nivel (errores, avisos) y por texto para quitar ruido.
Sources: depurar JavaScript
El panel Sources muestra los archivos de la página y es donde se ponen los puntos de interrupción. Haz clic en un número de línea para pausar ahí, luego avanza paso a paso e inspecciona las variables. Los puntos de interrupción condicionales (clic derecho en el número de línea) solo pausan cuando una expresión es verdadera. Los Event listener breakpoints pausan en cualquier clic, pulsación de tecla u otro evento, algo muy útil cuando no sabes qué código se ejecuta.
Network: ver cada petición
El panel Network lista todas las peticiones de la página: documentos, scripts, imágenes, fuentes y llamadas a API, con estado, tamaño y tiempos. Haz clic en una petición para ver sus cabeceras, el payload, la respuesta y el desglose de tiempos.
Usos prácticos:
- Marca Disable cache para cargar siempre archivos nuevos mientras DevTools esté abierto.
- Usa el menú Throttling para simular una conexión móvil lenta.
- Filtra por tipo (Fetch/XHR, JS, Img) para encontrar la petición que te interesa.
- Haz clic derecho en una petición y cópiala como
fetchocURLpara repetirla en otro sitio.
Performance: encontrar lo que ralentiza una página
Graba la carga de una página o una interacción y el panel Performance mostrará una línea de tiempo de lo que hizo el navegador: scripts, renderizado, pintado y red. Las tareas largas aparecen marcadas en rojo. El panel también muestra en vivo las Core Web Vitals (LCP, CLS e INP) de tus propias interacciones y pistas sobre las causas probables. Para resultados parecidos a un móvil, ajusta la ralentización de CPU a 4x o 6x antes de grabar. Más en la guía del test de velocidad móvil.
Application: almacenamiento, cookies y service workers
El panel Application muestra lo que guarda la página: cookies, local y session storage, IndexedDB, cache storage y los service workers registrados. Puedes editar o borrar entradas, que es la forma más rápida de reiniciar un inicio de sesión o probar la experiencia de primera visita. Clear site data lo borra todo para el origen actual.
Lighthouse: auditar una página
El panel Lighthouse ejecuta auditorías automáticas de rendimiento, accesibilidad, buenas prácticas y SEO, en modo móvil o escritorio. Paso a paso: cómo hacer una auditoría de Lighthouse para móvil.
Modo dispositivo: emular teléfonos y tablets
La barra de dispositivos (Ctrl + Shift + M o Cmd + Shift + M con DevTools enfocado) convierte la página en una vista de teléfono o tablet, con el viewport, la densidad de píxeles, el user agent y los eventos táctiles correspondientes. Lo explicamos a fondo en la guía del emulador móvil de Chrome. Para revisiones visuales rápidas sin abrir DevTools, Mobile View Extension ofrece el mismo tipo de vista previa desde un botón de la barra de herramientas.
Atajos que vale la pena memorizar
| Acción | Windows / Linux | Mac |
|---|---|---|
| Abrir DevTools | F12 o Ctrl + Shift + I |
Cmd + Option + I |
| Abrir directamente la Console | Ctrl + Shift + J |
Cmd + Option + J |
| Modo inspeccionar elemento | Ctrl + Shift + C |
Cmd + Shift + C |
| Menú de comandos | Ctrl + Shift + P |
Cmd + Shift + P |
| Barra de dispositivos | Ctrl + Shift + M |
Cmd + Shift + M |
| Buscar en todos los archivos | Ctrl + Shift + F |
Cmd + Option + F |
| Abrir archivo por nombre | Ctrl + P |
Cmd + P |
| Recarga forzada | Ctrl + Shift + R |
Cmd + Shift + R |
Ampliar DevTools
Las extensiones de Chrome pueden añadir sus propios paneles a DevTools: devtools de React, Vue, Angular y Redux, y verificadores de accesibilidad como axe DevTools. Hay una lista breve en extensiones de Chrome para desarrolladores web.
Preguntas frecuentes
¿Cómo abro las herramientas para desarrolladores en Chrome?
Pulsa F12 o Ctrl + Shift + I en Windows y Linux, Cmd + Option + I en Mac, o haz clic derecho en la página y elige Inspeccionar.
¿Puedo editar una web con Chrome DevTools?
Puedes editar el HTML y el CSS de la página en tu propio navegador para probar cambios. Las ediciones son locales y desaparecen al recargar; no cambian la web real.
¿Chrome DevTools es gratis?
Sí. DevTools forma parte de Chrome y de todos los navegadores basados en Chromium, como Edge, Brave y Opera, sin descargas adicionales.