Novedades de Herramientas para desarrolladores (Chrome 122)

Sofia Emelianova
Sofia Emelianova

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

Ya está disponible la colección oficial de extensiones de Grabadora para exportar y volver a reproducir.

Para abrir la colección directamente desde la Grabadora, selecciona Descargar Exportar > Get extensions... en la barra de acciones ubicada en la parte superior del panel Recorder.

Mejoras de red

Esta versión incluye una serie de mejoras en el panel Red.

Motivo de la falla en la columna Estado

Ahora, en la columna Estado siempre se muestra el motivo del error. Anteriormente, tenías que activar la check_box Filas de solicitudes grandes o seleccionar las solicitudes de la tabla.

El antes y el después de mostrar el motivo del error en la columna Estado.

Problemas de Chromium: 1506760.

Submenú mejorado de Copiar

Ahora, el submenú Copiar (Copy) de una solicitud está mejor organizado.

El antes y el 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 una serie de mejoras en el panel Rendimiento.

Rutas de navegación en la línea de tiempo

En Cronograma, en la parte superior del panel Rendimiento, ahora puedes establecer rutas de navegación y pasar de una a otra.

Para establecer una ruta de navegación, selecciona un rango en 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 en sucesión. Para saltar entre niveles de zoom, haz clic en la ruta de navegación correspondiente de la cadena ubicada en la parte superior de Rutas. 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

La métrica Rendimiento > De forma predeterminada, la pista principal ahora muestra flechas que conectan a los iniciadores y los siguientes eventos que provocaron.

  • Invalidación de estilo o diseño -> Volver a calcular estilos o Diseño
  • Marco de animación de solicitud -> Se activó el marco de animación
  • Solicitar devolución de llamada inactiva -> Activar la devolución de llamada inactiva
  • 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 ese evento en el seguimiento y haz clic en él. Anteriormente, esta función era un experimento.

Una flecha desde la solicitud y la activación de una devolución de llamada inactiva

Problemas de Chromium: 1434596.

Menú del selector de instancias de VM de JavaScript para las Herramientas para desarrolladores de Node.js

En el panel Performance 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 Generador de perfiles de JavaScript, que pronto dejará de estar disponible,.

El antes y el después y un nuevo menú que te permite seleccionar una instancia de VM de JavaScript.

Problemas de Chromium: 1511813.

Mejoras en los elementos

Esta versión ofrece una serie de mejoras en el panel Elements.

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

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

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

Compatibilidad con la edición de antes y después de los pseudoelementos de transición de vistas.

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

Problemas de Chromium: 1511233

La propiedad align-content es compatible con contenedores de bloques.

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

Compatibilidad con el antes y el después de alinear contenido en contenedores de bloques

Problemas de Chromium: 1500511.

Nuevo acceso directo y comando en Fuentes

Ahora puedes usar Cmd (Mac) o Ctrl (Windows) + 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 agrega a Cmd (Mac) o Ctrl (Windows) y clic ya existentes para los puntos de interrupción condicionales.

En el menú de comandos, se obtiene el nuevo comando Reveal active file in navigator atajo, que hace lo mismo que la opción correspondiente del menú desplegable del Editor.

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

Device Mode 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 el pliegue crean un ángulo entre las distintas secciones de la pantalla.

Un menú desplegable con opciones de postura.

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

Problema 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 nueva pestaña y haz clic en Editar Personalizar Chrome en la esquina inferior derecha.
  2. En Apariencia, elige un tema en el fondo de pantalla Cambiar temas o selecciona una paleta de colores.

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

Problemas de Chromium: 1483276.

Advertencias de eliminación gradual de 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 seguimiento.

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

El antes y el después de la captura de cookies de terceros en el panel Red.

En Aplicación, navega a Almacenamiento > 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 cookies de terceros en el panel Application.

Coloca el cursor sobre el ícono de advertencia para ver información sobre la herramienta que describe los problemas y haz clic en él 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. Consulte la lista completa de cambios. Entre los cambios más importantes, se encuentra la nueva auditoría que te permite detectar si tu sitio web aún utiliza cookies de terceros.

Auditoría que detecta cookies de terceros.

Para aprender los conceptos básicos del uso del panel Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema 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.
  • El botón Cancelar Borrar entrada en Red > Filtrar ahora es enfocable.
  • El árbol de archivos en Fuentes > La Página 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 Fuentes > Puntos de interrupción.
    • Información de índice y posición para obtener una lista de sugerencias.
    • Resultado de la acción al agregar o borrar 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 elementos ignorados.

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

Otros aspectos destacados

Estas son algunas correcciones y mejoras notables en esta versión:

  • Animaciones:
    • Se corrigió el error relacionado con la renderización de las ventanas emergentes de captura de pantalla fuera de los límites (1506991).
    • Se corrigió el error con nodos de animación quitados que no se marcaban como quitados (1506561).
  • Red:
    • HeaderOverrides: Se corrigió un error con un ícono de punto púrpura falso en la pestaña Headers (1507856).
    • Vista previa: Se corrigió un error con una decodificación doble innecesaria (1509336).
    • Se corrigió un error por el que no aparecían solicitudes cortas (1509862).
  • Aplicación > IndexedDB: Botones cambiados de la barra de acciones para mantener la coherencia con otros paneles (1393800).
  • Sensores: Se corrigió un error con una devolución de llamada correcta incorrecta a una ubicación no disponible (1486859).
  • Rendimiento:
    • El botón Recoger elementos no utilizados ahora tiene un ícono adecuado: "Trapeador". en lugar de un “cesto” (1507530).
    • El seguimiento 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 navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Para enviarnos sugerencias o comentarios, accede a crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Twittea a @ChromeDevTools.
  • Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.