Preferencias

Sofia Emelianova
Sofia Emelianova

Configura la apariencia y el comportamiento de Herramientas para desarrolladores y sus paneles con Configuración. Configuración > Preferencias. En esta pestaña, se enumeran las opciones de personalización generales y las específicas de los paneles.

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

La sección Diseño en la pestaña Preferencias

Para saber qué hace cada parámetro de configuración, busca el nombre del parámetro de configuración y add_circle expande la descripción.

En esta referencia, se indican diferentes configuraciones mediante los siguientes íconos:

  • Casillas de verificación de Casilla de verificación.
  • Listas desplegables Menú desplegable.
  • Ya no está disponible. obsoleto

Para restablecer las preferencias predeterminadas, desplázate hasta el final de la pestaña Preferencias y haz clic en Restablecer los valores predeterminados y volver a cargar.

Apariencia

En esta sección, se enumeran las opciones que permiten personalizar la apariencia de las Herramientas para desarrolladores.

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

Temas: Se cambió el tema de Herramientas para desarrolladores de la preferencia del sistema a oscuro a claro.
  • Preferencia del sistema
  • Claro
  • Oscuro

En Diseño de paneles, Menú desplegable. se organizan los paneles en paneles.

Afecta a Elements > Styles y pestañas hermanas, y al panel Fuentes > Debugger. La opción auto hace que el diseño dependa del ancho de Herramientas para desarrolladores.

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

En Language Menú desplegable., 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.

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. 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.

Casilla de verificación. La opción Inhabilitar superposición de estado de pausa oculta la superposición Detenida en el depurador Botones para reproducir y para avanzar en el viewport cuando se pausa la ejecución del código.

Casilla de verificación. Mostrar novedades después de cada actualización abre automáticamente la pestaña Novedades del panel lateral después de cada actualización de Chrome.

La pestaña del panel lateral de novedades.

Fuentes

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

Casilla de verificación. Buscar en secuencias de comandos anónimas y de contenido te permite buscar en todos los archivos JavaScript cargados, incluidos los de extensiones de Chrome, mediante la pestaña Buscar.

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

Casilla de verificación. La opción Mostrar archivos automáticamente en la barra lateral 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 (Sources) selecciona archivos en el árbol de navegación a medida que alternas entre pestañas.

Casilla de verificación. Habilitar mapas de fuentes de JavaScript permite que las Herramientas para desarrolladores encuentren fuentes de archivos JavaScript generados o reducidos.

En el panel de fuentes, se 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 foco dentro de las Herramientas para desarrolladores en lugar de insertar el carácter Tab en el Editor.

Requiere que se vuelva a cargar 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 Herramientas para desarrolladores, la tecla Tab mueve el enfoque.

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

Requiere que se vuelva 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 de origen.

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

Primero, este video no muestra ninguna sugerencia. Luego, cuando habilitas esta opción, el Editor muestra sugerencias para completar el comando.

Casilla de verificación. El cierre automático de corchetes agrega automáticamente un corchete o una etiqueta de cierre cuando se escribe uno de apertura.

En este video, se muestra cómo escribir paréntesis de apertura antes y después de habilitar el cierre automático de corchetes.

Casilla de verificación. La concordancia de corchetes subraya y resalta en color rojo claro en el Editor un corchete, una corchete o un corchete de apertura.

Una llave sin un par subrayada con rojo

Casilla de verificación. Plegado de código te permite plegar y desplegar bloques de código entre llaves en el Editor.

Requiere que se vuelva a cargar Herramientas para desarrolladores.

En este video, se muestra cómo plegar bloques de código cuando habilitas esta opción.

La opción Mostrar caracteres de espacio en blanco Menú desplegable. muestra los caracteres de espacio en blanco en el Editor.

Requiere que se vuelva 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 ().
  • La opción Final destaca los caracteres de espacio en blanco al final de las líneas en rojo claro.
