Novedades de Herramientas para desarrolladores (Chrome 77)

Kayce Basques

Cómo copiar los estilos de un elemento

Haz clic con el botón derecho en un nodo del árbol del DOM para copiar el CSS de ese nodo del DOM en el portapapeles.

Figura 1: Copiar los estilos de los elementos

Gracias Adam Argyle y VisBug por la inspiración.

Visualiza los cambios de diseño

Supongamos que estás leyendo un artículo de noticias en tu sitio web favorito. Mientras lees la página, pierdes la ubicación porque el contenido salta. Este problema se denomina cambio de diseño. Por lo general, esto sucede cuando terminan de cargarse las imágenes y los anuncios. La página no reservó ningún espacio para las imágenes y los anuncios, por lo que el navegador debe desplazar todo el resto del contenido hacia abajo para hacerles lugar. La solución es usar marcadores de posición.

Ahora, Herramientas para desarrolladores puede ayudarte a detectar cambios de diseño:

1. Abre el menú de comandos.
2. Comienza a escribir Rendering.
3. Ejecuta el comando Show Rendering.
4. Habilita la casilla de verificación Regiones de cambio de diseño. A medida que interactúas con una página, los cambios de diseño se destacan en azul.

Figura 2: Un cambio de diseño.

Error de Chromium #961846

Lighthouse 5.1 en el panel de Auditorías

El panel Audits ahora ejecuta Lighthouse 5.1. Las nuevas auditorías incluyen lo siguiente:

• Proporciona un apple-touch-icon válido. Verifica que se pueda agregar una AWP a la pantalla principal de iOS.
• Mantén bajos los recuentos de solicitudes y los tamaños de archivo. Informa la cantidad total de solicitudes de red y los tamaños de archivo para varias categorías, como documentos, secuencias de comandos, hojas de estilo, imágenes, etcétera.
• Máximo retraso de primera entrada potencial. Mide el tiempo potencial máximo entre la primera interacción de un usuario con la página y la respuesta del navegador a esa interacción. Ten en cuenta que esta métrica reemplaza a la métrica de latencia de entrada estimada. El Máximo retraso de primera entrada potencial no se incluye en la puntuación de la categoría Rendimiento.

Figura 3: La nueva IU del panel Audits

Las versiones de Node y CLI de Lighthouse 5.1 tienen 3 funciones nuevas importantes que vale la pena probar:

• Presupuestos de rendimiento. Para evitar que tu sitio empeore con el tiempo, especifica los recuentos de solicitudes y los tamaños de archivo que no deben superar las páginas.
• Complementos Extiende Lighthouse con tus propias auditorías personalizadas.
• Stack Packs. Se agregaron auditorías adaptadas a pilas de tecnología específicas. El paquete de pila de WordPress se envió primero. Los paquetes de React y AMP están en desarrollo.

Sincronización del tema del SO

Si usas el tema oscuro de tu SO, DevTools ahora cambia automáticamente a su propio tema oscuro.

Combinación de teclas para abrir el editor de puntos de interrupción

Presiona Control + Alt + B o Comando + Opción + B (Mac) cuando el enfoque esté en el editor del panel Sources para abrir el Editor de puntos de interrupción. Usa el Editor de puntos de interrupción para crear puntos de registro y puntos de interrupción condicionales.

Figura 4: El Editor de puntos de interrupción

Caché de carga previa en el panel de red

La columna Size del panel Network ahora indica (prefetch cache) cuando se cargó un recurso desde la caché de carga previa. Prefetch es una función relativamente nueva de la plataforma web que permite acelerar las cargas de páginas posteriores. Los informes de Can I use… indican que, en julio de 2019, se admitía en el 83.33% de los navegadores a nivel mundial.

Figura 5: La columna Tamaño muestra que prefetch2.html y prefetch2.css provienen de (prefetch cache).

Consulta la demostración de la recuperación previa para probarla.

Error de Chromium #935267

Propiedades privadas cuando se visualizan objetos

La consola ahora muestra campos de clase privados en sus vistas previas de objetos.

Figura 6: La versión anterior de Chrome, a la izquierda, no muestra el campo #color cuando se inspecciona el objeto, mientras que la versión nueva, a la derecha, sí lo hace.

Notificaciones y mensajes push en el panel de la aplicación

La sección Servicios en segundo plano del panel Aplicación ahora admite mensajes push y notificaciones. Los mensajes push se producen cuando un servidor envía información a un Service Worker. Las notificaciones se producen cuando un service worker o una secuencia de comandos de la página muestran información al usuario.

Al igual que con las funciones Background Fetch y Background Sync de Chrome 76, una vez que comiences a grabar, los mensajes y las notificaciones push de esta página se registrarán durante 3 días, incluso cuando la página esté cerrada y cuando Chrome esté cerrado.

Figura 7: Los nuevos paneles Push Messages y Notifications en el panel Application

Error de Chromium #927726

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