Novedades de Herramientas para desarrolladores (Chrome 70)

Kayce Basques
Kayce Basques
X GitHub Error

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

Entre las funciones nuevas y los cambios importantes que se agregarán a DevTools en Chrome 70, se incluyen los siguientes:

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 Console cuando quieras supervisar su valor en tiempo real.

  1. Haz clic en Crear expresión en vivo Cómo crear una expresión en vivo. Se abre la IU de Live Expression.

    IU de expresión en vivo

    Figura 1. IU de expresión en vivo

  2. Escribe la expresión que deseas supervisar.

    Escribir Date.now() en la IU de la expresión en vivo

    Figura 2. Cómo escribir Date.now() en la IU de la expresión actual

  3. Haz clic fuera de la IU de la expresión activa para guardarla.

    Una expresión en vivo guardada

    Figura 3. Una expresión en vivo guardada

Los valores de la expresión en vivo se actualizan cada 250 milisegundos.

Destaca los nodos DOM durante la evaluación anticipada

Escribe una expresión que se evalúe como un nodo DOM en la consola y la Evaluación anticipada ahora destacará ese nodo en el viewport.

Después de escribir document.activeElement en la consola, se destaca un nodo en el viewport.

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

Estas son algunas expresiones que pueden resultarte ú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. Esto equivale a colocar el cursor sobre un nodo en el árbol de DOM.
  • $0 para destacar cualquier nodo 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 generaba el perfil de una página grande, el panel de rendimiento demoraba decenas de segundos en procesar y visualizar los datos. A veces, hacer clic en un evento para obtener más información al respecto en la pestaña Resumen también demoraba varios segundos en cargarse. El procesamiento y la visualización son más rápidos en Chrome 70.

Procesamiento y carga de datos de rendimiento

Figura 5. Procesa y carga datos de rendimiento

Depuración más confiable

Chrome 70 corrige algunos errores que causaban 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 DevTools que omitiera un archivo TypeScript determinado mientras avanzaban por el código, y en su lugar, DevTools ignoraba todo el archivo JavaScript empaquetado. Estas correcciones también abordan un problema que causaba que el panel de fuentes se ejecutara con lentitud.

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

Ahora puedes configurar la limitación de red en 3G rápido o lento desde el menú de comandos.

Comandos de limitación de red en el menú de comandos

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

Puntos de interrupción condicionales de Autocomplete

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

IU de Autocompletar

Figura 7. IU de Autocompletar

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

Pausa en eventos de AudioContext

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

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

Eventos de AudioContext en el panel de puntos de interrupción del objeto de escucha de eventos.

Figura 8. Eventos de AudioContext en el panel de puntos de interrupción del objeto de escucha de eventos

Cómo depurar 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 DevTools, ndb también ofrece lo siguiente:

  • Detecta y se adjunta a procesos secundarios.
  • Se deben colocar puntos de interrupción antes de los módulos.
  • Editar archivos en la IU de DevTools
  • Ignora todas las secuencias de comandos fuera del directorio de trabajo actual de forma predeterminada.

La IU de ndb.

Figura 9. La IU de ndb

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

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

¿Quieres medir cuánto tiempo tardan los usuarios reales en completar recorridos esenciales en tus páginas? Considera incorporar 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 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 recorrido 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 Tiempo de usuario de tus grabaciones de rendimiento.

La sección User Timing

Figura 10: La sección User Timing

Esto también resulta útil cuando se depura o optimiza el código. Por ejemplo, si deseas optimizar una fase determinada del ciclo de vida, llama a window.performance.mark() al comienzo y al final de la función del 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.