Mostrar caracteres de espacio en blanco: Opciones seleccionadas: Todas y Siguiendo.
  • Ninguno
  • Todas (...)
  • Avance

Casilla de verificación. Display variable values inline while Debug te muestra los valores de la variable junto a las sentencias de asignación mientras se pausa la ejecución.

Debugger pausado durante la ejecución de la función muestra valores de variables junto a las sentencias de asignación.

Casilla de verificación. El panel Fuentes de enfoque cuando se activa un punto de interrupción abre Fuentes > 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 desenfocado cuando se pausa en un punto de interrupción. Luego, cuando habilitas esta opción, Herramientas para desarrolladores abre el Editor en el panel Fuentes y te muestra la línea de código con el punto de interrupción.

Casilla de verificación. La opción Imprimir fuentes reducidas de forma automática hace que sean legibles.

Cuando está impreso con este 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.

Código impreso en el panel de fuentes

Casilla de verificación. Habilitar mapas de fuentes de CSS permite que Herramientas para desarrolladores encuentre las fuentes de los archivos CSS generados, por ejemplo, .scss, y te las muestre.

El panel Sources muestra archivos .scss en la sección Creación del árbol de navegación. En el panel Estilos del panel Elementos, se muestran vínculos a fuentes .scss junto a las reglas 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 desplazarse más allá del final de un archivo cuando habilita esta opción.

Casilla de verificación. Permite que las Herramientas para desarrolladores carguen recursos, como mapas de origen, desde rutas de archivos remotas. Está inhabilitado de forma predeterminada por motivos de seguridad.

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

Aparece un mensaje en la consola que informa que está prohibido cargar desde una ruta de archivo remota por motivos de seguridad.

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

Sangría predeterminada: Se inhabilitaron las opciones de anulación y se cambió 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 primero y, luego, en un carácter Tab.

Elementos

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

Casilla de verificación. Show user-agent shadow DOM muestra los nodos de shadow DOM en el árbol del DOM.

El panel Elements muestra nodos de shadow DOM.

Casilla de verificación. Word wrap divide las líneas largas en el árbol del DOM y las une a la línea siguiente.

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

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

En el panel Elementos, se muestran los comentarios HTML.

Casilla de verificación. Revelar nodo del DOM al colocar el cursor selecciona el nodo correspondiente en el árbol del DOM cuando te desplazas sobre un elemento en el viewport en el Inspeccionar. modo de inspección.

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 que tienen el cursor sobre ellos.

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

La información detallada que se muestra en el modo de inspección.

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

Se muestran las reglas en el viewport.

Casilla de verificación. Mostrar información sobre la documentación de CSS muestra información sobre la herramienta 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 en la propiedad.

Cuadro de información con documentación sobre una propiedad de 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. Conservar el registro es lo mismo que Guardar el registro en el panel Red. Guarda solicitudes entre las cargas de páginas.

Este video muestra primero el registro de solicitudes actualizado cuando se vuelve a cargar la página y, luego, persiste cuando habilitas esta opción.

Casilla de verificación. Record network log es lo mismo que Graba el registro de red. Record network log en el panel Network. Inicia o detiene la grabación de solicitudes en el registro de red.

El botón Registrar registro de red en el panel de red.

Casilla de verificación. Habilitar el bloqueo de solicitudes de red bloquea las solicitudes que coinciden con patrones del panel lateral Bloqueo de solicitudes de red.

Este video primero muestra que las solicitudes no están bloqueadas. Después de habilitar esta opción, un patrón en el panel lateral de bloqueo de solicitudes de red las bloquea.

Casilla de verificación. Inhabilitar caché (con Herramientas para desarrolladores abierto) es lo mismo que Inhabilitar caché en el panel Red. Inhabilita la caché del navegador.

Casilla de verificación Inhabilitar la caché.

