Preferencias

Sofia Emelianova
Sofia Emelianova

Configura el aspecto y el comportamiento de DevTools y sus paneles en Configuración. Configuración > Preferencias. En esta pestaña, se enumeran las opciones de personalización generales y las específicas del panel.

Para establecer preferencias, abre Configuración. Configuración > Preferencias y desplázate hasta una de las secciones que se describen a continuación.

La sección Aspecto en la pestaña Preferencias

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:

  • Casilla de verificación. Casillas de verificación
  • Listas desplegables Menú desplegable.
  • Obsoleta. 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 que permiten personalizar el aspecto de las Herramientas para desarrolladores.

Temas Menú desplegable. establece un tema de color para la IU de DevTools.

Temas: Cambiar el tema de DevTools de la preferencia del sistema a oscuro o claro
  • Preferencia del sistema
  • Claro
  • Oscuro

Diseño de panel Menú desplegable. 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 DevTools.

Diseño del panel: Cambiar el diseño del panel del elemento de horizontal a vertical
  • horizontal
  • vertical
  • automático

Idioma Menú desplegable. establece la configuración regional de la IU de DevTools.

Para aplicar este parámetro de configuración, vuelve a cargar Herramientas para desarrolladores.

Idioma: Panel de configuración en chino.
  • Idioma de la IU del navegador
  • Una de las opciones de configuración regional, en este ejemplo, chino

Casilla de verificación. Habilitar la combinación de teclas Ctrl/Cmd + 0-9 para cambiar de paneles 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.

Casilla de verificación. Inhabilitar la superposición del estado de pausa oculta la superposición Botones de reproducción y paso por alto. Detenido en el depurador en el viewport cuando se pausa la ejecución de código.

Casilla de verificación. 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.

La pestaña del panel Novedades

Fuentes

En esta sección, se enumeran las opciones que permiten personalizar el panel Fuentes.

Casilla de verificación. La búsqueda en secuencias de comandos anónimas y con contenido te permite buscar en todos los archivos JavaScript cargados, incluidos los de las extensiones de Chrome, con la pestaña Búsqueda.

En este video, se muestra cómo buscar texto en un archivo fuente de extensión.

Casilla de verificació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 Fuentes selecciona archivos en el árbol de navegación a medida que cambias de pestaña.

Casilla de verificación. La opción Habilitar los mapas de fuentes de JavaScript permite que DevTools encuentre fuentes de archivos JavaScript generados o reducidos.

El panel Sources muestra un vínculo al archivo reducido en la barra de estado.

Casilla de verificación. Habilitar el enfoque de los movimientos de la pestaña hace que la tecla Tecla Tab. Tab mueva el enfoque dentro de DevTools en lugar de insertar un carácter Tab 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 DevTools, la tecla Tab moverá el enfoque.

Casilla de verificación. Detect indentation establece la sangría en la del archivo fuente abierto en el Editor.

Requiere que se vuelvan 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 fuente.

Casilla de verificación. El autocompletado habilita sugerencias prácticas en el Editor.

Al principio, este video no muestra ninguna sugerencia. Luego, cuando habilites esta opción, el Editor mostrará sugerencias para completar comandos.

Casilla de verificación. 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.

Casilla de verificación. La correspondencia de corchetes subraya y destaca en rojo claro en el Editor un corchete cuadrado, un corchete angular o un paréntesis sin un par.

Un paréntesis angular sin un par subrayado en rojo.

Casilla de verificación. La reducción de código te permite contraer y expandir bloques de código entre llaves en el editor.

Requiere que se vuelvan a cargar las 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 Menú desplegable. muestra caracteres de espacio en blanco en el Editor.

Requiere que se vuelvan a cargar las Herramientas para desarrolladores. Las opciones hacen lo siguiente:

  • Todo indica todos los caracteres de espacio en blanco como puntos (...). Además, el Editor indica 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 caracteres de espacio en blanco: Opciones seleccionadas: Todas y Final.
  • Ninguno
  • Todas (...)
  • Final

Casilla de verificación. Mostrar los valores variables intercalados al depurar muestra los valores de las variables junto a las sentencias de asignación mientras la ejecución está en pausa.

