Abra las Herramientas para desarrolladores de Chrome

Existen muchas maneras de abrir las Herramientas para desarrolladores de Chrome. Elige tu camino favorito en esta referencia integral.

Puedes acceder a Herramientas para desarrolladores con la IU de Chrome o el teclado:

• Desde los menús desplegables de Chrome.
• Con combinaciones de teclas exclusivas que abren Elementos, Console o el último panel que usaste

Además, puede aprender a abrir Herramientas para desarrolladores automáticamente para cada pestaña nueva.

Abrir Herramientas para desarrolladores desde los menús de Chrome

Si prefieres la interfaz de usuario, puedes acceder a Herramientas para desarrolladores desde los menús desplegables de Chrome.

Abre 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 Elements y selecciona el elemento en el árbol del DOM. En el panel Styles, podrás ver las reglas de CSS aplicadas al elemento seleccionado.

Abre el último panel que usaste desde el 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 una combinación de teclas. 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	Consola	Tu último panel
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 atajos:

• C significa CSS.
• J para JavaScript.
• I (I) designa tu opción.

La combinación de teclas C abre el panel Elements en el modo de inspector . Este modo te 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.

Si deseas 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:

1. Sal de todas las instancias de Chrome en ejecución.

2. Ejecuta tu app de línea de comandos o terminal favorita.

3. Según el 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 para cada pestaña nueva hasta que cierres Chrome.

¿Qué sigue?

Luego, mira el siguiente video para conocer algunas combinaciones de teclas y configuraciones útiles para una navegación más rápida en Herramientas para desarrolladores.

Si deseas obtener una experiencia de aprendizaje más práctica, consulta cómo personalizar Herramientas para desarrolladores.