Novedades de Herramientas para desarrolladores (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Nueva sección para las propiedades personalizadas en Elementos > Estilos

El panel Elementos 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 de 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 Network obtiene una nueva columna HasOverrides 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ónalo.

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

  • En Fuentes > Anulaciones, la opción del 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 Delete muestra primero un mensaje de advertencia y solicita confirmación. Luego, borra todo el contenido de la carpeta en la que hiciste clic.

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 función de ignorar lista 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 fuente.

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

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

Cómo reordenar paneles en Fuentes

Ahora puedes reordenar los paneles en la parte izquierda del panel Sources arrastrando y soltando, de manera similar a como puedes reordenar otros paneles, pestañas y paneles.

Problemas de Chromium: 1473758.

Impresión con formato y resaltado de sintaxis 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 con formato estilístico 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 que los desarrolladores adapten el contenido web a las preferencias que seleccionó el usuario para reducir la transparencia en el SO, como el parámetro de configuración Reduce transparencia 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 aprender los conceptos básicos del uso del panel de Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema 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 sobre 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 correcciones y mejoras notables 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 Elements y Performance (1456690, 1472243).
  • Problemas ahora conserva los problemas de cookies en todas las navegaciones (1466601).
  • Varias mejoras en Aplicación > Precarga, en particular cuadrículas que se pueden ordenar y 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 vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que los usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

Novedades de DevTools

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