Novedades en las Dev Tools 119 de Google Chrome

5 minuto(s)

Creo que no hay desarrollador web que nunca haya usado al menos una función o herramienta de las Chrome DevTools.

Yo las uso con mucha frecuencia, me ayudan a encontrar elementos y gestionarlos en el DOM rápidamente y cada nueva característica es como una nueva herramienta en un llavero multiuso.

Acompañame a conocer cuales son las Novedades en las Dev Tools 119 de Google Chrome, vamos con ello.

Desarrollo web con Google Chrome DevTools
En las Chrome Devtools podemos encontrar herramientas interesantes

Como en Posts anteriores, para dar una mejor descripción de las Características nuevas, colocaré el título de la nueva característica, descripción y una o varias imágenes de dicha característica.

Sección @property mejorada en Elements > Styles

Se han agregado las siguientes características:

Regla @property editable

Ahora puedes editar la regla CSS @property en la sección correspondiente en el panel Elements > Styles:

Regla @property editable
Poder editar esta regla, nos sirve para realizar ciertas pruebas

Se informan problemas con reglas @property no válidas

La pestaña Issues ahora informa problemas con declaraciones no válidas en las reglas @property:

Se informan problemas con reglas @property no válidas
Obtendrpas detalles de una regla @property no válida

Lista actualizada de dispositivos para emular

Se actualizo la lista de agente de usuario para reflejar el uso promedio de navegadores y sistemas operativos en Setting > Devices. Ahora puedes emular más dispositivos actualizados en el modo de dispositivo:

Lista actualizada de dispositivos para emular
Podrás agregar más dispositivos al modo dispositivo

JSON en Línea con impresión bonita en Etiquetas de Script en Sources

El panel Sources ahora admite JSON en línea con impresión bonita en etiquetas HTML <script> para facilitar la depuración:

JSON en línea con impresión bonita en etiquetas <script> de HTML en Sources
Se aprecia mejor el código JavaScript

Autocompletar Campos Privados en la Consola

Ahora puedes autocompletar campos de clases privadas cuando los evalúes fuera del alcance de la clase en la Console :

Autocompletar campos privados en la consola
Los campos privados antes no se podían autocompletar

Lighthouse 11.1.0

El panel Lighthouse ahora ejecuta Lighthouse 11.1.0. Mira la lista completa de cambios.

Para conocer los conceptos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: optimizar la velocidad del sitio web.

Lighthouse 11.1.0
La primera subversión de Lighthouse 11

Mejoras de Accesibilidad

Los lectores de pantalla ahora leerán lo siguiente:

  • Advertencias y errores en la Console.
  • El texto en Do you trust this code? en un cuadro de diálogo al pegar código en la Console o Sources.

Además, el panel Applications solucionó problemas de contraste con enlaces en modo de alto contraste.

Mejoras de accesibilidad
Los lectores de pantalla brinda nuevos datos

Desuso de Web SQL

La sección Application > Web SQL se eliminará en Chrome 123 porque la API de la base de datos Web SQL ya no se mantiene. Esta versión agrega una advertencia a la sección sobre la próxima eliminación:

Desuso de Web SQL

Para obtener más información, consulta Desuso y eliminación de Web SQL.

Validación de la Relación de Aspecto de la Captura de pantalla en Application > Manifest

La sección Application > Manifest ahora comprueba si las capturas de pantalla de tu aplicación web con el mismo factor de forma (wide o narrow) tienen la misma relación de aspecto:

Validación de la relación de aspecto de la captura de pantalla en Application > Manifest
El archivo Manifest brinda información de una aplicación web progresiva

Para obtener más información, consulta Depurar aplicaciones web progresivas y Agregar un manifiesto de aplicación web.

Otros Cambios Destacados

A continuación, algunas correcciones notables de esta versión:

  • Elements:
    • Las muestras de la función de temporización de animación no se muestran para las propiedades CSS escritas en formato abreviado en las propiedades abreviadas expandibles (1149182).
    • Por ahora, el autocompletado contain-intrinsic-* no proporciona el valor auto único incorrecto porque debería ser auto <length>(1480415).
    • -webkit-*Se eliminó la compatibilidad con propiedades obsoletas y no válidas (1086089, 1030765).
  • Breakpoints: Se corrigió el error por el cual el cuadro de diálogo de edición de puntos de interrupción desaparecía cuando se cambia el tipo de punto de interrupción (1485782).
  • Performance:
    • Se solucionó el error de análisis de color durante la grabación de la interpretación (1480205).
    • Se corrigió el error por el cual LCP no se mostraba en la pista de tiempos (1487136).
  • Network: La columna Set cookies ahora muestra la cantidad correcta de cookies configuradas, excluidas las bloqueadas (1486903).
  • Las extensiones de DevTools ahora se cargan después de la navegación a un host no bloqueado (1476264).
  • Se corrigió el error con el contexto de ejecución de script incorrecto para las extensiones (1275331).

Hasta aquí llegamos con todas las Novedades que trae esta nueva versión de Chrome DevTools Nro 119, nos vemos en la siguiente actualización.

Nota(s)

  • Algunos de los pasos mencionados pueden variar en futuras versiones de Chrome Dev Tools, esto no depende de nosotros si no de los desarrolladores que dan soporte a las Dev Tools y cambian el orden de las opciones mencionadas.
  • Algunos de los enlaces compartidos en este Post, pueden dejar de existir, esto no depende de nosotros, si no de los servicios que los almacenan.
  • Si aún no tienes actualizado tu Dev Tools en Chrome, ten paciencia pronto se actualizará, a veces toma tiempo en llegar los updates.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.