Novedades en las Dev Tools 70 de Google Chrome

Nube Colectiva

hace 6 años

En esta página:

Después de 3 meses desde la última actualización en Dev Tools 68, los ingenieros que dan soporte han decidido saltarse la versión Dev Tools 69 por que no contaban con suficientes funciones y cambios importantes en la herramienta para desarrolladores (Dev Tools), es por eso que decidieron lanzar la versión Dev Tools 70 que cuenta con funciones muy importantes que compartiremos contigo en este artículo.

Al final de este artículo, colocaremos un video en donde puedes ver si deseas las novedades en Dev Tools 69.

Expresiones en Tiempo Real (Consola)

Ahora puedes colocar una expresión en la consola de Comandos y monitorear su valor en tiempo Real, para activar esta función debes de hacer clic en el icono en forma de ojo Crear expresión en Vivo y aparecerá un cuadro en donde puedes escribir la expresión

Optimización del Panel Rendimiento

Antes tomaba muchos segundos demás en procesar y visualizar los datos en el Panel Performance, así mismo con la Pestaña Resumen también demoraba unos segundos en cargar la información, en Dev Tools 70 la información carga más rápido

Regular la Red 3G

En esta versión 70 puedes configurar la red 3G para que funcione rápida o lenta

Autocompletado de Puntos de Interrupción Condicionales

Puedes completar más rápido las expresiones que estés escribiendo y en un Punto de interrupción condicional o cuando conozcas la región exacta del código que necesita investigar, pero solo quiere hacer una pausa cuando alguna otra condición sea verdadera.

Romper en los Eventos de AudioContext

Puedes usar el Panel Event Listener Breakpoints para realizar una pausa en la primera línea del controlador de eventos de ciclo de vida de un AudioContext (Forma parte de la Web Audio API, que se puede utilizar para procesar y sintetizar audio)

Depuración de Node JS con NDB

Con NDB podrás depurar aplicaciones creadas con Node JS, incluye las características que ofrece Dev Tools y también:

Detectar y Adjuntar procesos secundarios
Colocar puntos de interrupción antes que se requieran módulos
Edición de archivos dentro de la interfaz del usuario de Dev Tools
Colocar todas las secuencias de comandos fuera del lugar de trabajo predeterminado, estas secuencias se colocan en una caja negra.

Medición de usuarios con User Timing API

Por ejemplo si deseas medir cuanto tiempo pasa un usuario en una página de tu sitio web, supongamos en la página de inicio de tu sitio web, antes que el usuario haga clic en un determinado botón para llamar a una determinada acción, el usuario marca un tiempo de inicio en un controlador de eventos asociado a un evento de carga de página mediante DOMContendLoaded por ejemplo:


document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

document.addEventListener('DOMContentLoaded', () => {

window.performance.mark('start');

});

Después procedemos a marcar el tiempo final y con esto obtendremos el tiempo que tomo el usuario en hacer clic en un botón determinado de tu sitio web


document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

document.querySelector('#CTA').addEventListener('click', () => {

window.performance.mark('end');

window.performance.measure('CTA', 'start', 'end');

});

Puedes extraer las mediciones que realizaste para facilitar el envío a su servicio de análisis para recopilar datos anónimos y demás


const CTA = window.performance.getEntriesByName('CTA')[0].duration;

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

Dev Tools 70 crea automáticamente las mediciones de sincronización de un usuario en la Pestaña Performance luego en la sección User Timing

Depuración más Verídica

La versión 70 de Google Chrome Dev Tools ha corregido otros errores en la Depuración del contenido que causaban que algunos puntos de interrupción desaparecieran o no se activarán. También fueron corregidos errores que se daban en los Source Maps .

También habían problemas con la ejecución que se daba a veces muy lenta en el Panel Orígenes, algunos de estos problemas también fueron corregidos y continúan trabajando en solucionar los que faltan o se presenten.

Conclusión

Para los desarrolladores exigentes estas actualizaciones pueden copar sus expectativas o quizás no, lo que si te podemos asegurar es que los ingenieros que dan soporte a las Chrome Dev Tools, están trabajando constantemente en mejorar sus herramientas para desarrolladores.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.