Novedades de Herramientas para desarrolladores (Chrome 122)

Sofia Emelianova
Sofia Emelianova

Ya está disponible la colección oficial de extensiones de la Grabadora

Ya está disponible la colección oficial de extensiones de Recorder de exportación y reproducción.

Para abrir la colección directamente desde el Grabador, selecciona Exportar > Obtener extensiones… en la barra de acciones que se encuentra en la parte superior del panel del Grabador.

Mejoras en la red

Esta versión incluye varias mejoras en el panel Network.

Motivo del error en la columna Estado

Ahora, la columna Estado siempre muestra un motivo de falla. Anteriormente, debías activar Filas de solicitudes grandes o seleccionar la solicitud en la tabla.

El antes y el después que muestran el motivo del error en la columna Estado.

Error de Chromium: 1506760.

Submenú Copiar mejorado

El submenú Copiar de una solicitud ahora está mejor organizado.

El submenú Copiar antes y después de la mejora.

Además, la opción Copiar como cURL ahora copia el comando correcto en el portapapeles en Windows.

Problemas de Chromium: 1267033, 1276452, 798498.

Mejoras en el rendimiento

Esta versión incluye varias mejoras en el panel Rendimiento.

Rutas de navegación en Rutas

La línea de tiempo en la parte superior del panel Rendimiento ahora te permite establecer marcas de navegación y saltar entre ellas.

Para establecer un segmento, selecciona un intervalo en el Cronograma, coloca el cursor sobre él y haz clic en el botón N ms . Puedes crear varias rutas de navegación anidadas de forma sucesiva. Para cambiar entre los niveles de zoom, haz clic en la ruta de navegación correspondiente en la cadena que se encuentra en la parte superior de la línea de tiempo. Mira el siguiente video para ver las rutas de navegación en acción.

Problemas de Chromium: 1467739.

Iniciadores de eventos en el segmento principal

De forma predeterminada, el segmento Rendimiento > Principal ahora muestra flechas que conectan los iniciadores y los eventos posteriores que causaron.

  • Invalidación de diseño o estilo -> Recalcular estilos o Diseño
  • Marco de la animación de la solicitud -> Se activó un marco de animación
  • Request Idle Callback -> Fire Idle Callback
  • Install Timer -> Timer Fired
  • Create WebSocket -> Send… y Receive WebSocket Handshake o Destroy WebSocket

Para ver las flechas, busca un evento de este tipo en el registro y haz clic en él. Anteriormente, esta función era experimental.

Una flecha desde la solicitud y el activador de una devolución de llamada inactiva.

Problema de Chromium: 1434596.

Menú de selección de instancias de VM de JavaScript para Herramientas para desarrolladores de Node.js

En el panel Rendimiento de las Herramientas para desarrolladores de Node.js, ahora puedes seleccionar una instancia de VM de JavaScript en el menú desplegable correspondiente de la barra de acciones. Una función similar estaba disponible en el JavaScript Profiler, que pronto dejará de estar disponible.

Antes y después de agregar un nuevo menú que te permite seleccionar una instancia de VM de JavaScript.

Problemas de Chromium: 1511813.

Mejoras en los elementos

Esta versión incluye varias mejoras en el panel Elements.

Además de las dos funciones siguientes, el panel Elements ahora recuerda la última pestaña que abriste, por ejemplo, Computed o Properties.

Ahora se puede editar el seudoelemento ::view-transition en Styles.

Ahora puedes editar los pseudoelementos ::view-transition de CSS en Estilos con la hoja de estilo del inspector.

Compatibilidad con la edición antes y después de los seudoelementos de transición de vista.

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

Problemas de Chromium: 1511233.

Compatibilidad de 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. Antes, solo funcionaba con cuadrículas y flex.

El soporte de align-content antes y después en contenedores de bloques.

Problema de Chromium: 1500511.

Nuevo acceso directo y comando en Sources

Ahora puedes presionar Cmd (Mac) o Ctrl (Win) + Mayúsculas + clic en un número de línea en Fuentes para crear un punto de registro. Este acceso directo se suma a la combinación Cmd (Mac) o Ctrl (Win) + clic ya existente para los puntos de interrupción condicionales.

El Menú de comandos obtiene el nuevo comando Mostrar el archivo activo en la barra lateral del navegador que hace lo mismo que la opción correspondiente en el menú desplegable del Editor.

