Novedades de Herramientas para desarrolladores (Chrome 122)

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 Descargar 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 check_box Filas de solicitudes grandes o seleccionar la solicitud en la tabla.

Error de Chromium: 1506760.

Submenú Copiar mejorado

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

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 zoom_in. 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.

Problema 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 siguientes eventos 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.

Problema de Chromium: 1434596.

Menú de selección de instancias de VM de JavaScript para las 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.

Error 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.

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

Problema 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.

Error 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.

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 hace referencia a una posición "plana", y la plegada forma un ángulo entre las secciones de la pantalla.

Además, la lista de Dispositivos 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 Editar Personalizar Chrome en la esquina inferior derecha.
2. En Diseño, elige un tema en Fondo de pantalla Cambiar temas o selecciona una paleta de colores.

Problema 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 warning, haz clic en ella y abre la pestaña Cookies.

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

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.

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

Error de Chromium: 772558.

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

• Cuando abres Configuración Configuración > Experimentos, el cuadro de búsqueda ahora se enfoca automáticamente.
• Ahora se puede enfocar el botón cancelar 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 Configuración > Ubicaciones.
  • Grupos de reglas de exclusión (generales o personalizadas) en configuración 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 importantes 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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools