Novedades de Herramientas para desarrolladores (Chrome 85)

Jecelyn Yeen

Edición de estilos para frameworks de CSS-in-JS

El panel Styles ahora admite mejor la edición de estilos creados con las APIs del Modelo de objetos de CSS (CSSOM). Muchos frameworks y bibliotecas de CSS-in-JS usan las APIs de CSSOM de forma interna para construir estilos.

Ahora también puedes editar los estilos agregados en JavaScript con Hojas de estilo constructibles. Las hojas de estilo constructibles son una nueva forma de crear y distribuir estilos reutilizables cuando se usa Shadow DOM.

Por ejemplo, los estilos h1 agregados con CSSStyleSheet (APIs de CSSOM) no se podían editar anteriormente. Ahora se pueden editar los siguientes elementos en el panel Styles:

Error de Chromium #946975

Lighthouse 6 en el panel de Lighthouse

El panel de Lighthouse ahora ejecuta Lighthouse 6. Consulta Novedades de Lighthouse 6.0 para obtener un resumen de todos los cambios importantes o las notas de la versión 6.0.0 para ver una lista completa de todos los cambios.

Lighthouse 6.0 incorpora tres métricas nuevas al informe: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) y Total Blocking Time (TBT). LCP y CLS son 2 de las nuevas Métricas web esenciales de Google, y TBT es un proxy de medición de laboratorio para otra Métrica web esencial, el retraso de primera entrada.

También se reponderó la fórmula de la puntuación de rendimiento para reflejar mejor la experiencia de carga de los usuarios.

Error de Chromium #772558

Baja de First Meaningful Paint (FMP)

First Meaningful Paint (FMP) dejó de estar disponible en Lighthouse 6.0. También se quitó del panel Rendimiento. El Largest Contentful Paint es el reemplazo recomendado para el FMP. Consulta Primera pintura significativa para obtener una explicación de por qué se dejó de usar.

Error de Chromium #1096008

Compatibilidad con nuevas funciones de JavaScript

Ahora, las Herramientas para desarrolladores brindan una mejor asistencia para algunas de las funciones del lenguaje JavaScript más recientes:

• Autocompletado de sintaxis de encadenamiento opcional: El autocompletado de propiedades en la consola ahora admite la sintaxis de encadenamiento opcional, p.ej., name?. ahora funciona además de name. y name[.
• Resaltado de sintaxis para campos privados: Los campos de clase privados ahora se resaltan correctamente con la sintaxis y se imprimen de forma legible en el panel Sources.
• Destacado de sintaxis para el operador coalescente nulo: Las Herramientas para desarrolladores ahora imprimen correctamente el operador coalescente nulo en el panel Sources.

Problemas de Chromium #1083214, #1073903, #1083797

Nuevas advertencias de accesos directos de la app en el panel de manifiesto

Los accesos directos de la app ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de una app web.

El panel Manifest ahora muestra advertencias en los siguientes casos:

• Los íconos de acceso directo de la app son más pequeños que 96 × 96 píxeles.
• Los íconos de acceso directo y del manifiesto de la app no son cuadrados (ya que se ignorarán).

Problema de Chromium #955497

Eventos respondWith de Service Worker en la pestaña Timing

La pestaña Timing del panel Network ahora incluye eventos respondWith de Service Worker. respondWith es el tiempo inmediatamente anterior a la ejecución del controlador de eventos fetch del trabajador de servicio hasta el momento en que se resuelve la promesa respondWith del controlador fetch.

Problema de Chromium #1066579

Visualización coherente del panel Computed

El panel Computed del panel Elements ahora se muestra de forma coherente como un panel en todos los tamaños de viewport. Anteriormente, el panel Computed se fusionaba dentro del panel Styles cuando el ancho del viewport de Herramientas para desarrolladores era estrecho.

Problema de Chromium #1073899

Desplazamientos de código de bytes para archivos de WebAssembly

DevTools ahora usa desplazamientos de código de bytes para mostrar los números de línea del desensamblaje de Wasm. Esto deja más claro que estás viendo datos binarios y es más coherente con la forma en que el tiempo de ejecución de Wasm hace referencia a las ubicaciones.

Error de Chromium #1071432

Copia y corta línea por línea en el panel de fuentes

Cuando realices una acción de copiar o cortar sin ninguna selección en el editor del panel Sources, las Herramientas para desarrolladores copiarán o cortarán el contenido de la línea actual. Por ejemplo, en el siguiente video, el cursor se encuentra al final de la línea 1. Después de presionar la combinación de teclas para cortar, se copia y se borra toda la línea.

Error de Chromium #800028

Actualizaciones en la configuración de la consola

Desagrupar los mensajes de la misma consola

El botón de activación Agrupar similares en la configuración de la consola ahora se aplica a los mensajes duplicados. Anteriormente, solo se aplicaba a mensajes similares.

Por ejemplo, antes, DevTools no desagrupaba los mensajes hello, incluso si la opción Agrupar similares estaba desactivada. Ahora, los mensajes de hello no se agrupan:

Error de Chromium #1082963

Cómo conservar la configuración de Solo el contexto seleccionado

Ahora se conservan los parámetros de configuración de Solo el contexto seleccionado en Configuración de Console. Anteriormente, la configuración se restablecía cada vez que cerrabas y volvías a abrir Herramientas para desarrolladores. Este cambio hace que el comportamiento del parámetro de configuración sea coherente con otras opciones de Configuración de la consola.

Problema de Chromium #1055875

Actualizaciones del panel de rendimiento

Información de la caché de compilación de JavaScript en el panel Rendimiento

La información de la caché de compilación de JavaScript ahora siempre se muestra en la pestaña Summary del panel Rendimiento. Anteriormente, las Herramientas para desarrolladores no mostraban nada relacionado con el almacenamiento en caché de código si este no se producía.

Problema de Chromium #912581

Alineación de la sincronización de la navegación en el panel Rendimiento

El panel Rendimiento solía mostrar los tiempos en las reglas según el momento en que comenzaba la grabación. Esto cambió para las grabaciones en las que el usuario navega, y las Herramientas para desarrolladores ahora muestran los tiempos de la regla en relación con la navegación.

También actualizamos los tiempos de los eventos DOMContentLoaded, First Paint, First Contentful Paint y Largest Contentful Paint para que sean relativos al inicio de la navegación, lo que significa que coinciden con los tiempos que informa PerformanceObserver.

Error de Chromium #974550

Nuevos íconos para los puntos de interrupción, los puntos de interrupción condicionales y los puntos de registro

El panel Fuentes tiene nuevos diseños para los puntos de interrupción, los puntos de interrupción condicionales y los puntos de registro. Los puntos de interrupción tienen un diseño de marcas actualizado con colores más brillantes y agradables. Se agregaron íconos para diferenciar los puntos de interrupción condicionales y los puntos de registro.

Error de Chromium #1041830

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

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

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

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

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