Novedades de Herramientas para desarrolladores (Chrome 70)

Kayce Basques
Kayce Basques

¡Les damos la bienvenida nuevamente! Pasaron aproximadamente 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 nuevas funciones y los principales cambios que se implementarán en Herramientas para desarrolladores en Chrome 70, se incluyen los siguientes:

Continúa leyendo o mira la versión en video de este documento:

Expresiones en vivo en Console

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

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

    IU de Live Expression

    Figura 1: IU de Live Expression

  2. Escribe la expresión que quieres supervisar.

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

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

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

    Una expresión en vivo guardada

    Figura 3. Una expresión en vivo guardada

Los valores de expresiones en vivo se actualizan cada 250 milisegundos.

Destacar los nodos del DOM durante una evaluación pasiva

Escribe una expresión que se evalúe como un nodo del DOM en Console y Eager Evaluation 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. Dado que la expresión actual se evalúa como un nodo, ese nodo se destaca en el viewport.

Estas son algunas expresiones que podrían resultarte útiles:

  • document.activeElement para destacar el nodo que está enfocado actualmente
  • document.querySelector(s) para destacar un nodo arbitrario, en el que s es un selector de 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 elemento superior del nodo seleccionado actualmente

Optimizaciones del panel de rendimiento

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

Procesando y cargando datos de rendimiento

Figura 5. Procesa y carga datos de rendimiento

Depuración más confiable

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

También corrige errores relacionados con los mapas de fuentes. Algunos usuarios de TypeScript indicarían a Herramientas de desarrolladores que ignoren un archivo de TypeScript determinado mientras recorren el código. En cambio, las Herramientas para desarrolladores ignoran todo el archivo JavaScript empaquetado. Estas correcciones también solucionan un problema que provocaba que el panel Sources se ejecutara lentamente.

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

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

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

Figura 6. Comandos de limitación de 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.

La IU de Autocomplete

Figura 7: La IU de Autocomplete

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

Interrupción de los eventos de AudioContext

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

AudioContext es parte de la API de audio web que puedes usar para procesar y sintetizar audio.

Eventos AudioContext en el panel Event Listener Breakpoints.

Figura 8: Eventos AudioContext en el panel Event Listener Breakpoints

Depura apps de Node.js con ndb

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

  • Detección y conexión a procesos secundarios.
  • Colocar puntos de interrupción antes de que los módulos sean obligatorios
  • Edición de archivos dentro de la IU de Herramientas para desarrolladores
  • Se ignoran todas las secuencias de comandos fuera del directorio de trabajo actual de forma predeterminada.

IU de ndb

Figura 9: 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 les lleva a usuarios reales completar recorridos críticos en tus páginas? Considera 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 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');
});

A continuación, 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 estadísticas para recopilar datos agregados y anónimos:

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

Las Herramientas para desarrolladores marcan automáticamente las mediciones de Tiempos de usuario en la sección Sincronización del usuario de tus registros de rendimiento.

La sección User Timing.

Figura 10: La sección User Timing

Esto también es útil a la hora de optimizar o depurar código. Por ejemplo, si deseas optimizar una determinada fase del ciclo de vida, llama a window.performance.mark() al principio y al final de la función del ciclo de vida. React lo hace en el modo de desarrollo.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59