Novedades de Herramientas para desarrolladores (Chrome 70)

Kayce Basques

¡Les damos la bienvenida nuevamente! Pasaron aproximadamente 12 semanas desde nuestra última actualización, que fue para Chrome 68. Nos saltamos Chrome 69 porque no teníamos suficientes funciones nuevas ni cambios en la IU como para justificar una publicación.

Las nuevas funciones y los cambios importantes que se incluirán en las Herramientas para desarrolladores de Chrome 70 son los siguientes:

• Live Expressions in the Console
• Destaca los nodos DOM durante la evaluación detallada.
• Optimizaciones del panel Rendimiento.
• Depuración más confiable.
• Habilita la limitación de la red desde el menú de comandos.
• Autocompletar puntos de interrupción condicionales
• Interrumpir en eventos de AudioContext
• Depura apps de Node.js con ndb.
• Sugerencia adicional: Mide las interacciones reales de los usuarios con la API de User Timing.

Sigue leyendo o mira la versión en video de este documento:

Expresiones en vivo en la consola

Fija una expresión activa en la parte superior de la consola cuando quieras supervisar su valor en tiempo real.

1. Haz clic en Crear expresión en vivo . Se abrirá la IU de Live Expression.

   

   Figura 1. La IU de Live Expression

2. Escribe la expresión que deseas supervisar.

   

   Figura 2. Escribir Date.now() en la IU de Live Expression

3. Haz clic fuera de la IU de Live Expression para guardar la expresión.

   

   Figura 3. Una expresión en vivo guardada

Los valores de Live Expression se actualizan cada 250 milisegundos.

Cómo destacar nodos DOM durante la evaluación detallada

Escribe una expresión que se evalúe como un nodo del DOM en la consola y la Evaluación rápida ahora destacará ese nodo en la ventana gráfica.

Figura 4. Como la expresión actual se evalúa como un nodo, ese nodo se destaca en la ventana gráfica.

Estas son algunas expresiones que te pueden resultar útiles:

• document.activeElement para destacar el nodo que tiene el enfoque actualmente.
• document.querySelector(s) para destacar un nodo arbitrario, donde s es un selector CSS Esto equivale a colocar el cursor sobre un nodo en el árbol del DOM.
• $0 para destacar cualquier nodo que esté seleccionado actualmente en el árbol del DOM
• $0.parentElement para destacar el nodo principal del nodo seleccionado actualmente

Optimizaciones del panel de rendimiento

Cuando se analizaba una página grande, el panel Rendimiento tardaba decenas de segundos en procesar y visualizar los datos. A veces, hacer clic en un evento para obtener más información sobre él en la pestaña Resumen también tardaba varios segundos en cargarse. El procesamiento y la visualización son más rápidos en Chrome 70.

Figura 5. Procesamiento y carga de datos de rendimiento

Depuración más confiable

Chrome 70 corrige algunos errores que hacían que desaparecieran los puntos de interrupción o que no se activaran.

También se corrigieron errores relacionados con los mapas de origen. Algunos usuarios de TypeScript indicaban a Herramientas para desarrolladores que ignorara un determinado archivo de TypeScript mientras ejecutaban el código paso a paso, pero, en cambio, Herramientas para desarrolladores ignoraba todo el archivo JavaScript agrupado. Estas correcciones también abordan un problema que provocaba que el panel Sources se ejecutara con lentitud en general.

Cómo habilitar la limitación de la red desde el menú de comandos

Ahora puedes establecer la limitación de red en 3G rápida o 3G lenta desde el Menú de comandos.

Figura 6. Comandos de limitación de la red en el menú de comandos

Puntos de interrupción condicionales de autocompletado

Usa la IU de Autocomplete para escribir tus expresiones de Punto de interrupción condicional más rápido.

Figura 7. La IU de Autocompletar

¿Sabías que…? La IU de Autocomplete es posible gracias a CodeMirror, que también impulsa la Consola.

Interrumpir en eventos de AudioContext

Usa el panel Event Listener Breakpoints para detenerte en la primera línea de un controlador de eventos de ciclo de vida AudioContext.

AudioContext forma parte de la API de Web Audio, que puedes usar para procesar y sintetizar audio.

Figura 8. Eventos de AudioContext en el panel Event Listener Breakpoints

Depura apps de Node.js con ndb

ndb es un nuevo depurador para aplicaciones de Node.js. Además de las funciones de depuración habituales que obtienes a través de Herramientas para desarrolladores, ndb también ofrece lo siguiente:

• Detectar procesos secundarios y adjuntarlos
• Coloca puntos de interrupción antes de que se requieran los módulos.
• Edición de archivos en la IU de Herramientas para desarrolladores
• De forma predeterminada, se ignoran todos los secuencias de comandos fuera del directorio de trabajo actual.

Figura 9. La IU de ndb

Consulta el README de ndb para obtener más información.

Sugerencia adicional: Mide las interacciones del usuario en el mundo real con la API de User Timing

¿Quieres medir cuánto tiempo tardan los usuarios reales en completar recorridos críticos en tus páginas? Considera incorporar la API de User Timing en tu código.

Por ejemplo, supongamos que deseas medir cuánto tiempo pasa un usuario en tu página principal antes de hacer clic en el botón de llamado a la acción (CTA). Primero, marcarías el comienzo del recorrido en un controlador de eventos asociado a un evento de carga de página, como DOMContentLoaded:

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

Luego, marcarías el final del viaje y calcularías su duración cuando se haga clic en el botón:

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

También puedes extraer tus mediciones, lo que facilita enviarlas a tu servicio de estadísticas para recopilar datos agregados y anónimos:

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

DevTools marca automáticamente tus mediciones de Tiempos de usuario en la sección User Timing de tus grabaciones de rendimiento.

Figura 10: La sección Tiempo de usuario

Esto también es útil cuando se depura o se optimiza el código. Por ejemplo, si deseas optimizar una fase específica de tu ciclo de vida, llama a window.performance.mark() al principio y al final de tu función de ciclo de vida. React hace esto en el modo de desarrollo.

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