Novedades de Herramientas para desarrolladores (Chrome 77)

Kayce Basques

Copiar los estilos del elemento

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

Figura 1: Copiar diseños de elementos

Agradecemos a Adam Argyle y VisBug por su inspiración.

Cómo visualizar los cambios de diseño

Supongamos que estás leyendo un artículo de noticias en tu sitio web favorito. Al leer la página, sigue perdiendo tu lugar porque el contenido está saltando de un lado a otro. Este problema se llama diseño cambiante. Suele ocurrir cuando las imágenes y los anuncios terminan de cargarse. La página no reservó ningún espacio para las imágenes y los anuncios, así que el navegador tiene que mover todo el resto del contenido hacia abajo para hacer lugar de ellos. La solución es usar marcadores de posición.

Las Herramientas para desarrolladores ahora pueden 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 Layout Shift Regions. Cuando interactúas con una página, los cambios de diseño se se destaca en azul.

Figura 2: Un cambio de diseño.

Problema de Chromium #961846

Lighthouse 5.1 en el panel Audits

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

• Proporciona un objeto apple-touch-icon válido. Comprueba que se pueda agregar una AWP a la pantalla principal de iOS.
• Mantén bajos los recuentos de solicitudes y los tamaños de archivos. Informa la cantidad total de solicitudes de red y tamaños de archivo para diversas categorías, como documentos, guiones, hojas de estilo, imágenes, etc.
• Máximo Retraso de Primera Entrada Potencial. Mide el tiempo máximo potencial que transcurre entre el de la primera página y la respuesta del navegador a esa interacción. Ten en cuenta que esta métrica reemplaza la métrica Latencia de entrada estimada. El máximo retraso de primera entrada potencial no se tiene en cuenta 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 principales nuevas que vale la pena revisar:

• Presupuestos de rendimiento. Especifica una solicitud para evitar que tu sitio se regrese con el tiempo recuentos y tamaños de archivo que las páginas no deben exceder.
• Plugins. Extiende Lighthouse con tus propias auditorías personalizadas.
• Paquetes de pila. Agrega auditorías adaptadas a componentes tecnológicos específicos. El paquete de pilas de WordPress se envía primero. Los paquetes de pilas de AMP y React están en desarrollo.

Sincronización de temas del SO

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

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

Presiona Control + Alt + B. Command + Option + B (Mac) cuando se enfoca en el editor del panel de fuentes para abrir el Editor de puntos de interrupción. Usar 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.

Recuperación previa de la caché en el panel de red

La columna Tamaño del panel Red ahora indica (prefetch cache) cuando se carga un recurso desde la caché con carga previa. Prefetch es una nueva función de plataforma web que acelera la carga de las páginas subsiguientes. . Can I use... informa que, hasta julio de 2019, es compatible con el 83.33% de los navegadores globales.

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

Consulta la demostración de carga previa para probarla.

Problema de Chromium #935267

Propiedades privadas cuando se ven objetos

La consola ahora muestra campos de clase privada 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 la mientras que la versión nueva de la derecha sí.

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

La sección Servicios en segundo plano del panel Application 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 Recuperación en segundo plano y Sincronización en segundo plano de Chrome 76, una vez que comienzas por 3 días, incluso si la página contiene esté cerrado, e incluso cuando Chrome esté cerrado.

Figura 7: Los nuevos paneles de mensajes push y notificaciones del panel Application.

Problema de Chromium #927726

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 plataforma 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.