Novedades de Herramientas para desarrolladores (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Nueva sección para propiedades personalizadas en Elementos > Estilos

El panel Elements ahora admite la regla de anidación CSS@property. Te permite definir propiedades personalizadas de CSS de forma explícita y registrarlas en una hoja de estilo sin ejecutar ningún código JavaScript.

Para inspeccionar tus propiedades personalizadas registradas, en Elementos > Estilos, coloca el cursor sobre el nombre de la propiedad y consulta sus descriptores en una ventana emergente. En la información sobre herramientas, haz clic en el vínculo para ver la propiedad registrada en la sección @property que se puede contraer.

Problemas de Chromium: 1471102, 1471103 y 1471105.

Más mejoras en las anulaciones locales

Siguiendo con la serie de mejoras de la versión anterior, las anulaciones locales ahora hacen lo siguiente:

  • En Fuentes > Página, cuando hagas clic con el botón derecho en un archivo con asignación de origen y selecciones Anular contenido, DevTools mostrará un diálogo que te llevará a la fuente original. No se puede anular el contenido de los archivos asignados de fuente.

    Es el diálogo que te dirige al código original en lugar del archivo con mapa de origen.

  • El panel Red obtiene una nueva columna Tiene anulaciones y un filtro has-overrides:[content|headers|yes|no] correspondiente. Para ver la columna Tiene anulaciones, haz clic con el botón derecho en el encabezado de la tabla y selecciónala.

    Filtrar por el valor “has-overrides:yes” en la columna “Tiene anulaciones”

  • En Fuentes > Anulaciones, la opción de menú Borrar todas las anulaciones se reemplazó por la opción Borrar con un comportamiento preciso.

    Antes y después de reemplazar "Borrar todas las anulaciones" por "Borrar".

La opción anterior Borrar todas las anulaciones era confusa porque solo borraba las anulaciones activas en la sesión actual, marcadas con el ícono de punto púrpura Se guardó la configuración..

La nueva opción Borrar primero muestra un mensaje de advertencia y solicita confirmación, y luego borra la carpeta en la que hiciste clic con todo su contenido.

Para volver a la opción anterior, marca Casilla de verificación. Habilitar "Borrar todas las anulaciones temporalmente" en Configuración. Configuración > Experimentos.

Problemas de Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

Los resultados de la búsqueda ahora muestran una entrada por cada coincidencia que se encontró en una línea de código. Anteriormente, solo se mostraba la primera coincidencia por línea de código. El nuevo comportamiento es especialmente útil cuando buscas en archivos reducidos. Cuando haces clic en un resultado de la búsqueda, se abre el archivo en el editor y ahora se desplaza la coincidencia para que aparezca no solo verticalmente, sino también horizontalmente.

Antes y después de realizar la búsqueda, se muestran todas las coincidencias por línea.

Además, la búsqueda aumentó su velocidad. Mira la comparación de antes (izquierda) y después (derecha) en el siguiente video.

Por último, la Búsqueda ahora admite la lista de elementos ignorados y no te mostrará resultados de archivos ignorados.

Problemas de Chromium: 1468875, 1472019.

Panel de fuentes mejorado

Workspace optimizado en el panel de fuentes

La función lugar de trabajo del panel Fuentes es nueva y optimizada:

  • Nombres coherentes: En particular, el panel Sources > Filesystem cambió su nombre a Workspace. Varios textos de la IU en este panel ahora son más claros y no tienen redundancias.
  • Configuración mejorada. Consulta mejores indicaciones para arrastrar y soltar carpetas, o haz clic en un vínculo para seleccionar una carpeta.

Fuentes > Lugar de trabajo te permite sincronizar los cambios que haces en DevTools directamente con tus archivos de origen.

Mira la nueva configuración y el flujo de trabajo en acción:

Problemas de Chromium: 1473771, 1473880, 1473963, 1474686 y 1474687.

Cómo reordenar los paneles en Fuentes

Ahora puedes arrastrar y soltar los paneles del lado izquierdo del panel Fuentes para reordenarlos, de manera similar a como puedes reordenar otros paneles, pestañas y paneles.

Problemas de Chromium: 1473758.

Se agregó el resaltado de sintaxis y la impresión legible para más tipos de secuencias de comandos.

El panel Fuentes ahora puede hacer lo siguiente:

  • Usa la función de formato de texto enriquecido para JavaScript intercalado en los siguientes tipos de secuencias de comandos: module, importmap y speculationrules.
  • Destaca la sintaxis de los tipos de secuencias de comandos importmap y speculationrules, que contienen JSON.

Antes y después de la impresión legible y el resaltado de sintaxis del tipo de secuencia de comandos de las reglas de especulación.

Para obtener más información sobre las reglas de especulación, consulta Renderiza previamente las páginas en Chrome para navegarlas de forma instantánea.

Error de Chromium: 1473875.

Emular la función de medios prefers-reduced-transparency

Chrome 118 ahora admite la función multimedia prefers-reduced-transparency. Esta función permite a los desarrolladores adaptar el contenido web a la preferencia seleccionada por el usuario para reducir la transparencia en el SO, como el parámetro de configuración Reduce transparency en macOS.

Para emular esta función multimedia, abre la pestaña Renderización y desplázate hacia abajo hasta ella.

Error de Chromium: 1424879.

Lighthouse 11

El panel de Lighthouse ahora ejecuta Lighthouse 11. En particular, esta versión quita la navegación heredada y agrega nuevas auditorías de accesibilidad, y cambia la forma en que se califica la categoría de accesibilidad.

Consulta también la lista completa de cambios. Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Mejoras de accesibilidad

Las Herramientas para desarrolladores ahora admiten más combinaciones de teclas de navegación:

  • Descripción general de CSS: Usa las flechas hacia arriba y hacia abajo para navegar por las secciones de la barra lateral izquierda.
  • Memoria: En la barra lateral izquierda, coloca el cursor en el botón Guardar junto a las instantáneas con Tab y presiona Intro para seleccionar la carpeta.

Además, se solucionaron varios problemas de anuncios del lector de pantalla.

Problemas de Chromium: 1470401, 1471301, 1474108, 1468631.

Otros aspectos destacados

Estas son algunas de las correcciones y mejoras más importantes de esta versión:

  • Red: Se agregaron nuevos íconos para los tipos de recursos populares: media, wasm, websocket, manifest, fetch/xhr y json (1466298).
  • Se actualizaron los colores a los colores de Material 3 en muchos elementos de la IU, en particular en los paneles Elementos y Rendimiento (1456690, 1472243).
  • Problemas ahora conserva los problemas de cookies en todas las navegaciones (1466601).
  • Se realizaron varias mejoras en Application > Preloading, en particular, en las cuadrículas que se pueden ordenar y en los detalles revisados del conjunto de reglas (1410709).
  • Se realizaron varias mejoras en el editor de comandos del Monitor de protocolos, en particular, advertencias sobre entradas incorrectas, edición de un comando enviado, editor para parámetros de objetos sin claves predefinidas, compatibilidad con enums no definidas por referencias, objetos sin referencia de tipo, comandos de filtro por coincidencias de subcadena y mucho más (1448050).
  • El gráfico de llama de rendimiento tiene un borde alrededor del cuadro total del gráfico circular (1470147).
  • Sources ahora no trata los guiones como caracteres de palabras en CSS (1471354).
  • La función Autocomplete ahora siempre ordena las palabras clave de CSS al final.
  • Los filtros de regex ahora admiten espacios (1346936).
  • Elements corrigió la detección de funciones de consulta multimedia (1472693).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.