Existen muchas formas de abrir las Herramientas para desarrolladores de Chrome. Elige tu forma favorita de esta referencia integral.
Puedes acceder a DevTools con la IU de Chrome o el teclado:
- Desde los menús desplegables de Chrome
- Con combinaciones de teclas específicas que abren Elements, Console o el último panel que usaste
Además, obtén información para abrir automáticamente las Herramientas para desarrolladores en cada pestaña nueva.
Cómo abrir las Herramientas para desarrolladores desde los menús de Chrome
Si prefieres la IU, puedes acceder a DevTools desde los menús desplegables de Chrome.
Abre el panel de elementos para inspeccionar el DOM o CSS
Para inspeccionar, haz clic con el botón derecho en un elemento de una página y selecciona Inspeccionar.
Las Herramientas para desarrolladores abren el panel Elementos y seleccionan el elemento en el árbol del DOM. En la pestaña Estilos, puedes ver las reglas de CSS aplicadas al elemento seleccionado.
Abrir el último panel que usaste desde el menú principal de Chrome
Para abrir el último panel de DevTools, haz clic en el botón a la derecha de la barra de direcciones y selecciona Más herramientas > Herramientas para desarrolladores.
Como alternativa, puedes abrir el último panel con un atajo. Consulta la siguiente sección para obtener más información.
Abrir paneles con combinaciones de teclas: Elementos, Consola o tu último panel
Si prefieres usar el teclado, presiona una combinación de teclas en Chrome según tu sistema operativo:
| SO | Elementos | Console | Tu último panel |
|---|---|---|---|
| Windows o Linux | Ctrl + Mayúsculas + C | Ctrl + Mayúsculas + J | F12 Ctrl + Mayúsculas + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
Esta es una forma sencilla de memorizar los atajos:
- La letra C significa CSS.
- J de JavaScript
- La letra I designa tu elección.
El atajo C abre el panel Elements en el modo de inspector . En este modo, se muestran sugerencias útiles cuando colocas el cursor sobre los elementos de una página. También puedes hacer clic en cualquier elemento para ver su CSS en la pestaña Elements > Styles.
Para obtener la lista completa de combinaciones de teclas de las Herramientas para desarrolladores, consulta Combinaciones de teclas.
Con Herramientas para desarrolladores abierto, vuelve a cargar la página con o sin caché.
Con las Herramientas para desarrolladores abiertas, puedes volver a cargar la página de tres maneras. En la barra de acciones principal de la ventana de Chrome, mantén presionado el botón Volver a cargar y elige una de las siguientes opciones:
Normal Reload Usa la caché para acelerar el tiempo de recarga.
Atajo: Cmd + R (macOS) o Ctrl + R (Windows/Linux).
Recarga forzada. Omite la caché, pero no la vacía.
Atajo: Cmd + Mayúsculas + R (macOS) o Ctrl + Mayúsculas + R (Windows/Linux).
Borra la caché y realiza una recarga forzada. Vacía la caché de todos los sitios antes de volver a cargar.
Abrir automáticamente Herramientas para desarrolladores en cada pestaña nueva
Ejecuta Chrome desde la línea de comandos y pasa la marca --auto-open-devtools-for-tabs:
Sal de cualquier instancia de Chrome que se esté ejecutando.
Ejecuta tu aplicación de terminal o línea de comandos favorita.
Según tu sistema operativo, ejecuta el siguiente comando:
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
Las Herramientas para desarrolladores se abrirán automáticamente en cada pestaña nueva hasta que cierres Chrome.
Próximos pasos
A continuación, mira el siguiente video para aprender algunos parámetros de configuración y combinaciones de teclas útiles para navegar más rápido por DevTools.
Para obtener una experiencia de aprendizaje más práctica, consulta cómo personalizar DevTools.