El depurador detenido durante la ejecución de la función muestra los valores de las variables junto a las sentencias de asignación.

Casilla de verificación. Enfocar el panel de fuentes cuando se activa un punto de interrupción abre Sources > Editor en la línea con el punto de interrupción que detuvo 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, DevTools abrirá el Editor en el panel Sources y te mostrará la línea de código con el punto de interrupción.

Casilla de verificación. Imprimir automáticamente las fuentes reducidas con formato estilístico hace que esas fuentes sean legibles.

Cuando se imprime de forma legible, el Editor puede mostrar una sola línea de código larga en varias líneas, precedida de - para indicar que es una línea de Continuation.

Código con formato estilístico en el panel de fuentes

Casilla de verificación. Habilitar los 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.

El panel Sources muestra los archivos .scss en la sección Authored del árbol de navegación. El panel Estilos del panel Elementos muestra vínculos a fuentes .scss junto a las reglas de CSS.

Casilla de verificación. 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.

Casilla de verificación. Permite que DevTools cargue recursos, como mapas de origen, desde rutas de archivos remotas. Se inhabilitó de forma predeterminada por razones de seguridad.

Si se deja inhabilitada, Herramientas para desarrolladores registra mensajes similares a los siguientes en la Consola:

Un mensaje en Play Console que informa que la carga desde una ruta de acceso de archivo remota está prohibida por motivos de seguridad.

La sangría predeterminada Menú desplegable. te permite elegir la cantidad de espacios que la tecla Tecla Tab. Tab inserta en el Editor.

Sangría predeterminada: Inhabilitar las opciones de anulación y cambiar la sangría predeterminada de dos espacios a ocho y, luego, a la tecla Tab
  • 2 espacios
  • 4 espacios
  • 8 espacios
  • Carácter de tabulación

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 personalizan el panel Elementos.

Casilla de verificación. Mostrar el shadow DOM del usuario-agente muestra los nodos del shadow DOM en el árbol del DOM.

El panel Elementos muestra los nodos de Shadow DOM.

Casilla de verificación. El ajuste de texto divide las líneas largas en el árbol DOM y las une a la siguiente línea.

El panel Elementos divide las líneas largas por palabras y las une a la siguiente línea.

Casilla de verificación. Mostrar comentarios HTML muestra los comentarios HTML en el árbol del DOM.

El panel Elementos muestra comentarios HTML.

Casilla de verificación. 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 Inspecciona..

En este video, primero se muestra que los nodos DOM no se seleccionan en el árbol DOM. Luego, cuando habilites esta opción, el panel Elementos seleccionará los nodos cuando coloques el cursor sobre ellos.

Casilla de verificación. Mostrar la inspección detallada de la información sobre la herramienta muestra la información sobre la herramienta en el viewport en el modo de inspección Inspecciona. cuando colocas el cursor sobre un elemento.

La información sobre la herramienta detallada que se muestra en el modo de inspección

Casilla de verificación. Mostrar reglas al colocar el cursor encima muestra las reglas en el viewport cuando colocas el cursor sobre los elementos del árbol DOM.

Reglas que se muestran en el viewport

Casilla de verificación. 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.

La información sobre herramientas con documentación sobre una propiedad CSS.

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.

Casilla de verificación. Guardar el registro es lo mismo que Guardar el registro en el panel Red. Ahorra solicitudes en todas las 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.

Casilla de verificación. Grabar registro de red es lo mismo que Registrar el registro de red Grabar registro de red en el panel Red. Inicia o detiene las solicitudes de grabación en el registro de red.

El botón Record network log en el panel Network.

Casilla de verificación. 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.

Casilla de verificación. 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.

La casilla de verificación Inhabilitar caché

Casilla de verificación. Permitir la generación de HAR con datos sensibles agrega opciones al botón 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.

Las dos opciones del botón Exportar HAR.

Casilla de verificación. 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.

La columna Cascada en la pestaña Red sin codificación de colores y con ella.

Casilla de verificación. 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.

El registro de solicitudes de red con solicitudes agrupadas por marcos intercalados.