Es el nuevo comando para mostrar el archivo activo en la barra lateral del navegador.

Problemas de Chromium: 1486933, 1467464.

Compatibilidad con la postura para dispositivos plegables emulados

El modo de dispositivo ahora te permite establecer la postura de un dispositivo plegable emulado: Continuo o Plegado. La postura continua se refiere a una posición "plana", y la plegada forma un ángulo entre las secciones de la pantalla.

Un menú desplegable con opciones de postura.

Además, la lista Devices incluye un nuevo dispositivo plegable emulado: Asus Zenbook Fold.

Error de Chromium: 1066842.

Creación de temas dinámicos

Las Herramientas para desarrolladores ahora coinciden automáticamente con el tema de color de Chrome. Para establecer un tema, haz lo siguiente:

  1. Abre una nueva pestaña y haz clic en Personalizar Chrome en la esquina inferior derecha.
  2. En Apariencia, elige un tema en Cambiar temas o selecciona una paleta de colores.

Las Herramientas para desarrolladores coinciden con el tema de color seleccionado en Apariencia.

Error de Chromium: 1483276.

Advertencias sobre la eliminación gradual de las cookies de terceros en los paneles Network y Application

Los paneles Red y Aplicación ahora destacan y muestran advertencias junto a las cookies afectadas por las restricciones de terceros de la Protección contra seguimiento.

En Red, busca una solicitud con un ícono de advertencia , haz clic en ella y abre la pestaña Cookies.

Las cookies de terceros antes y después de capturarse en el panel Network.

En Application, navega a Storage > Cookies y haz clic en un dominio. Las cookies destacadas en amarillo no se almacenan en el navegador.

El antes y el después de destacar las cookies de terceros en el panel Application.

Coloca el cursor sobre el ícono de advertencia para ver una descripción de los problemas y haz clic en el ícono para abrir la pestaña Problemas con más información.

Además, ahora las cookies de la tabla se ordenan por nombre de forma predeterminada.

Problemas de Chromium: 1506225 y 1503961.

Lighthouse 11.4.0

El panel Lighthouse ahora ejecuta Lighthouse 11.4.0. Consulta la lista completa de cambios. Entre los cambios notables, se encuentra la nueva auditoría que te permite detectar si tu sitio web aún usa cookies de terceros.

Auditoría que detecta cookies de terceros.

Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.

Problema de Chromium: 772558.

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

  • Cuando abres Configuración > Experimentos, el cuadro de búsqueda ahora se enfoca automáticamente.
  • Ahora se puede enfocar el botón Borrar entrada en Red > Filtro.
  • El árbol de archivos en Fuentes > Página ahora se muestra correctamente en el modo de contraste alto.
  • Ahora, los lectores de pantalla anuncian correctamente lo siguiente:
    • El estado de las casillas de verificación en Fuentes > Puntos de interrupción.
    • Es la información de posición y de índice para una lista de sugerencias.
    • Es el resultado de la acción cuando se agrega o borra una ubicación en Configuración > Ubicaciones.
    • Grupos de reglas de exclusión (generales o personalizadas) en Configuración > Lista de ignorados

Problemas de Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Otros aspectos destacados

Estas son algunas de las correcciones y mejoras más destacadas de esta versión:

  • Animaciones:
    • Se corrigió el error por el que la ventana emergente de captura de pantalla se renderizaba fuera de los límites (1506991).
    • Se corrigió el error por el que los nodos de animación quitados no se marcaban como quitados (1506561).
  • Red:
    • Invalidaciones de encabezado: Se corrigió un error con un ícono de punto morado falso en la pestaña Encabezados (1507856).
    • Vista previa: Se corrigió un error relacionado con una decodificación doble innecesaria (1509336).
    • Se corrigió un error por el que no aparecían las solicitudes de Shorts (1509862).
  • Aplicación > IndexedDB: Se reorganizaron los botones de la barra de acciones para que sean coherentes con otros paneles (1393800).
  • Sensores: Se corrigió un error con la devolución de llamada correcta incorrecta de ubicación no disponible (1486859).
  • Rendimiento:
    • El botón Collect garbage ahora tiene un ícono adecuado, "trapeador" en lugar de "papelera" (1507530).
    • El registro de rendimiento ahora conserva los datos cuando se navega a about:blank (1509947).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores