Novedades de Herramientas para desarrolladores (Chrome 77)

Kayce Basques
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.

Copiar estilos.

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.

Un cambio de diseño.

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:

La nueva IU del panel Audits.

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.

El editor de puntos de interrupción

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.

La columna Size muestra que los recursos provienen de la caché con carga previa.

Figura 5: En la columna Tamaño (Size), se 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 visualizan objetos

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

Cuando se inspecciona un objeto, la consola ahora muestra campos privados como "#color".

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.

Los nuevos paneles Notificaciones y mensajes push.

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 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   Más > 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.