Novedades de Herramientas para desarrolladores (Chrome 118)

Nueva sección para propiedades personalizadas en Elementos > Estilos

El panel Elementos ahora admite la regla at-de CSS@property. Permite definir las propiedades personalizadas de CSS de forma explícita y registrarlas en una hoja de estilo sin ejecutar JavaScript.

Para inspeccionar las propiedades personalizadas registradas, en Elementos > Estilos, coloca el cursor sobre el nombre de la propiedad y consulta sus descriptores en un cuadro de información. En el cuadro de información, 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, 1471105.

Más mejoras de anulaciones locales

Continuando con la transmisión de mejoras en 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 asignado al código fuente y selecciones Anular contenido, las Herramientas para desarrolladores mostrarán un diálogo que te llevará a la fuente original. No se puede anular el contenido de los archivos asignados 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.

  

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

  

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

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 Habilitar "Borrar todas las anulaciones de forma temporal" en Configuración > Experimentos.

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

Búsqueda mejorada

Los resultados de la búsqueda ahora muestran una entrada por todas las coincidencias en una línea de código. Anteriormente, solo mostraba la primera coincidencia por línea de código. El nuevo comportamiento es especialmente útil cuando realizas búsquedas en archivos reducidos. Cuando haces clic en un resultado de la búsqueda, se abre el archivo en el editor y se desplaza la coincidencia para verla no solo en sentido vertical, sino también horizontal.

Además, mejoró la velocidad de la Búsqueda. Mira la comparación del antes (izquierda) y el 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

Lugar de trabajo optimizado en el panel Sources

La función workspace del panel Sources se optimizó de la siguiente manera:

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

Fuentes > Espacio de trabajo te permite sincronizar los cambios que realices en Herramientas para desarrolladores directamente con tus archivos de origen.

Observa la nueva configuración y el nuevo 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 Sources ahora puede realizar las siguientes acciones:

• Imprimir el código 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.

Para obtener más información sobre las reglas de especulación, consulta Cómo renderizar previamente las páginas en Chrome para poder navegar de forma instantánea a las páginas.

Problema de Chromium: 1473875.

Emula la función de contenido multimedia con preferencia de reducción de transparencia

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.

Problema de Chromium: 1424879.

Faro 11

El panel Lighthouse ahora ejecuta Lighthouse 11. En particular, esta versión quita la navegación heredada, 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 Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema de Chromium: 772558.

Mejoras de accesibilidad

Herramientas para desarrolladores ahora admite 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, enfoca el botón Guardar junto a las instantáneas con la Tabulación y presiona Intro para seleccionar la carpeta.

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

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

Otros aspectos destacados

Estas son algunas correcciones y mejoras notables en esta versión:

• Red: Se agregaron íconos nuevos para 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).
• Issues ahora conserva los problemas de cookies en las navegaciones (1466601).
• Varias Aplicación > Mejoras en la precarga, en particular las cuadrículas que se pueden ordenar y los detalles revisados del conjunto de reglas (1410709)
• Se implementaron varias mejoras del editor de comandos en el monitor de protocolo, en particular advertencias sobre entradas incorrectas, edición de comandos enviados, editor de parámetros de objetos sin claves predefinidas, compatibilidad con enumeraciones no definidas por referencias, objetos sin referencia de tipo, comandos de filtro por coincidencias de subcadenas y mucho más (1448050).
• El gráfico tipo llama de Rendimiento tiene un borde alrededor del recuadro del total en el gráfico circular (1470147).
• En Sources, ahora no se consideran los guiones como caracteres de palabras en CSS (1471354).
• El autocompletado ahora ordena siempre las palabras clave de CSS al final.
• Los filtros de regex ahora admiten espacios (1346936).
• Elements corrigió la detección de funciones de consulta de medios (1472693).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.