Configura el aspecto y el comportamiento de las Herramientas para desarrolladores y sus paneles con Configuración > Preferencias. En esta pestaña, se enumeran las opciones de personalización generales y las específicas del panel.
Para establecer las preferencias, abre Settings > Preferences y desplázate hasta una de las secciones que se describen a continuación.

Para saber qué hace cada parámetro de configuración, busca en esta página el nombre del parámetro y expande su descripción.
En esta referencia, se indican diferentes parámetros de configuración con los siguientes íconos:
Casillas de verificación
- Listas desplegables
Obsoleto
Para restablecer las preferencias predeterminadas, desplázate hasta el final de la pestaña Preferences y haz clic en Restore defaults and reload.
Apariencia
En esta sección, se enumeran las opciones para personalizar la apariencia de las Herramientas para desarrolladores.
Temas
establece un tema de color para la IU de las Herramientas para desarrolladores.
Panel layout
organiza los paneles en paneles.
Afecta a las pestañas Elementos > Estilos y hermanas, y al panel Fuentes > Depurador. La opción auto hace que el diseño dependa del ancho de las Herramientas para desarrolladores.
Idioma
establece la configuración regional de la IU de Herramientas para desarrolladores.
Para aplicar este parámetro de configuración, vuelve a cargar las Herramientas para desarrolladores.
Habilitar la combinación de teclas Ctrl/Cmd + 0-9 para cambiar de panel te permite abrir paneles con el teclado.
En este video, se muestra cómo alternar entre las pestañas con las combinaciones de teclas correspondientes.
Disable paused state overlay oculta la superposición Paused in debugger
en el viewport cuando se pausa la ejecución del código.
Mostrar novedades después de cada actualización abre automáticamente la pestaña lateral Novedades después de cada actualización de Chrome.
Fuentes
En esta sección, se enumeran las opciones que personalizan el panel Fuentes.
Search in anonymous and content scripts te permite buscar en todos los archivos JavaScript cargados, incluidos los de las extensiones de Chrome, con la pestaña Search.
En este video, se muestra cómo buscar texto en un archivo de origen de extensión.
Automatically reveal files in sidebar selecciona archivos en el panel Sources > Page cuando cambias de pestaña en el Editor.
En este video, se muestra cómo, con esta opción habilitada, el panel Fuentes selecciona archivos en el árbol de navegación a medida que cambias de pestaña.
Habilitar mapas de orígenes de JavaScript permite que las Herramientas para desarrolladores encuentren fuentes de archivos JavaScript generados o reducidos.
Habilitar la tecla Tab para mover el foco hace que la tecla
Tab mueva el foco dentro de las Herramientas para desarrolladores en lugar de insertar un carácter de tabulación en el Editor.
Requiere volver a cargar las Herramientas para desarrolladores.
En este video, primero se muestran los caracteres de tabulación insertados con la tecla Tab. Luego, cuando habilitas esta opción y vuelves a cargar las Herramientas para desarrolladores, la tecla Tab mueve el enfoque.
Detect indentation establece la sangría en la del archivo de origen abierto en el Editor.
Requiere volver a cargar las Herramientas para desarrolladores.
En este video, primero se muestra la sangría predeterminada de ocho espacios. Luego, cuando habilitas esta opción, se anula la sangría predeterminada por la del archivo de origen.
El autocompletado habilita sugerencias útiles en el editor.
En primer lugar, este video no muestra ninguna sugerencia. Luego, cuando habilitas esta opción, el Editor muestra sugerencias para completar comandos.
El cierre automático de corchetes agrega automáticamente un corchete o una etiqueta de cierre cuando escribes uno de apertura.
En este video, se muestra cómo escribir corchetes de apertura antes y después de habilitar el cierre automático de corchetes.
La coincidencia de corchetes subraya y destaca en rojo claro en el Editor un corchete, una llave o un paréntesis sin un par.
El plegado de código te permite plegar y desplegar bloques de código entre llaves en el Editor.
Requiere volver a cargar las Herramientas para desarrolladores.
En este video, se muestra cómo contraer bloques de código cuando habilitas esta opción.
Show whitespace characters
muestra los caracteres de espacio en blanco en el Editor.
Requiere volver a cargar las Herramientas para desarrolladores. Las opciones hacen lo siguiente:
- All indica todos los caracteres de espacio en blanco como puntos (
...). Además, el Editor indica el carácter Tab como una línea (—). - Al final destaca los caracteres de espacio en blanco al final de las líneas en rojo claro.
Mostrar los valores de las variables intercalados durante la depuración te muestra los valores de las variables junto a las declaraciones de asignación mientras la ejecución está detenida.
Enfocar el panel Fuentes cuando se activa un punto de interrupción abre Fuentes > Editor en la línea con el punto de interrupción que detuvo la ejecución.
En este video, primero se muestra el panel Fuentes desenfocado cuando se pausa en un punto de interrupción. Luego, cuando habilitas esta opción, las Herramientas para desarrolladores abren el Editor en el panel Fuentes y te muestran la línea de código con el punto de interrupción.
La impresión con formato estilístico automática de las fuentes reducidas hace que esas fuentes sean legibles.
Cuando se imprime con formato estilístico, el Editor puede mostrar una sola línea de código larga en varias líneas, precedida por - para indicar que es una continuación de línea.
Habilitar mapas de fuentes de CSS permite que las Herramientas para desarrolladores encuentren las fuentes de los archivos CSS generados, por ejemplo, .scss, y te las muestren.
Allow scrolling past end of file te permite desplazarte más allá de la última línea en el Editor.
En este video, se muestra cómo desplazarte más allá del final del archivo cuando habilitas esta opción.
Permitir que las Herramientas para desarrolladores carguen recursos, como mapas de origen, desde rutas de archivos remotas. Se inhabilitó de forma predeterminada por razones de seguridad.
Si se deja inhabilitada, las Herramientas para desarrolladores registran en la Consola mensajes similares a los siguientes:
Sangría predeterminada
te permite elegir la cantidad de espacios que inserta la tecla
Tab en el Editor.
En este ejemplo, se muestra cómo establecer la sangría predeterminada en ocho espacios primero y, luego, en un carácter de tabulación.
Elementos
En esta sección, se enumeran las opciones para personalizar el panel Elementos.
Mostrar el shadow DOM del usuario-agente muestra los nodos del shadow DOM en el árbol del DOM.
Ajuste de línea divide las líneas largas del árbol del DOM y las ajusta a la línea siguiente.
Show HTML comments muestra los comentarios HTML en el árbol del DOM.
Reveal DOM node on hover selecciona el nodo correspondiente en el árbol del DOM cuando colocas el cursor sobre un elemento en el viewport en el modo de inspección de
.
En este video, primero se muestra que los nodos del DOM no están seleccionados en el árbol del DOM. Luego, cuando habilitas esta opción, el panel Elementos selecciona los nodos cuando colocas el cursor sobre ellos.
Show detailed inspect tooltip muestra la información sobre la herramienta en el viewport en el modo de inspección de
cuando colocas el cursor sobre un elemento.
Show rulers on hover muestra las reglas en el viewport cuando colocas el cursor sobre los elementos del árbol del DOM.
Mostrar información sobre la documentación de CSS muestra un cuadro de información con una descripción breve cuando colocas el cursor sobre una propiedad en el panel Estilos.
El vínculo Más información te lleva a una referencia de CSS de MDN sobre la propiedad.
Red
En esta sección, se enumeran las opciones para personalizar el panel Red. La mayoría de las opciones son las mismas que en la configuración del panel.
Preserve log es lo mismo que Preserve log en el panel Network. Guarda las solicitudes en las cargas de páginas.
En este video, se muestra primero el registro de solicitudes que se actualiza cuando se vuelve a cargar la página y, luego, se conserva cuando habilitas esta opción.
Grabar el registro de red es lo mismo que
Grabar el registro de red en el panel Red. Inicia o detiene el registro de solicitudes en el registro de red.
Habilitar el bloqueo de solicitudes de red bloquea las solicitudes que coinciden con los patrones del panel lateral Bloqueo de solicitudes de red.
En este video, primero se muestra que las solicitudes no están bloqueadas. Luego, después de habilitar esta opción, un patrón en el panel lateral Bloqueo de solicitudes de red las bloquea.
Inhabilitar la caché (mientras Herramientas para desarrolladores está abierto) es lo mismo que Inhabilitar la caché en el panel Red. Inhabilita la caché del navegador.
Permitir la generación de HAR con datos sensibles agrega opciones al botón de Exportar HAR que te permiten exportar con o sin datos sensibles (limpios).
Los datos sensibles son los datos de los encabezados Cookie, Set-Cookie y Authorization.
Color-code resource types destaca las solicitudes con diferentes colores según su tipo en la columna Waterfall del registro de red.
Agrupar el registro de red por marco es lo mismo que Agrupar por marcos en el panel Red. Esta opción agrupa las solicitudes iniciadas por marcos intercalados.
Forzar el bloqueo de anuncios en este sitio bloquea los anuncios detectados en la página mientras las Herramientas para desarrolladores están abiertas.
Rendimiento
En esta sección, se enumeran las opciones para personalizar el panel Rendimiento.
Acción de la rueda del mouse en el gráfico tipo llama
asigna la acción de desplazamiento o zoom a la rueda del mouse cuando navegas por el gráfico tipo llama.
En este ejemplo, se muestran las acciones de desplazamiento y zoom con la rueda del mouse en un gráfico tipo llama en el panel Rendimiento.
Console
En esta sección, se enumeran las opciones para personalizar la Consola. La mayoría de las opciones son las mismas que en Console Settings.