Casilla de verificación. Los tipos de recursos con código de color destacan las solicitudes en diferentes colores según su tipo en la columna Waterfall del registro de red.

La columna Waterfall en la pestaña Network sin códigos de color y con códigos de colores.

Casilla de verificación. Agrupar registro de red por marco es lo mismo que Agrupar por marcos en el panel Red. Esta opción agrupa 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 Herramientas para desarrolladores está abierta.

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

Rendimiento

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

La acción de la rueda del mouse de Flamechart Menú desplegable. asigna la acción de desplazamiento o zoom a la rueda del mouse cuando navegas por el gráfico tipo llama.

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

En este ejemplo, se muestran las acciones de desplazar y acercar la rueda del mouse en un gráfico tipo llama del panel Rendimiento.

Console

En esta sección, se enumeran las opciones que permiten personalizar Console. 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. La opción Ocultar mensajes de red oculta los mensajes de red en la Consola.

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

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

Casilla de verificación. Log XMLHttpRequests hace que la consola registre XHR y las solicitudes de recuperación.

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

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

Mensajes con marcas de tiempo enumeradas en la consola

Casilla de verificación. La opción Autocompletar desde el historial permite que la consola sugiera comandos que ejecutaste antes a medida que escribes.

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

Menú desplegable de Autocomplete con una opción de comando del historial de Console.

Casilla de verificación. Aceptar sugerencia 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 la Consola agrupe los mensajes similares.

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

Mensajes similares agrupados en la consola.

Casilla de verificación. La opción Show CORS errors in console hace que Console muestre los errores de CORS que registró.

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

Console muestra errores de CORS.

Casilla de verificación. Una evaluación más sencilla 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 resultados.

Casilla de verificación. Tratar la evaluación de código como acción del usuario convierte cualquier comando que ejecutes en Console 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.

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

Un mensaje expandido de console.trace() en la consola.

Casilla de verificación. Conservar el registro sobre navegación hace que la consola registre un mensaje Navigated to en cada navegación y guarda los registros de todas las páginas.

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

La consola muestra los mensajes de “Se ha navegado 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 las Herramientas para desarrolladores de Chrome.

Manejo de vínculos: Elegir una opción para abrir vínculos
  • Automático. Abre archivos en el panel Fuentes de forma predeterminada.
  • Opción arbitraria que se puede agregar con una extensión de Herramientas para desarrolladores.

Persistencia

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

Casilla de verificación. Habilitar anulaciones locales hace que las Herramientas para desarrolladores conserven los cambios que realices en las fuentes entre las cargas de páginas.

Para obtener más información, consulta Anulaciones locales.

Debugger

En esta sección, se enumeran las opciones que controlan el comportamiento de Debugger.

Casilla de verificación. 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 mientras se carga y de qué manera.

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

Un ícono en la barra de direcciones y un ícono de advertencia junto a Sources en Herramientas para desarrolladores.

Casilla de verificación. La opción Inhabilitar seguimientos de pila asíncrono oculta la “historia completa” de la operación asíncrona en la pila de llamadas.

De forma predeterminada, el Debugger intenta realizar el seguimiento de las operaciones asíncronas si el framework que estás usando 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 Herramientas para desarrolladores.

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 nueva pestaña *con* Herramientas para desarrolladores.

Casilla de verificación. Buscar mientras escribes hace que Herramientas para desarrolladores "salte" al primer resultado de la búsqueda a medida que escribes. Si está inhabilitada, las Herramientas para desarrolladores te llevarán al resultado solo cuando presiones Intro.

En este video primero se muestra cómo las Herramientas para desarrolladores "saltan" a medida que escribes una consulta de búsqueda. Luego, cuando habilitas esta opción, Herramientas para desarrolladores te lleva al primer resultado cuando presionas Intro.

Sincronizar

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

Casilla de verificación. La opción 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 debes habilitar la Sincronización de Chrome. Para obtener más información, consulta Configuración de sincronización.