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 Grabadora para exportar y reproducir.

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

Mejoras de red

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

Motivo de la falla en la columna Estado

La columna Estado ahora siempre muestra un motivo de falla. Anteriormente, debías activar Big request rows o seleccionar la solicitud en la tabla.

El estado anterior y el posterior a la visualización del motivo de la falla en la columna Estado

Problemas de Chromium: 1506760.

Se mejoró el submenú Copiar

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

Antes y después de mejorar el submenú Copiar.

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 la línea de tiempo

La línea de tiempo que se encuentra en la parte superior del panel Rendimiento ahora te permite establecer migas de pan y saltar entre ellas.

Para establecer un pan de migas, selecciona un rango en el Cronograma, coloca el cursor sobre él y haz clic en el botón N ms. Puedes crear varios panes de opciones de navegación anidados en sucesión. Para saltar entre los niveles de zoom, haz clic en el elemento de ruta de acceso correspondiente en la cadena que se encuentra en la parte superior del Cronograma. Mira el siguiente video para ver el seguimiento de migas de pan en acción.

Problemas de Chromium: 1467739.

Iniciadores de eventos en la pista principal

De forma predeterminada, la pista Rendimiento > Principal ahora muestra flechas que conectan los activadores y los siguientes eventos que causaron.

  • Invalidación del diseño o el estilo: Recalcular estilos o Diseño
  • Request Animation Frame -> Animation Frame Fired
  • Solicitar devolución de llamada inactiva -> Activar la devolución de llamada inactiva
  • Install Timer -> Timer Fired
  • Crear WebSocket -> Enviar… y Recibir el protocolo de enlace de WebSocket o Destruir WebSocket

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

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

Problemas de Chromium: 1434596.

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

En el panel Rendimiento de DevTools 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 Generador de perfiles de JavaScript, 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 Elementos.

Además de las siguientes dos funciones, el panel Elementos ahora recuerda la última pestaña que abriste, por ejemplo, Cálculos o Propiedades.

El pseudoelemento ::view-transition ahora se puede editar en Estilos

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

La compatibilidad de edición anterior y posterior de los pseudoelementos de transición de vista

Para obtener más información, consulta Cómo crear transiciones simples y fluidas con la API de View Transitions.

Problemas de Chromium: 1511233.

Compatibilidad de la propiedad align-content con contenedores de bloques

La propiedad align-content ahora funciona con cualquier contenedor de bloques, incluidos table-caption y table-cell. Anteriormente, solo funcionaba con cuadrícula y flex.

Compatibilidad con align-content antes y después en contenedores de bloques.

Problemas de Chromium: 1500511.

Nuevo acceso directo y comando en Fuentes

Ahora puedes presionar Cmd (Mac) / Ctrl (Win) + Mayúsculas + hacer clic en un número de línea en Fuentes para crear un punto de registro. Esta combinación de teclas se suma a la combinación Cmd (Mac) / Ctrl (Win) + clic para puntos de interrupción condicionales.

El menú de comandos obtiene el nuevo comando Reveal active file in navigator sidebar 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 posiciones 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, cuando está plegada, forma un ángulo entre las secciones de la pantalla.

Un menú desplegable con opciones de postura.

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

Error de Chromium: 1066842.

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 pestaña nueva y haz clic en Personalizar Chrome en la esquina inferior derecha.
  2. En Diseño, elige un tema a través del Cambiar temas o selecciona una paleta de colores.

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

Problemas de Chromium: 1483276.

Advertencias sobre la baja gradual de las cookies de terceros en los paneles Red y Aplicación

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 el seguimiento.

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

El antes y el después de capturar cookies de terceros en el panel de red

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

Antes y después de destacar las cookies de terceros en el panel de la aplicación

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

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

Problemas de Chromium: 1506225, 1503961.

Lighthouse 11.4.0

El panel de Lighthouse ahora ejecuta Lighthouse 11.4.0. Consulta la lista completa de cambios. Entre los cambios más 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 aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Accesibilidad

Esta versión tiene las siguientes mejoras de accesibilidad:

  • Cuando abres Configuración > Experimentos, el cuadro Buscar ahora se enfoca automáticamente.
  • Ahora se puede enfocar el botón Clear input en Network > Filter.
  • El árbol de archivos en Sources > Page ahora se muestra correctamente en el modo de contraste alto.
  • Los lectores de pantalla ahora anuncian correctamente lo siguiente:
    • El estado de las casillas de verificación en Sources > Breakpoints.
    • Información de posición y de índice para una lista de sugerencias.
    • 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 elementos ignorados.

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

Otros aspectos destacados

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

  • Animaciones:
    • Se corrigió el error con el popover de captura de pantalla que se renderizaba fuera de los límites (1506991).
    • Se corrigió el error por el que los nodos de animación eliminados no se marcaban como eliminados (1506561).
  • Red:
    • Anulaciones de encabezados: Se corrigió un error con un ícono de punto púrpura falso en la pestaña Encabezados (1507856).
    • Versión preliminar: Se corrigió un error con una decodificación doble innecesaria (1509336).
    • Se corrigió un error por el que no aparecían las solicitudes cortas (1509862).
  • Application > IndexedDB: Se reordenaron los botones de la barra de acción para que sean coherentes con otros paneles (1393800).
  • Sensores: Se corrigió un error con la devolución de llamada correcta incorrecta de la ubicación no disponible (1486859).
  • Rendimiento:
    • El botón Recoger basura ahora tiene un ícono adecuado, "trapeador" en lugar de "basurero" (1507530).
    • El registro de rendimiento ahora retiene 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

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