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

Novedades en las Dev Tools 122 de Google Chrome

Novedades en las Dev Tools 122 de Google Chrome

Novedades en las Dev Tools 122 de Google Chrome

Si es la primera vez que lees este tipo de artículos, déjame contarte que todos los meses escribimos un artículo sobre las nuevas funciones en las Chrome DevTools.

Puedes ingresar a la categoría Chrome Dev Tools y ver todas las nuevas características que están siendo lanzadas.

En este artículo te compartiré las Novedades en las Dev Tools 122 de Google Chrome, vamos con ello.

Puedes personalizar las Chrome DevTools para obtener un mejor rendimiento

Al igual que en Posts anteriores, para dar una mejor descripción de las Características nuevas, colocaré el título de la nueva característica, descripción y una o varias imágenes de dicha característica.

Ya Está Disponible La Colección de Extensiones de La Grabadora

Esta extensiones de Grabadora permiten exportar y volver a reproducir grabaciones.

Para abrir la colección directamente desde la Recorder, selecciona Export > Get extensions… en la barra de acciones que se encuentra en la parte superior del panel de la Recorder:

Mejoras en el Panel Network

En este panel se agregaron las siguientes mejoras:

Motivo del error en la columna Estado

La columna Status ahora siempre muestra el motivo del error.

Antes había que activar la opción Big request rows o seleccionar la solicitud en la tabla.

El panel Network analiza el comportamiento de las peticiones a un servidor

Submenú Copiar mejorado

El submenú Copy de una solicitud ahora está mejor organizado:

El menú Copy tiene varias opciones que facilitan el copiado de solicitudes

Además, la opción Copy asd cURL ahora copia el comando correcto al portapapeles en Windows.

Mejoras en el Panel Performance

Se han agregado la siguientes mejoras en este panel:

Migas de pan en la línea de tiempo

La línea de tiempo en la parte superior del panel Performance ahora te permite configurar rutas de navegación y saltar entre ellas.

Para establecer una ruta de navegación, seleccione un rango en la Timeline, coloca el cursor sobre ella y haz clic en el botón N ms.

Puedes crear varias rutas de navegación anidadas en sucesión. Para saltar entre niveles de zoom, haz clic en la ruta de navegación correspondiente en la cadena situada en la parte superior de la línea de tiempo.

Mira el siguiente vídeo para ver las rutas de navegación en acción:

Iniciadores de eventos en la pista principal

La pista Performance > Main de forma predeterminada ahora muestra flechas que conectan a los iniciadores y los siguientes eventos que causaron.

Para ver las flechas, busca dicho evento en el seguimiento y haz clic en él. Anteriormente, esta característica era un experimento.

La línea de tiempo te permite analizar los eventos que suceden durante la carga de una web

Menú selector de instancias de VM JavaScript para Node.js DevTools

En el panel Performance de Node.js, ahora puedes seleccionar una instancia de VM JavaScript en el menú desplegable correspondiente en la barra de acciones.

Una característica similar estaba disponible en JavaScript Profiler, que pronto quedará obsoleto.

VM son las iniciales de Virtual Machine que traducido al español significa Máquina Virtual

Mejoras en el Panel Elements

Se han agregando las siguientes mejoras en este panel:

El pseudoelemento ::view-transition ahora es editable en Styles

Ahora puedes editar los pseudoelementos CSS ::view-transition en Styles usando la hoja de estilos del inspector:

La pseudoclase ::view-transition de CSS representa la raíz de la superposición de transiciones de vista, que contiene todas las transiciones de vista

Para obtener más información, consulta Transiciones fluidas y sencillas con la API View Transitions.

Soporte para la propiedad align-content para contenedores de bloques

La propiedad align-content ahora funciona con cualquier contenedor de bloques , incluidos table-caption y table-cell.

Anteriormente, funcionaba sólo con grid y flex.

La propiedad align-content de CSS establece la distribución del espacio entre y alrededor de los elementos de contenido a lo largo del eje transversal de un flexbox

Nuevo Atajo y Comando en el Panel Sources

Ahora puedes presionar las teclas Cmd(Mac) / Ctrl(Win) + Shift + clic en un número de línea en Sources para crear un punto de registro.

Este atajo es una adición al ya existente Cmd(Mac) / Ctrl(Win) + clic para puntos de interrupción condicionales:

El menú Command obtiene el nuevo comando Revelar archivo activo en la barra lateral del navegador que hace lo mismo que la opción correspondiente en el menú desplegable del Editor:

El menú Command te permite el acceso rápido a determinadas tareas

Soporte de Postura Para Dispositivos Plegables Emulados

El modo dispositivo ahora te permite configurar la postura de un dispositivo plegable emulado: Continuo o Plegado.

La postura continua se refiere a una posición “plana” y plegada que forma un ángulo entre las secciones de la pantalla.

La laptop Asus Zendbook Fold extiende su pantalla principal en otra mas en la parte inferior

Además, la lista de dispositivos obtiene un nuevo dispositivo plegable emulado: Asus Zenbook Fold.

Tematización Dinámica

DevTools ahora coincide automáticamente con el tema de color de Chrome.

Para establecer un tema sigue los siguientes pasos:

  1. Abre una nueva pestaña y Customize Chrome (Personaliza Chrome) en la esquina inferior derecha.
  2. En Appearance, elige un tema de fondo de pantalla, presiona Change theme o selecciona una paleta de colores.
Puedes obtener una vista previa del nuevo tema de color aplicado

Avisos de Eliminación de Cookies de Terceros en los Paneles Network y Application

Tanto el panel Network como el de Application ahora resaltan y muestran advertencias junto a las cookies afectadas por las restricciones de terceros debido a una Protección de seguimiento.

En Network, busca una solicitud que tenga un icono de advertencia y has clic en él y abre la pestaña Cookies:

Algunos servidores bloquean el acceso a los datos de cookies por seguridad

En Application, navega hasta Storage > Cookies y haz clic en un dominio.

Las cookies resaltadas en amarillo no se almacenan en el navegador:

Algunas cookies son usadas por las empresas para brindar contenido personalizado a los usuarios

Pasa el cursor sobre el ícono de advertencia para ver una información sobre herramientas que describe los problemas y haz clic en el ícono para abrir la pestaña Issues con más información:

Además, las cookies de la tabla ahora están ordenadas por nombre de forma predeterminada.

Lighthouse 11.4.0

El panel Lighthouse ahora ejecuta Lighthouse 11.4.0.

Mira la lista completa de cambios en este enlace.

Entre los cambios destacables está la nueva auditoría que permite detectar si tu sitio web todavía utiliza cookies de terceros:

En esta imagen puedes ver que la versión móvil de la web de YouTube usa 2 cookies de terceros

Para conocer los conceptos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: optimizar la velocidad del sitio web.

Accesibilidad

Se agregaron las siguientes mejoras de accesibilidad:

Estas mejoras fueron reportadas en estos issues de Chromiun: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Otros Cambios Destacados

A continuación, algunos cambios y correcciones notables de esta versión:

Nota(s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil