Preferencias

Sofia Emelianova
Sofia Emelianova

Configura el aspecto y el comportamiento de las 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 del panel.

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

La sección Apariencia en la pestaña Preferencias.

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:

  • 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 para personalizar la apariencia de las Herramientas para desarrolladores.

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

Temas: Cambiar el tema de las Herramientas para desarrolladores de la preferencia del sistema a oscuro y a claro.
  • Preferencia del sistema
  • Claro
  • Oscuro

Panel layout Menú desplegable. 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.

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

Idioma Menú desplegable. 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.

Idioma: El 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 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. Disable paused state overlay oculta la superposición Paused in debugger Botones Play y Step over. 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 lateral Novedades después de cada actualización de Chrome.

La pestaña del panel lateral Novedades.

Fuentes

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

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

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

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

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

Casilla de verificación. Habilitar la tecla Tab para mover el foco hace que la tecla Tecla Tab. 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.

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

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

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 coincidencia de corchetes subraya y destaca en rojo claro en el Editor un corchete, una llave o un paréntesis sin un par.

Una llave sin su par subrayada en rojo.

Casilla de verificación. 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 Menú desplegable. 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 caracteres de espacio en blanco: Opciones seleccionadas: Todo y Final.
  • Ninguno
  • Todos (...)
  • Trailing

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

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

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

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

Código con formato estilístico en el panel Fuentes.

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

El panel Sources muestra los archivos .scss en la sección Authored del árbol de navegación. En el panel Styles del panel Elements, se muestran vínculos a fuentes .scss junto a las reglas de CSS.

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

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

Un mensaje en la consola que informa que, por motivos de seguridad, se prohíbe la carga desde una ruta de acceso de archivo remota.

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: 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
  • Tabulador

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.

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 del DOM de shadow.

Casilla de verificación. Ajuste de línea divide las líneas largas del árbol del DOM y las ajusta a la línea siguiente.

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

Casilla de verificación. Show HTML comments 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 de Inspeccionar.

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.

Casilla de verificación. Show detailed inspect tooltip muestra la información sobre la herramienta en el viewport en el modo de inspección de Inspeccionar cuando colocas el cursor sobre un elemento.

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

Casilla de verificación. Show rulers on hover muestra las reglas en el viewport cuando colocas el cursor sobre los elementos del árbol del DOM.

Se muestran reglas en el viewport.

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

La información sobre la documentación de una propiedad de CSS.

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.

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

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

El botón Grabar el 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 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.

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

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

Las dos opciones del botón Exportar HAR.

Casilla de verificación. Color-code resource types destaca las solicitudes con diferentes colores según su tipo en la columna Waterfall del registro de red.

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

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

Es 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 un anuncio que se muestra en el panel de redes con el filtro de solicitudes bloqueadas habilitado.

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 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: Se cambió la acción de la rueda del mouse de desplazamiento a zoom para el gráfico tipo llama.
  • Desplazamiento
  • Zoom

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.

Opciones similares en la consola y en Configuración.

Casilla de verificación. 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 Configuración. como en la Configuración de la consola.

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

Casilla de verificación. 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. Configuración y Consola > Configuración, y registrar los mensajes de XHR finished loading en la Consola.

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

Mensajes con marcas de tiempo que aparecen en la consola.

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

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

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

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

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

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

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

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

La consola muestra mensajes de "Navegación a" y guarda registros en diferentes páginas.

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.

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

Persistencia

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

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

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

Cuando se inhabilita JavaScript, Chrome muestra el ícono Inhabilitaste JavaScript. correspondiente en la barra de direcciones y las Herramientas para desarrolladores muestran un ícono de advertencia Advertencia. junto a Fuentes.

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

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

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.

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

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