Abra las Herramientas para desarrolladores de Chrome

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Hay muchas formas de abrir las Herramientas para desarrolladores de Chrome. Elige tu forma favorita de esta completa referencia.

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

Además, obtenga información sobre 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 las Herramientas para desarrolladores desde los menús desplegables de Chrome.

Abrir el panel Elements para inspeccionar el DOM o CSS

Para inspeccionarla, haz clic con el botón derecho en un elemento de una página y selecciona Inspeccionar.

La opción Inspeccionar en un menú desplegable en Chrome.

Herramientas para desarrolladores abre el panel Elements y selecciona el elemento en el árbol del DOM. En el panel Estilos, puedes ver las reglas de CSS que se aplican al elemento seleccionado.

Un elemento seleccionado en el panel Elements.

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 Menú de tres puntos a la derecha de la barra de direcciones y selecciona Más herramientas > Herramientas para desarrolladores.

La opción Herramientas para desarrolladores seleccionada en el menú de tres puntos.

Como alternativa, puedes abrir el último panel con un acceso directo. Consulta la siguiente sección para obtener más información.

Cómo abrir 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 el sistema operativo que tengas:

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 elección.

La combinación de teclas C abre el panel Elements en el modo de inspector Inspeccionar.. 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 sus CSS en Elements > Panel Styles.

El panel Elements en el modo de inspector con información sobre la herramienta.

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:

  1. Cierra cualquier instancia de Chrome en ejecución.

  2. Ejecuta tu terminal o aplicación de línea de comandos favorita.

  3. 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.

Próximos pasos

Luego, mira el siguiente video para aprender algunas combinaciones de teclas y parámetros de configuración útiles para navegar más rápido en Herramientas para desarrolladores.

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