Novedades de Chrome 122

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Veamos las novedades para desarrolladores en Chrome 122.

API de Storage Buckets.

La API de Storage Buckets proporciona un mayor nivel de detalle para administrar mejor el almacenamiento persistente.

Tradicionalmente, cuando el usuario se queda sin espacio de almacenamiento en su dispositivo, los datos almacenados con APIs como IndexedDB o localStorage se pierden sin que el usuario pueda intervenir. Una forma de hacer que el almacenamiento sea persistente es usar el método persist() de la interfaz de StorageManager. Sin embargo, este método para solicitar que el almacenamiento sea persistente es todo o nada.

La idea central de la API de Storage Buckets es otorgar a los sitios la capacidad de crear varios buckets de almacenamiento, en los que el navegador puede elegir borrar cada bucket de forma independiente de los demás. Por lo tanto, puedes especificar la priorización de las expulsiones para asegurarte de que no se borren los datos más valiosos.Cada bucket de almacenamiento puede contener datos asociados con las APIs de almacenamiento establecidas, como IndexedDB y CacheStorage.

Consulta No todo el almacenamiento es igual: Presentamos los buckets de almacenamiento para obtener más detalles y muestras de código a fin de comenzar a usar los buckets de almacenamiento.

Mejoras de Herramientas para desarrolladores en el Panel de rendimiento

En Chrome 122, las Herramientas para desarrolladores incluyen las siguientes mejoras en el panel Rendimiento.

En primer lugar, el Cronograma en la parte superior del panel Rendimiento ahora te permite establecer rutas de navegación y saltar entre ellas. Para establecer una ruta de navegación, selecciona un rango en Rutas, coloca el cursor sobre él y haz clic en el botón N ms zoom_in correspondiente. 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 que se encuentra en la parte superior de Cronograma. Mira el siguiente video para ver las rutas de navegación en acción.

Además, ahora hay iniciadores de eventos en el segmento Main. De forma predeterminada, el segmento Rendimiento > Principal muestra flechas que conectan iniciadores y los siguientes eventos que generaron.

  • Invalidación de estilo o diseño -> Volver a calcular estilos o Diseño
  • Marco de animación de solicitud -> Marco de animación activado
  • Solicitar devolución de llamada inactiva -> Devolución de llamada inactiva de Fire
  • Instalar temporizador -> Se activó el temporizador
  • Crear WebSocket -> Enviar... y Recibir el protocolo de enlace de WebSocket o Destruir WebSocket

Para ver las flechas, busca el evento de este tipo en el seguimiento y haz clic en él.

Flecha de la solicitud y activación de una devolución de llamada inactiva.

Encuentra más actualizaciones de Herramientas para desarrolladores en Novedades de Devtools 122.

Opción unsanitized de la API de Async Clipboard

Cuando copias y pegas contenido con la API de Async Clipboard, la opción unsanitized para el método read() permite que las apps y los sitios web obtengan código HTML no limpio. A menos que los sitios incluyan esta propiedad, se limpiará la lectura de HTML del portapapeles.

De forma predeterminada, cuando se leen tipos de MIME text/html con la API asíncrona, se invoca a la limpieza para quitar el contenido del lenguaje de marcado HTML debido a problemas de seguridad, y los estilos se intercalan en el HTML resultante. Esto genera una gran carga útil de HTML y la pérdida de la fidelidad del contenido HTML cuando lo leen los desarrolladores web o las aplicaciones para dispositivos móviles.

Puedes ver la diferencia en el resultado en el siguiente ejemplo.

Entrada:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Desinfectado (predeterminado):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

Con la opción unsanitized:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Visita Cómo desbloquear el acceso al portapapeles para conocer los conceptos básicos de la API de Portapapeles.

Y mucho más.

Por supuesto que hay mucho más.

  • En CSS, las consultas de contenedores con funciones no compatibles nunca coinciden. Por ejemplo, la siguiente consulta nunca coincidirá debido a la función desconocida:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() no afecta a los objetos File, solo borra los objetos de tipo de texto.

  • Con drawingBufferStorage de WebGL, puedes evitar una copia adicional cuando conviertes la renderización al formato de píxeles del búfer de dibujo predeterminado y dibujas contenido con más de 8 bits de precisión.

Lecturas adicionales

Esto abarca solo algunos aspectos destacados. Consulta los siguientes vínculos para ver cambios adicionales en Chrome 122.

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Hola, soy Adriana Jara. En cuanto se lance Chrome 123, estaré aquí para contarte las novedades de Chrome.