Novedades de Herramientas para desarrolladores (Chrome 77)

Kayce Basques
Kayce Basques

Copiar estilos del elemento

Haz clic con el botón derecho en un nodo del Árbol del DOM para copiar la 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

Imagina que estás leyendo un artículo de noticias en tu sitio web favorito. Mientras lees la página, sigues perdiendo tu lugar porque el contenido salta de un lugar a otro. Este problema se llama cambio de diseño. Suele ocurrir cuando terminan de cargarse las imágenes y los anuncios. La página no reservó espacio para las imágenes y los anuncios, por lo que el navegador tiene que mover todo el contenido hacia abajo a fin de liberar espacio. La solución es usar placeholders.

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 Regiones de cambio de diseño. Cuando interactúas con una página, los cambios de diseño se destacan en azul.

Un cambio de diseño.

Figura 2: Un cambio de diseño.

Problema #961846 de Chromium

Lighthouse 5.1 en el panel Audits

El panel Audits ahora ejecuta 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 nuevas funciones principales que vale la pena echar un vistazo:

  • Presupuestos de rendimiento. Especifica la cantidad de solicitudes y los tamaños de archivo que las páginas no deberían superar para evitar que tu sitio retroceda con el tiempo.
  • Complementos. Amplía Lighthouse con tus propias auditorías personalizadas.
  • Paquetes de pila. Agrega auditorías adaptadas a componentes tecnológicos específicos. El paquete de pila de WordPress se envió primero. Los paquetes de pila 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 o Comando + Opción + B (Mac) cuando se enfoque en el editor del panel de fuentes para abrir el Editor de puntos de interrupción. Usa el editor de interrupciones para crear puntos de registro y interrupciones condicionales.

El editor de puntos de interrupción

Figura 4: El Editor de puntos de interrupción

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

La columna Size del panel Network ahora indica (prefetch cache) cuando se carga un recurso desde la caché de carga previa. Prefetch es una función novedosa de la plataforma web que permite acelerar las cargas de páginas posteriores. Can I use... informa que es compatible con el 83.33% de los navegadores globales hasta julio de 2019.

La columna Size, en la que se muestra que los recursos provienen de la caché de carga previa.

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

Consulta Demostración de carga previa para probarla.

Problema #935267 de Chromium

Propiedades privadas cuando se ven objetos

Console ahora muestra campos de clase privada en las vistas previas de sus objetos.

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

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

Notificaciones y mensajes push en el panel Aplicación

La sección Servicios en segundo plano del panel Aplicación ahora admite mensajes push y notificaciones. Los mensajes push ocurren 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 una página le muestran información al usuario.

Al igual que con las funciones de recuperación en segundo plano y sincronización en segundo plano de Chrome 76, una vez que comienzas a grabar, los mensajes push y las notificaciones de esta página se graban durante 3 días, incluso cuando la página está cerrada o cuando Chrome está cerrado.

Los nuevos paneles Notificaciones y Mensajes push.

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

Problema #927726 de Chromium

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