Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 118)

Sofia Emelianova

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

El panel Elements ahora admite @property CSS at-rule. Te permite definir propiedades personalizadas de CSS de forma explícita y registrarlas en una hoja de estilo sin ejecutar JavaScript.

Para inspeccionar tus propiedades personalizadas registradas, en Elementos > Estilos, coloca el cursor sobre el nombre de la propiedad y consulta sus descriptores en la información sobre la herramienta. 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 sobre anulaciones locales

Para continuar con el flujo 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 a un archivo de origen y selecciones Anular contenido, Herramientas para desarrolladores mostrará un diálogo que te llevará a la fuente original. No se puede anular el contenido de los archivos asignados 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ónalo.
En Fuentes > Anulaciones, la opción de menú Borrar todas las anulaciones se reemplazó por la opción Borrar con un comportamiento preciso.

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

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

Para volver a la opción anterior, marca Habilitar "Borrar todas las anulaciones temporalmente" 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 que encontró 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 que se vea no solo de forma vertical, sino también horizontal.

El antes y el después de realizar la búsqueda muestran todas las coincidencias por línea.

Además, la Búsqueda mejoró su velocidad. Observa la comparación del antes (izquierda) y el después (derecha) en el siguiente video.

Por último, la Búsqueda ahora admite la opción para ignorar listas y no te mostrará los resultados de los archivos ignorados.

Problemas de Chromium: 1468875 y 1472019.

Panel de fuentes mejoradas

Espacio de trabajo optimizado en el panel Sources

Se optimizó la función workspace en el panel Sources:

Asignación de nombres coherente. En particular, se cambió el nombre del panel Fuentes > Sistema de archivos a Espacio de trabajo. Varios textos de la IU en este panel ahora son más claros y no tienen redundancias.
Configuración mejorada. Encuentra mejores indicaciones para arrastrar y soltar carpetas, o haz clic en un enlace para seleccionar una carpeta.

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

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

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

Cómo reordenar los paneles en Fuentes

Ahora puedes reordenar los paneles en el lado izquierdo del panel Fuentes arrastrando y soltando, de manera similar a como puedes reordenar otros paneles, pestañas y paneles.

Problemas de Chromium: 1473758.

Resaltado de sintaxis e impresión con formato para más tipos de secuencias de comandos

El panel Fuentes ahora puede hacer lo siguiente:

Imprime el código JavaScript intercalado en los siguientes tipos de secuencias de comandos: module, importmap, speculationrules.
Destaca la sintaxis de los tipos de secuencias de comandos importmap y speculationrules, ambos con JSON.

Antes y después de la impresión con tela y resaltado de sintaxis del tipo de script de reglas de especulación.

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

Problema de Chromium 1473875.

Emular la función de medios de preferencia, reducción de transparencia

Chrome 118 ahora admite la función multimedia prefers-reduced-transparency. Esta función permite que los desarrolladores adapten contenido web a las preferencias seleccionadas por el usuario para reducir la transparencia en el SO, como el parámetro de configuración Reducir 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 de Lighthouse ahora ejecuta Lighthouse 11. En particular, esta versión quita la navegación heredada, agrega nuevas auditorías de accesibilidad y cambia la puntuación de la categoría de accesibilidad.

Consulta también la lista completa de cambios. Para conocer los conceptos básicos del uso del panel Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: optimiza 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:

Resumen 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 corrigieron varios problemas de anuncios del lector de pantalla.

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

Otros aspectos destacados

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

Red: Íconos nuevos para tipos de recursos populares: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
Se actualizan los colores de los colores de Material 3 en muchos elementos de la IU, en particular, en los paneles Elements y Performance (1456690, 1472243).
La sección Problemas ahora conserva los problemas de cookies en las navegaciones (1466601).
Se implementaron varias mejoras en Application > Preloading, en particular las cuadrículas que se pueden ordenar y los detalles del conjunto de reglas revisados (1410709).
Se implementaron varias mejoras del editor de comandos en el monitor de protocolo, en particular las advertencias sobre entradas incorrectas, la edición de comandos enviados, el 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 substrings y mucho más (1448050).
El gráfico tipo llama Rendimiento tiene un borde alrededor del cuadro total del gráfico circular (1470147).
Fuentes ahora no trata los guiones como caracteres de palabra en CSS (1471354).
La función de autocompletar ahora ordena las palabras clave con buen CSS al final.
Los filtros RegEx ahora admiten espacios (1346936).
Se corrigió la detección de funciones de consultas de medios fijas en Elements (1472693).

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).