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. Omitir Chrome 69 porque no teníamos suficientes funciones nuevas o cambios en la IU para justificar una publicación.

Entre las nuevas funciones y los cambios importantes que llegarán a Herramientas para desarrolladores en Chrome 70, se incluyen los siguientes:

• Expresiones en vivo en la consola.
• Destaca los nodos del DOM durante la evaluación inmediata.
• Optimizaciones del panel de rendimiento.
• Depuración más confiable.
• Habilita la limitación de la red desde el menú de comandos.
• Autocompleta interrupciones condicionales.
• Interrupción en eventos 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 en vivo en la parte superior de la consola cuando desees supervisar su valor en tiempo real.

1. Haz clic en Create Live Expression. En vivo Se abrirá la IU de expresiones.

   

   Figura 1. IU de expresiones en vivo

2. Escribe la expresión que quieres supervisar.

   

   Figura 2. Escribe Date.now() en la IU de expresiones en vivo

3. Haz clic fuera de la IU de expresiones dinámicas para guardar tu expresión.

   

   Figura 3. Una expresión en vivo guardada

Los valores de Expresiones dinámicas se actualizan cada 250 milisegundos.

Destaca los nodos del DOM durante la evaluación inmediata

Ahora, escribe una expresión que se evalúe como un nodo del DOM en la consola y en Eager Evaluation. destaca ese nodo en el viewport.

Figura 4. Como la expresión actual se evalúa como un nodo, ese nodo se destaca en el vista del puerto

Estas son algunas expresiones que te pueden resultar útiles:

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

Optimizaciones del panel de rendimiento

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

Figura 5. Cómo procesar y cargar datos de rendimiento

Depuración más confiable

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

También corrige errores relacionados con los mapas de origen. Algunos usuarios de TypeScript le indicaban a Herramientas para desarrolladores que ignorara un determinado archivo de TypeScript mientras recorrías el código. En su lugar, las Herramientas para desarrolladores ignoraban la el archivo JavaScript todo el paquete. Estas correcciones también solucionan un problema que causaba que el panel Sources para que funcionen lentamente.

Habilita la limitación de la red desde el menú de comandos

Ahora, puedes establecer la limitación de la 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

Autocompletar puntos de interrupción condicionales

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

Figura 7. IU de Autocomplete

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

Interrupción en eventos de AudioContext

Usa el panel Event Listener Breakpoints para hacer una pausa en la primera línea de una AudioContext. de eventos de ciclo de vida.

AudioContext es 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 mediante Herramientas para desarrolladores, ndb también ofrece lo siguiente:

• Detectar procesos secundarios y adjuntarlos a ellos
• Colocar puntos de interrupción antes de los módulos es obligatorio.
• Edición de archivos en la IU de Herramientas para desarrolladores.
• Ignorar todas las secuencias de comandos que se encuentren fuera del directorio de trabajo actual de forma predeterminada

Figura 9. La IU de ndb

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

Sugerencia adicional: Mide las interacciones reales de los usuarios con la API de User Timing

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

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

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

Luego, marcarías el final del recorrido y calcularías su duración cuando se hace 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 análisis para recopilar datos anónimos agregados:

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

Las Herramientas para desarrolladores marcan automáticamente las mediciones de User Timing en la sección User Timing de tu Grabaciones de presentaciones

Figura 10: Sección User Timing

Esto también es útil cuando se depura o se optimiza el código. Por ejemplo, si quieres optimizar un determinada fase 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 modo de desarrollo.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.