Casilla de verificación. Forzar el bloqueo de anuncios en este sitio bloquea los anuncios detectados en la página mientras las herramientas para desarrolladores están abiertas.

Una solicitud de red relacionada con el anuncio que se muestra en el panel de red con el filtro Solicitudes bloqueadas habilitado.

Rendimiento

En esta sección, se enumeran las opciones que permiten personalizar el panel Rendimiento.

Acción de la rueda del mouse en Flamechart Menú desplegable. asigna la acción de desplazamiento o zoom a la rueda del mouse cuando navegas por el diagrama de llama.

Acción de la rueda del mouse en el gráfico tipo llama: Se cambió la acción de la rueda del mouse de desplazamiento a zoom para el gráfico de llama.
  • Desplazamiento
  • Zoom

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 que permiten personalizar Consola. La mayoría de las opciones son las mismas que en la Configuración de la consola.

Opciones similares en la consola y en Configuración.

Casilla de verificación. Ocultar mensajes de la red oculta los mensajes de la red en Consola.

En este video, se muestra cómo ocultar los mensajes de red con esta opción en Configuración de Configuración. y en Configuración de la consola.

Casilla de verificación. 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. Configuración y en Consola > Configuración, y seleccionar el contexto en Consola.

Casilla de verificación. Registrar XMLHttpRequests hace que Console registre las solicitudes XHR y de recuperación.

En este video, se muestra cómo habilitar esta opción en Configuración. Configuración y Consola > Configuración, y registrar los mensajes de XHR finished loading en Consola.

Casilla de verificación. Mostrar marcas de tiempo hace que Console muestre marcas de tiempo junto a los mensajes.

Mensajes con marcas de tiempo en la consola

Casilla de verificación. 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.

Menú desplegable de Autocompletar con una opción de comando del historial de la consola.

Casilla de verificació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.

Casilla de verificación. Agrupar mensajes similares en la consola hace que Consola agrupe mensajes similares.

Puedes encontrar la misma opción en Consola > Configuración.

Mensajes similares en la consola agrupados

Casilla de verificació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 consola muestra errores de CORS.

Casilla de verificació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 los resultados.

Casilla de verificación. Tratar la evaluación de código como acción del usuario convierte cualquier comando que ejecutes en Consola en una interacción del usuario.

En otras palabras, establece navigator.userActivation.isActive en true durante 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.

Casilla de verificación. Expande automáticamente los mensajes console.trace() hace que Console muestre mensajes console.trace() expandidos cuando los registra.

Mensaje console.trace() expandido en la consola.

Casilla de verificación. 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.

La consola muestra los mensajes "Se navegó a" y guarda registros en diferentes páginas.

Extensión

En esta sección, se enumeran las opciones que personalizan el manejo de vínculos para las extensiones de DevTools de Chrome.

Manejo de vínculos: Elegir una opción para abrir vínculos
  • Automático. Abre archivos en el panel Sources de forma predeterminada.
  • Es una opción arbitraria que puede agregar una extensión de DevTools.

Persistencia

En esta sección, se enumeran las opciones que controlan cómo Herramientas para desarrolladores guarda los cambios que realizas.

Casilla de verificación. Habilitar las anulaciones locales hace que Herramientas para desarrolladores 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 del depurador.

Casilla de verificación. 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 y cómo lo hace durante la carga.

Cuando JavaScript está inhabilitado, Chrome muestra el ícono Se inhabilitó JavaScript. correspondiente en la barra de direcciones y DevTools muestra un ícono de advertencia Advertencia. junto a Sources.

Un ícono en la barra de direcciones y un ícono de advertencia junto a Fuentes en DevTools.

Casilla de verificación. 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.

La operación asíncrona en la pila de llamadas

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.

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* las Herramientas para desarrolladores.

Casilla de verificación. La búsqueda mientras escribes hace que DevTools “salte” al primer resultado de la búsqueda mientras escribes tu búsqueda. Si está inhabilitada, Herramientas para desarrolladores te dirige al resultado solo cuando presionas 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

En esta sección, puedes configurar la sincronización de la configuración entre dispositivos.

Casilla de verificación. 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.