Existen muchas maneras de abrir las Herramientas para desarrolladores de Chrome. Elige tu camino favorito entre esta referencia completa.
Puede acceder a las Herramientas para desarrolladores con la IU o el teclado de Chrome:
- Desde los menús desplegables de Chrome.
- Con combinaciones de teclas exclusivas que abren Elementos, Consola o el último panel que usaste
Además, descubre cómo abrir las Herramientas para desarrolladores automáticamente en cada pestaña nueva.
Abrir Herramientas para desarrolladores desde los menús de Chrome
Si prefieres la IU, puedes acceder a Herramientas para desarrolladores desde los menús desplegables de Chrome.
Abrir el panel Elements para inspeccionar el DOM o CSS
Para inspeccionarlo, haz clic con el botón derecho en un elemento de una página y selecciona Inspeccionar.
Herramientas para desarrolladores abre el panel Elementos y selecciona el elemento en el árbol del DOM. En el panel Estilos, puedes ver las reglas de CSS aplicadas al elemento seleccionado.
Abre el último panel que usaste del menú principal de Chrome
Para abrir el último panel de Herramientas para desarrolladores, haz clic en el botón a la derecha de la barra de direcciones y selecciona Más herramientas > Herramientas para desarrolladores.
También puedes abrir el último panel con un acceso directo. Consulta la siguiente sección para obtener más información.
Abre paneles con combinaciones de teclas: Elementos, Console 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 |
---|---|---|---|
En Windows o Linux | Ctrl + Mayúsculas + C | Ctrl + Mayúsculas + J | F12 Ctrl + Mayúsculas + I |
Mac | Cmd + Opción + C | Cmd + Opción + J | Fn + F12 Cmd + Opción + I |
Esta es una manera fácil de memorizar los accesos directos:
- C significa CSS.
- J para JavaScript.
- I designa tu opción.
La combinación de teclas C abre el panel Elements en el modo de inspector . En este modo, se muestra información útil sobre la herramienta cuando colocas el cursor sobre los elementos de una página. También puedes hacer clic en cualquier elemento para ver su CSS en el panel Elementos > Estilos.
Para ver la lista completa de combinaciones de teclas de Herramientas para desarrolladores, consulta Combinaciones de teclas.
Abrir Herramientas para desarrolladores automáticamente en cada pestaña nueva
Ejecuta Chrome desde la línea de comandos y pasa la marca --auto-open-devtools-for-tabs
:
Sal de todas las instancias de Chrome que estén en ejecución.
Ejecuta tu terminal o aplicación de línea de comandos favorita.
Según tu sistema operativo, ejecuta el siguiente comando:
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
Windows:
start chrome --auto-open-devtools-for-tabs
Linux:
google-chrome --auto-open-devtools-for-tabs
Las Herramientas para desarrolladores se abrirán automáticamente con cada pestaña nueva hasta que cierres Chrome.
¿Qué sigue?
A continuación, mira el siguiente video para aprender algunas combinaciones de teclas y parámetros de configuración útiles para navegar más rápido por las Herramientas para desarrolladores.
Si quieres obtener una experiencia de aprendizaje más práctica, consulta cómo personalizar Herramientas para desarrolladores.