En esta página, se enumeran las formas en que puedes personalizar las Herramientas para desarrolladores de Chrome.
Configuración
Configuración > Preferencias contiene muchas opciones para personalizar Herramientas para desarrolladores.
Consulta Abrir configuración y Preferencias.
Tema oscuro
Puedes habilitar el tema oscuro en Configuración o en el menú de comandos.
- Abre el menú de comandos.
Comienza a escribir
dark, selecciona el comando Switch to dark theme y, luego, presiona Intro para ejecutarlo.
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:
- Abre una nueva pestaña y haz clic en Personalizar Chrome en la esquina inferior derecha.
- En Diseño, elige un tema a través del Cambiar temas o selecciona una paleta de colores.
Para desactivar los temas dinámicos, borra la Configuración > Preferencias > Diseño > Coincidir con el esquema de colores de Chrome y vuelve a cargar Herramientas para desarrolladores.
Panel lateral
El panel lateral contiene muchas funciones ocultas.
Presiona Escape para abrir o cerrar el panel lateral.
Haz clic en Más herramientas para abrir otras pestañas del menú lateral.
Cómo cambiar la ubicación de DevTools
De forma predeterminada, DevTools se encuentra anclado a la derecha del viewport. También puedes acoplarlo a la parte inferior o izquierda, o bien desanclarlo en una ventana independiente.
Puedes cambiar la ubicación de las Herramientas para desarrolladores de dos maneras:
- Menú principal: Abre Customize And Control DevTools y haz clic en lo siguiente:
- Desanclar en ventana separada
- Anclar a la izquierda
- Anclar al final
- Anclar a la derecha
Menú de comandos:
- Abre el menú de comandos.
- Comienza a escribir
docky selecciona una de las opciones sugeridas: anclar en la parte inferior, izquierda, derecha, desanclar o restablecer la última posición de anclaje.
Para activar o desactivar la opción Restablecer la última posición de la estación de carga con una combinación de teclas, presiona lo siguiente:
- 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 en cualquiera de los siguientes elementos y arrástralo hacia la izquierda o la derecha:
- Paneles en la parte superior de DevTools.
- Paneles del panel Elements, como Styles, Computed y Layout, entre 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 personalizado de las pestañas se mantiene entre una sesión de DevTools y otra.
Diseño del panel
De forma predeterminada, DevTools reorganizará 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 del panel Elementos se moverá de un lado a otro hacia la parte inferior cuando el tamaño de la pantalla sea pequeño. Si deseas que el panel Estilo se mantenga siempre a un lado, cambia el diseño del panel a vertical.
Cómo cambiar el idioma de la IU de DevTools
Consulta Configuración > Preferencias > Diseño > Idioma.
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.
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.
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.
Sin embargo, la configuración de dock no se sincroniza porque los desarrolladores tienen diferentes preferencias de acoplamiento cuando depuran en diferentes sitios.
Personaliza las combinaciones de teclas
Consulta Configuración > Accesos directos.
Habilita experimentos
Consulta Configuración > Experimentos.