Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Novedades en las Dev Tools 77 de Google Chrome

Cerca a fines de Julio de 2019 Google ha lanzado una nueva versión de su herramienta para Desarrolladores Dev Tools, la versión es la Nro 77, a mi parecer no cuenta con grandes novedades interesantes, pero si útiles a la hora en que se nos presenta un problema ya que estas nuevas características pueden ayudarnos a resolver un problema en su momento, vamos con estas Novedades.

Vamos a colocar la novedad, una descripción y una imagen para describirla.

Copiado de los estilos CSS de un Elemento

En esta versión ahora puedes copiar todos los estilos con las propiedades CSS que han sido aplicados a un elemento HTML, solo debes hacer clic con el botón derecho del mouse y selecciona la opción Copy Styles o Copiar estilos para guardarlo en el portapapeles y posteriormente puedas pegarlo donde desees

Visualizar regiones de cambios de Diseño

En algunas ocasiones mientras estas en un sitio Web puedes perder tu lugar en dicho sitio, por ejemplo si estas leyendo un articulo de tu interés en un sitio Web, puede que no termines de ver cómodamente el texto del artículo, ya que el diseño de las demás regiones alrededor del texto del artículo se pueden mover y dar saltos de un lugar a otro, esto sucede sobre todo cuando el Sitio Web cuenta con anuncios o publicidad de tamaños y lugares aleatorios y como en el Sitio Web no se ha creado una región para estos anuncios aleatorios que pueden ser de tipo imágenes, videos,etc. el navegador empieza a desplazar todo el contenido hacia abajo y no te deja leer el texto del artículo en un lugar fijo.

En esta versión de Dev Tools puedes detectar estos cambios en el diseño, solo abre el menú de comandos con las teclas CTRL + SHIFT + P en Windows y en Mac presiona las teclas COMMAND + SHIFT + P > luego escribe Rendering > ejecuta el comando Show Rendering > Habilita la casilla Layout Shift Regions

Entonces cada vez que interactúes con un sitio Web, las regiones de cambio de Diseño se visualizaran en Azul

Panel de Auditoria se actualizo a la versión de Lighthouse 5.1

Esta actualización ya fue incluida en la versión Dev Tools 76, solo que no se había mencionado, por lo que en esta versión los Desarrolladores de Dev Tools han decidido anunciarla.

Entre las novedades más destacadas del Panel de Auditoria son:

En cuanto a las versiones Node y CLI de esta versión Lighthouse 5.1 cuenta con 3 nuevas características principales que vale la pena revisar:

Sincronización del Tema OS de Dev Tools

En esta versión de Dev Tools, ahora este se adapta al tema oscuro del Sistema Operativo que estés usando ya sea en Windows o Mac, en la siguiente imagen un ejemplo en el sistema operativo Mac

Atajo de Teclado para Abrir el Breakpoint Editor

Ahora puedes presionar las teclas CONTROL + ALT + B en Windows o las teclas COMMAND + OPTION + B en Mac para abrir el Breakpoint Editor o Editor de puntos de interrupción que se encuentra en el panel Sources

Información Cache Prefetch en el Panel Network

En este versión ahora puedes ver información sobre prefetch cache cuando se haya cargado un recurso mediante Cache Prefetch, esta nueva tecnología permite acelerar la carga de páginas subsiguientes, esta tecnología va a ser compatible con la mayoría de navegadores a partir de Julio de 2019

En la imagen anterior, puedes ver que en la columna Size se muestra que los archivos prefetch2.html y prefetch2.css tienen la tecnología prefetch cache 

Propiedades privadas en los Objetos

Ahora la consola (Console) de Dev Tools te muestra los campos de clase privados en las vistas previas de los objetos, en la siguiente imagen tenemos una versión anterior de Dev Tools en donde no se muestra el campo #color  y en el lado derecho tenemos la versiónde  Dev Tools 77 en donde si se muestra el campo #color

Registro de Notificaciones y mensajes Push en el panel Application

En esta versión de Dev Tools ahora se admiten mensajes Push y notificaciones, estos mensajes push se llevan acabo cuando un servidor envía información a un Service Worker. Y las notificaciones se llevan a cabo cuando un Service Worker o una secuencia de comandos de una Sitio muestra información al usuario.

Al igual que con las funciones de Inspección de Eventos de Búsqueda y Sincronización de fondo de Dev Tools 76, una vez que empieza a grabar los mensajes de inserción y las notificaciones en un Sitio, estos se registran durante 3 días, incluso cuando el Sitio este cerrado en incluso cuando el Navegador Google Chrome está cerrado

Notas

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 
Salir de la versión móvil