Personaliza las Herramientas para desarrolladores

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

En esta página, se enumeran las formas en que puedes personalizar las Herramientas para desarrolladores de Chrome.

Configuración

Configuración > Preferences contiene muchas opciones para personalizar Herramientas para desarrolladores.

Consulta Cómo abrir Configuración y Preferencias.

Tema oscuro

Puedes habilitar el tema oscuro en Configuración o en el menú de comandos.

El tema oscuro.

  1. Abre el menú de comandos.
  2. Comienza a escribir dark, selecciona el comando Switch to dark theme y, luego, presiona Intro para ejecutarlo.

    El comando del tema oscuro.

  3. Como alternativa, puedes establecer el tema en Configuración > Preferencias > Diseño > Temas.

Tema dinámico

Las Herramientas para desarrolladores pueden combinar automáticamente el tema de color de Chrome.

Para establecer un tema, haz lo siguiente:

  1. Abre una pestaña nueva y haz clic en Personalizar Chrome en la esquina inferior derecha.
  2. En Diseño, elige un tema a través del Cambiar temas o selecciona una paleta de colores.

Las Herramientas para desarrolladores coinciden con el tema de color seleccionado en Aspecto.

Panel lateral

El panel lateral contiene muchas funciones ocultas.

Presiona Escape para abrir o cerrar el panel lateral.

El cajón.

Haz clic en Más herramientas para abrir otras pestañas del menú lateral.

El botón Más herramientas que abre otras pestañas del panel lateral

Cómo cambiar la ubicación de DevTools

De forma predeterminada, las Herramientas para desarrolladores están ancladas a la derecha de tu viewport. También puedes anclar las Herramientas para desarrolladores a la parte inferior o izquierda de la pantalla, o bien desconectarlas en otra ventana.

Puedes cambiar la ubicación de DevTools de dos maneras:

  • Menú principal: Abre Personalizar y controlar Herramientas para desarrolladores y haz clic en lo siguiente:
    • Desanclar en una ventana separada
    • Estación de carga a la izquierda
    • Anclar al final
    • Conexión a la derecha
  • Menú de comandos:

    1. Abre el menú de comandos.
    2. Comienza a escribir dock y selecciona una de las opciones sugeridas: acoplar a la parte inferior, izquierda, derecha, desconectar o restablecer la última posición de la estación de carga.

Opción de acoplamiento sugerida en el menú de comandos.

Para activar o desactivar la opción Restablecer la última posición del conector con una combinación de teclas, presiona:

  • En Linux o Windows: Control + Mayúsculas + D
  • En macOS: Comando + Mayúsculas + D

Cómo reordenar paneles, pestañas y paneles

Para cambiar el orden, haz clic y arrastra hacia la izquierda o la derecha en cualquiera de los siguientes elementos:

  • Paneles en la parte superior de Herramientas para desarrolladores.
  • Paneles en el panel Elementos, como Estilos, Cálculos, Diseño y otros.
  • Paneles en el panel Sources, como Page, Workspace, Overrides y otros
  • Pestañas del panel lateral en la parte inferior de Herramientas para desarrolladores.

Además, puedes mover paneles y pestañas hacia arriba y hacia abajo desde el panel lateral y hacia él. Para ello, haz clic con el botón derecho en el panel o la pestaña, y selecciona Mover al principio o Mover al final en el menú desplegable.

El orden de las pestañas personalizadas persiste en todas las sesiones de Herramientas para desarrolladores.

Diseño del panel

De forma predeterminada, las Herramientas para desarrolladores reorganizarán automáticamente el diseño de tu panel según el tamaño de la ventana. Puedes inhabilitar la reorganización automática. Ve a Configuración > Preferencias > Diseño y actualiza el diseño del panel según tus preferencias.

Por ejemplo, el panel Estilos en el panel Elementos se moverá del costado a la parte inferior cuando el tamaño de la pantalla sea pequeño. Si quieres que el panel de diseño siempre permanezca a un lado, cambia el diseño del panel a vertical.

Cómo cambiar el diseño del panel

Cómo cambiar el idioma de la IU de DevTools

Consulta Configuración > Preferencias > Apariencia > Idioma:

Para cambiar el idioma, ve a Configuración y, luego, a Preferencias

Configuración de sincronización

Puedes sincronizar la configuración de Herramientas para desarrolladores en varios dispositivos.

Para habilitar la sincronización, primero activa la Sincronización de Chrome. Una vez habilitada, la configuración de DevTools se sincroniza de forma predeterminada.

Sincronización de perfiles de Chrome

Puedes habilitar o inhabilitar la sincronización de la configuración de DevTools por separado con la casilla de verificación Settings > Sync > Enable settings sync.

Configuración de sincronización de Herramientas para desarrolladores

DevTools sincroniza la mayor parte de la configuración, excepto la de las pestañas Workspace, Experiments y Devices, y algunos otros parámetros de configuración generales. El estado de la casilla de verificación Habilitar la sincronización de la configuración también se sincroniza entre los dispositivos.

Por ejemplo, se sincronizan los siguientes parámetros de configuración de Diseño para que tengas una experiencia coherente en todos los dispositivos y no tengas que volver a definir los mismos parámetros.

La configuración de la apariencia.

Sin embargo, la configuración de acoplamiento no se sincroniza porque los desarrolladores tienen diferentes preferencias de conector cuando depuran en sitios distintos.

La estación.

Cómo personalizar las combinaciones de teclas

Consulta Configuración > Accesos directos.

Habilitar experimentos

Consulta Configuración > Experimentos.