Hide network messages oculta los mensajes de red en la Consola.
En este video, se muestra cómo ocultar los mensajes de red con esta opción tanto en la Configuración de como en la Configuración de la consola.
Selected context only hace que la Consola muestre mensajes solo para el contexto seleccionado: superior, iframe, trabajador o extensión.
En este video, se muestra cómo habilitar esta opción en Configuración y en Consola > Configuración, y seleccionar el contexto en la Consola.
Registrar XMLHttpRequests hace que la consola registre las solicitudes XHR y de recuperación.
En este video, se muestra cómo habilitar esta opción en Configuración y Consola > Configuración, y registrar los mensajes de
XHR finished loading en la Consola.
Show timestamps hace que la consola muestre marcas de tiempo junto a los mensajes.
Autocompletar desde el historial hace que la Consola sugiera comandos que ejecutaste antes mientras escribes.
Puedes encontrar la misma opción en Consola > Configuración.
Aceptar sugerencias de autocompletar con Intro hace que la Consola acepte la sugerencia seleccionada del menú desplegable de autocompletar cuando presionas Intro.
En este video, se muestra lo que sucede cuando presionas Intro antes y después de habilitar esta opción.
Agrupar mensajes similares en la consola hace que la consola agrupe los mensajes similares.
Puedes encontrar la misma opción en Consola > Configuración.
Mostrar errores de CORS en la consola hace que la consola muestre los errores de CORS que registró.
Puedes encontrar la misma opción en Consola > Configuración.
La evaluación diligente hace que la consola muestre una vista previa de un resultado a medida que escribes un comando.
Puedes encontrar la misma opción en Consola > Configuración.
En este video, se muestran varias vistas previas de salida.
Treat code evaluation as user action convierte cualquier comando que ejecutes en la Consola en una interacción del usuario.
En otras palabras, establece navigator.userActivation.isActive en true tras la evaluación. Puedes encontrar la misma opción en Consola > Configuración.
En este video, se muestra el resultado de la evaluación de navigator.userActivation.isActive antes y después de habilitar esta opción.
Expandir automáticamente los mensajes de console.trace() hace que la Consola muestre los mensajes de console.trace() expandidos cuando los registra.
Preserve log upon navigation hace que la consola registre un mensaje Navigated to en cada navegación y guarde los registros en todas las páginas.
Puedes encontrar la misma opción en Consola > Configuración.
Extensión
En esta sección, se enumeran las opciones que personalizan el control de vínculos para las extensiones de las Herramientas para desarrolladores de Chrome.
Administración de vínculos
establece una opción para abrir archivos cuando haces clic en un vínculo a un archivo de origen, por ejemplo, en el panel Elementos > Estilos.
Persistencia
En esta sección, se enumeran las opciones que controlan cómo las Herramientas para desarrolladores guardan los cambios que realizas.
Habilitar las anulaciones locales hace que las Herramientas para desarrolladores conserven los cambios que realizas en las fuentes en todas las cargas de página.
Para obtener más información, consulta Anulaciones locales.
Debugger
En esta sección, se enumeran las opciones que controlan el comportamiento del depurador.
Inhabilitar JavaScript te permite ver cómo se ve y se comporta tu página web cuando JavaScript está inhabilitado.
Vuelve a cargar la página para ver si depende de JavaScript durante la carga y cómo lo hace.
Cuando se inhabilita JavaScript, Chrome muestra el ícono
correspondiente en la barra de direcciones y las Herramientas para desarrolladores muestran un ícono de advertencia junto a Fuentes.
Inhabilitar los seguimientos de pila asíncronos oculta la "historia completa" de la operación asíncrona en la pila de llamadas.
De forma predeterminada, el depurador intenta hacer un seguimiento de las operaciones asíncronas si el framework que usas admite ese seguimiento.
Para obtener más información, consulta Cómo ver seguimientos de pila asíncronos.
Global
En esta sección, se enumeran las opciones que tienen efectos globales en las Herramientas para desarrolladores.
Abrir Herramientas para desarrolladores de manera automática para las ventanas emergentes abre las Herramientas para desarrolladores cuando haces clic en vínculos que abren pestañas nuevas. Es decir, todos los vínculos con target=_blank.
En este video, primero se muestra cómo hacer clic en un vínculo y abrir una pestaña nueva *sin* las Herramientas para desarrolladores. Luego, cuando habilitas esta opción, se abre una pestaña nueva *con* las Herramientas para desarrolladores.
Buscar mientras escribes hace que las Herramientas para desarrolladores "salten" al primer resultado de la búsqueda a medida que escribes la búsqueda. Si se inhabilita, las Herramientas para desarrolladores te llevan al resultado solo cuando presionas Intro.
En este video, primero se muestra cómo las Herramientas para desarrolladores "saltan" a medida que escribes una búsqueda. Luego, cuando habilites esta opción, las Herramientas para desarrolladores te llevarán al primer resultado cuando presiones Intro.
Sincronizar
En esta sección, puedes configurar la sincronización de parámetros entre dispositivos.
Habilitar la sincronización de la configuración te permite sincronizar la configuración de las Herramientas para desarrolladores en varios dispositivos.
Para usar este parámetro de configuración, primero habilita la Sincronización de Chrome. Para obtener más información, consulta Configuración de sincronización.