Configura la apariencia y el comportamiento de DevTools y sus paneles en 
Configuración > Preferencias. En esta pestaña, se enumeran las opciones de personalización generales y las específicas de los paneles.
Para establecer preferencias, abre 
Configuración > Preferencias 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 su nombre en esta página y expande su descripción.
Esta referencia indica diferentes parámetros de configuración con los siguientes íconos:
- Casillas de verificación de
- Listas desplegables
Obsoleto
Para restablecer las preferencias predeterminadas, desplázate hasta el final de la pestaña Preferencias y haz clic en Restablecer valores predeterminados y volver a cargar.
Apariencia
En esta sección, se enumeran las opciones que personalizan la apariencia de DevTools.
Temas 
establece un tema de color para la IU de DevTools.
Diseño de panel 
organiza los paneles en paneles.
Afecta a Elementos > Estilos y pestañas relacionadas, y al panel Fuentes > Depurador. La opción auto hace que el diseño dependa del ancho de Herramientas para desarrolladores.
En Language 
, se establece la configuración regional de la IU de Herramientas para desarrolladores.
Para aplicar este parámetro de configuración, vuelve a cargar Herramientas para desarrolladores.
Habilita 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.
La opción Inhabilitar la superposición de estado de pausa oculta la superposición 
Detenida en el depurador en el viewport cuando se pausa la ejecución del código.
La opción Mostrar las novedades después de cada actualización abre automáticamente la pestaña del panel Novedades después de cada actualización de Chrome.
Fuentes
En esta sección, se enumeran las opciones que permiten personalizar el panel Fuentes.
La búsqueda en secuencias de comandos anónimas y de contenido te permite buscar en todos los archivos JavaScript cargados, incluidos los que se encuentran en extensiones de Chrome, mediante la pestaña Buscar.
En este video, se muestra cómo buscar texto en un archivo fuente de extensión.
Mostrar archivos en la barra lateral de manera automática selecciona archivos en el panel Fuentes > Página cuando cambias de pestaña en el Editor.
En este video, se muestra cómo, con esta opción habilitada, el panel Sources selecciona archivos en el árbol de navegación a medida que cambias de pestaña.
Habilitar los mapas de fuentes de JavaScript permite que DevTools encuentre fuentes de archivos JavaScript generados o minificados.
Habilitar el enfoque de movimientos de pestaña hace que la tecla 
Tab mueva el enfoque dentro de Herramientas para desarrolladores en lugar de insertar un carácter de tabulación en el Editor.
Requiere que se vuelvan a cargar las Herramientas para desarrolladores.
En este video, primero se muestran los caracteres de tabulación insertados con la tecla Tab. Luego, cuando habilites esta opción y vuelvas a cargar Herramientas para desarrolladores, la tecla Tab moverá el enfoque.
Detect indentation establece la sangría en la del archivo fuente abierto en el Editor.
Requiere que se vuelvan a cargar 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 fuente.
El autocompletado habilita sugerencias prácticas en el Editor.
En este video, primero no se muestran sugerencias. Cuando habilites esta opción, el Editor mostrará sugerencias para completar comandos.
La opción Cierre con corchetes agrega automáticamente una etiqueta o un corchete de cierre cuando ingresas uno de apertura.
En este video, se muestran los corchetes de apertura antes y después de habilitar el cierre automático con corchetes.
La correspondencia de corchetes subraya y destaca en rojo claro en el Editor un corchete cuadrado, corchete angular o paréntesis sin un par.
La reducción de código te permite contraer y expandir bloques de código entre llaves en el editor.
Requiere volver a cargar Herramientas para desarrolladores.
En este video, se muestra cómo contraer bloques de código cuando habilitas esta opción.
Mostrar caracteres de espacio en blanco 
muestra los caracteres de espacios en blanco en el Editor.
Requiere volver a cargar Herramientas para desarrolladores. Las opciones permiten hacer lo siguiente:
- Todos denota todos los caracteres de espacio en blanco como puntos (
...). Además, el Editor denota el carácter Tab como una línea (—). - Final destaca los caracteres de espacio en blanco al final de las líneas en rojo claro.
Mostrar los valores de la variable intercalados durante la depuración te muestra los valores de la variable junto a las declaraciones de asignación mientras la ejecución está detenida.
Enfocar el panel Sources cuando se activa un punto de interrupción abre Sources > Editor en la línea con el punto de interrupción que pausó la ejecución.
En este video, primero se muestra el panel Sources fuera de foco cuando se pausa en un punto de interrupción. Luego, cuando habilites esta opción, Herramientas para desarrolladores abrirá el Editor en el panel Sources y te mostrará la línea de código con el punto de interrupción.
Imprimir automáticamente las fuentes reducidas con formato estilístico hace que esas fuentes sean legibles.
Cuando se imprime con formato, 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 los mapas de origen de CSS permite que DevTools encuentre las fuentes de los archivos CSS generados, por ejemplo, .scss, y te las muestre.
Permitir el desplazamiento después del final del archivo 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.
Permite que las Herramientas para desarrolladores carguen recursos, como mapas de origen, desde rutas de acceso a archivos remotas. Se inhabilitó de forma predeterminada por razones de seguridad.
Si se deja inhabilitado, Herramientas para desarrolladores registra en los mensajes de Console similares a los siguientes:
La sangría predeterminada 
te permite elegir la cantidad de espacios que la tecla 
Tab inserta en el Editor.
En este ejemplo, se muestra cómo establecer la sangría predeterminada en ocho espacios y, luego, en un carácter de tabulación.
Elementos
En esta sección, se enumeran las opciones que permiten personalizar el panel Elementos.
Mostrar el shadow DOM del usuario-agente muestra los nodos del shadow DOM en el árbol del DOM.
El ajuste de texto separa las líneas largas en el árbol del DOM y las une 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 la ventana de visualización en el modo de inspección 
.
Este video muestra primero 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 con solo colocar el cursor sobre los nodos.
Mostrar información de inspección detallada muestra la información en el viewport en el modo de inspección 
cuando colocas el cursor sobre un elemento.
Mostrar reglas al colocar el cursor sobre un elemento 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 una información sobre herramientas con una descripción breve cuando colocas el cursor sobre una propiedad en el panel Estilos.
El vínculo Más información te dirige a una referencia de CSS de MDN sobre la propiedad.
Red
En esta sección, se enumeran las opciones que permiten personalizar el panel Red. La mayoría de las opciones son las mismas que en la configuración del panel.
Guardar el registro es lo mismo que Guardar el registro en el panel Red. Guarda solicitudes entre cargas de páginas.
En este video, primero se muestra el registro de solicitudes actualizado cuando se vuelve a cargar la página y, luego, se conserva cuando habilitas esta opción.
Record network log es lo mismo que 
Record network log en el panel Network. Inicia o detiene la grabación de solicitudes en el registro de red.
Habilitar el bloqueo de solicitudes de red bloquea las solicitudes que coinciden con los patrones del panel 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 Bloqueo de solicitudes de red las bloquea.
Inhabilitar la memoria caché (mientras Herramientas para desarrolladores está abierto) es lo mismo que Inhabilitar la memoria caché en el panel Red. Inhabilita la caché del navegador.
Permitir que se genere el HAR con datos sensibles agrega opciones al botón Exportar HAR que te permiten exportar con o sin datos sensibles (sin limpiar).
Los datos sensibles son los que se encuentran en los encabezados Cookie, Set-Cookie y Authorization.
Organizar los tipos de recursos por colores destaca las solicitudes en diferentes colores según su tipo en la columna Cascada del registro de red.
Agrupar los registros de red por marco es lo mismo que Agrupar por tramas 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 Flamechart 
asigna la acción de desplazamiento o zoom a la rueda del mouse cuando navegas por el diagrama de llama.
En este ejemplo, se muestran las acciones de desplazamiento y zoom de la rueda del mouse en un gráfico de llama en el panel Rendimiento.
Console
En esta sección, se enumeran las opciones para personalizar Console. La mayoría de las opciones son las mismas que en la Configuración de la consola.
Ocultar mensajes de red oculta los mensajes de red en Consola.
En este video, se muestra cómo ocultar los mensajes de red con esta opción tanto en 
Configuración como en Configuración de la consola.
Solo el contexto seleccionado hace que Console 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.
Log XMLHttpRequests genera XHR de registro y solicitudes de recuperación de Console.
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.
Mostrar marcas de tiempo hace que Consola muestre marcas de tiempo junto a los mensajes.
La función Autocompletar desde el historial hace que Console sugiera los comandos que ejecutaste antes a medida que escribes.
Puedes encontrar la misma opción en Consola > Configuración.
Aceptar sugerencias de autocompletar con Intro hace que Console 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 Consola agrupe 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 anticipada hace que Console 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.
Tratar la evaluación de código como acción del usuario convierte cualquier comando que ejecutes en la consola en interacción con el usuario.
En otras palabras, establece navigator.userActivation.isActive en true después de 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 console.trace() hace que Console muestre mensajes console.trace() expandidos cuando los registra.
Preserve log upon navigation hace que Console 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 manejo de vínculos para las extensiones de Chrome DevTools.
Manejo de vínculos 
establece una opción para abrir archivos cuando haces clic en un vínculo a un archivo fuente, por ejemplo, en el panel Elementos > Estilos.
Persistencia
En esta sección, se enumeran las opciones que controlan cómo DevTools guarda los cambios que realizas.
Habilitar las anulaciones locales hace que DevTools conserve los cambios que realices en las fuentes durante 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 de Debugger.
La opción Inhabilitar JavaScript te permite ver el aspecto y el comportamiento de tu página web cuando JavaScript está inhabilitado.
Vuelve a cargar la página para ver si depende de JavaScript y de qué manera durante la carga.
Cuando JavaScript está inhabilitado, Chrome muestra el ícono 
correspondiente en la barra de direcciones y Herramientas para desarrolladores muestra un ícono de advertencia 
junto a Fuentes.
Con la opción Inhabilitar el seguimiento de pila asíncrono se 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 DevTools.
Abrir Herramientas para desarrolladores automáticamente para ventanas emergentes abre Herramientas para desarrolladores cuando haces clic en vínculos que abren nuevas pestañas. 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* Herramientas para desarrolladores. Luego, cuando habilites esta opción, se abrirá una pestaña nueva *con* DevTools.
Search mientras escribes hace que Herramientas para desarrolladores "juegue" al primer resultado de la búsqueda mientras escribes la consulta. Si está inhabilitada, las Herramientas para desarrolladores te dirigirán al resultado solo cuando presiones Intro.
En este video, primero se muestra cómo DevTools "salta" mientras escribes una búsqueda. Luego, cuando habilites esta opción, DevTools te llevará al primer resultado cuando presiones Intro.
Sincronizar
Esta sección te permite configurar la sincronización de la configuración entre dispositivos.
Habilitar la sincronización de la configuración te permite sincronizar la configuración de DevTools 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.