Novedades en las Dev Tools 97 de Google Chrome

El día 25 de Noviembre de 2021 el equipo de desarrolladores que da soporte a las Chrome DevTools lanzo una nueva versión con diferentes características y novedades, probablemente sea la última del año 2021, eso lo veremos en el mes de Diciembre, si es que se animan a lanzar una versión nueva de este genial conjunto de herramientas, ahora vamos con este Post en donde te compartiré las novedades que trae esta versión número 97, que si bien no son muchas, pero si son muy importantes, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

• Novedades en las Dev Tools 96 de Google Chrome
• Novedades en las Dev Tools 95 de Google Chrome
• Novedades en las Dev Tools 94 de Google Chrome
• Novedades en las Dev Tools 93 de Google Chrome
• Novedades en las Dev Tools 92 de Google Chrome
• Que son las Chrome Dev Tools y otros Detalles
• Puedes leer más en la categoría Chrome Dev Tools

Asimismo, te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify	SoundCloud	Apple Podcasts

Bien ahora continuemos con el Post: Novedades en las Dev Tools 97 de Google Chrome. 

Al igual que 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. 

Función de vista previa: Nuevo Panel Recorder

Ahora puedes usar el nuevo panel Recorder, que te permite grabar, reproducir y medir los flujos de usuarios. Abre el panel Recorder, sigue las instrucciones en pantalla para comenzar a grabar.

Por ejemplo, puedes registrar el proceso de pago de un cáfe mediante esta aplicación demostrativa. Después de agregar un café y completar los detalles del pago, puedes finalizar la grabación, reproducir el proceso o hacer clic en el botón Measure performance para medir el flujo de usuarios en el panel Performance.

Puedes ir a la documentación oficial del panel Recorder para obtener más información con un tutorial que puedes seguir paso a paso. El panel Recorder es una función de vista previa y el equipo de Chrome DevTools está trabajando activamente en él. Puedes dejar tus comentarios en este enlace para mejorar más aún esta herramienta.

Actualización de la lista de Dispositivos en el Modo de dispositivo (Device Mode)

Cuando se habilita la barra de herramientas de dispositivos, ahora se pueden ver dispositivos más modernos a la lista de dispositivos. Selecciona un dispositivo para simular sus dimensiones.

Este problema fue debatido en este enlace.

Autocompletado con Editar como HTML (Edit as HTML)

La interfaz de usuario Edit as HTML ahora admite autocompletado y resaltado de sintaxis. En el Panel Elements, has clic con el botón derecho en un elemento y selecciona Edit as HTML.

Intenta escribir un propiedad DOM, por ejemplo id, aria, etc. y la funcionalidad de autocompletado te ayudará a encontrar el nombre de propiedad que desees.

Este problema fue debatido en este enlace.

Experiencia para Depurar Código Mejorada

Los números de columna ahora se incluyen en el error de salida en la consola (Console). Tener de manera sencilla el acceso al número de columna es esencial para la depuración, especialmente con JavaScript minificado.

Este problema fue debatido en este enlace.

Sincronización de la Configuración de DevTools entre Dispositivos (Experimental)

Esta función experimental se estra desarrollando y te permitirá sincronizar en todos los dispositivos de forma predeterminada cuando activas la sincronización de perfil de Chrome.

Puedes cambiar la configuración de sincronización de DevTools a través de Settings > Sync > Enable settings sync.

Mediante esta nueva configuración, se te hará más fácil trabajar entre varios dispositivos, por ejemplo, las siguientes configuraciones de apariencia están sincronizadas para que tenga una experiencia uniforme en todos los dispositivos y no necesites volver a definir la misma configuración.

Pero no todas las configuraciones están sincronizadas. Por ejemplo, la configuración del dock o base no esta sincronizada porque los desarrolladores tienen diferentes preferencias de dock o base cuando depuran en diferentes sitios.

Como se menciono al inicio de esta novedad, esta función aún es experimental en este momento, el equipo de Chrome DevTools está trabajando activamente en ella. Si tienes algún comentario, puedes compartirlo en el siguiente enlace.

Hasta aquí llegamos con todas las Novedades que trae esta nueva versión de Chrome DevTools Nro 97, 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.