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.
- 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 pestaña nueva 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.
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, 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:
- Abre el menú de comandos.
- Comienza a escribir
docky 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.
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 idioma de la IU de DevTools
Consulta Configuración > Preferencias > Apariencia > 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 acoplamiento no se sincroniza porque los desarrolladores tienen diferentes preferencias de conector cuando depuran en sitios distintos.
Cómo personalizar las combinaciones de teclas
Consulta Configuración > Accesos directos.
Habilitar experimentos
Consulta Configuración > Experimentos.