Novedades de Herramientas para desarrolladores (Chrome 121)

Sofia Emelianova
Sofia Emelianova

Barra de filtros optimizada en el panel de red

Se rediseñó la barra de filtros para que puedas filtrar solicitudes con mayor facilidad y ordenar el panel Network.

El experimento correspondiente se activó de forma predeterminada en esta versión, pero se revertirá. Puedes realizar un seguimiento del progreso en crbug.com/1523150.

La nueva barra de filtros tiene dos menús desplegables: uno para elegir tipos de solicitudes y otro para ocultar URLs de datos y extensiones, o bien mostrar solo las cookies y las solicitudes bloqueadas, y las solicitudes de terceros. Ambos menús admiten la selección múltiple.

Para volver a la barra de filtros anterior de inmediato, desactiva Configuración > Experimentos > Rediseño de la barra de filtros en el panel de red.

Antes y después de optimizar la barra de filtros en el panel de red

No dudes en dejar tus comentarios sobre la función en crbug.com/1500573.

Error de Chromium: 1486431.

Mejoras en los elementos

Compatibilidad con @font-palette-values

El panel Elements ahora admite la regla@font-palette-values de CSS. Te permite personalizar los valores predeterminados de la propiedad font-palette.

En Estilos, haz clic en el valor de la propiedad font-palette y DevTools te llevará a la sección dedicada @font-palette-values, en la que podrás editar tus valores personalizados.

La sección @font-palette-values en Styles

Error de Chromium: 1501781.

Caso admitido: Propiedad personalizada como alternativa de otra propiedad personalizada

Elements > Styles ahora resuelve una propiedad personalizada que es un resguardo de otra propiedad personalizada.

El antes y el después de resolver una propiedad personalizada como alternativa de otra personalizada.

Problema de Chromium: 1499265.

Compatibilidad mejorada con mapas de origen

El parámetro de configuración Settings > Experiments > Resolve variable names in expressions using source maps se activó de forma predeterminada.

Las Herramientas para desarrolladores usan mapas de origen para permitirte depurar tu código original en Fuentes y Alcance incluso después de que lo hayas combinado, reducido o compilado. Este experimento te permite evaluar los nombres de tus variables originales de manera coherente en Herramientas para desarrolladores, incluidos los siguientes:

Para obtener más detalles, consulta el RFC correspondiente.

Error de Chromium: 1444349.

Mejoras en el panel de rendimiento

Pista de interacciones mejoradas

El segmento Rendimiento > Interacciones obtiene bigotes que indican los retrasos en la entrada y la presentación en los límites del tiempo de procesamiento.

El antes y el después de agregar bigotes al segmento Interacciones.

Además, cuando colocas el cursor sobre una interacción, puedes ver un cuadro de información útil con detalles sobre los tiempos.

Error de Chromium: 1495751.

Filtrado avanzado en las pestañas Bottom-Up, Call Tree y Event Log

Las pestañas Bottom-Up, Call Tree y Event Log del panel Performance tienen tres botones nuevos para el filtrado avanzado:

  • Coincidir mayúsculas y minúsculas.
  • Expresión regular.
  • Coincidir palabra completa.

Los tres botones nuevos para el filtrado avanzado.

Además, para ayudarte a conservar el contexto, ahora solo los elementos de nivel superior coinciden con el filtro en la pestaña De abajo hacia arriba. Anteriormente, el filtro coincidía con todos los nodos.

Error de Chromium: 1496355.

Marcadores de sangría en el panel de Sources

El Editor del panel Fuentes ahora marca los bloques de código con sangría con líneas verticales para tu comodidad.

Las marcas de antes y después de los bloques de código con sangría con líneas verticales.

Error de Chromium: 1479986.

Sugerencias útiles para los encabezados y el contenido anulados en el panel Network

El panel Network ahora muestra Tooltips cuando colocas el cursor sobre el ícono de punto morado junto a las pestañas Headers y Response de una solicitud. La información sobre herramientas te indica qué anuló Herramientas para desarrolladores.

Las nuevas sugerencias junto al ícono de punto morado en las pestañas Encabezados y Respuesta

Error de Chromium: 1469776.

Nuevas opciones del menú de comandos para agregar y quitar patrones de bloqueo de solicitudes

Ahora puedes escribir comandos para agregar o quitar patrones de bloqueo de solicitudes de red en el menú de comandos.

Antes y después de agregar comandos nuevos para agregar o quitar patrones de bloqueo de red.

El comando Agregar te lleva al diálogo para especificar el patrón, y el comando Quitar quita todos los patrones sin abrir el panel Bloqueo de solicitudes de red.

Se quitó el experimento de incumplimientos de CSP

Se quitó la pestaña experimental Incumplimientos de la CSP que se introdujo en la versión 89 porque era redundante.

Para ver los detalles de la CSP de un vistazo, navega a Aplicación > Marcos > Política de seguridad del contenido (CSP).

La Política de Seguridad del Contenido en el panel Aplicación

Además, el panel Issues informa los incumplimientos de la CSP.

La Política de Seguridad del Contenido en el panel Aplicación

Lighthouse 11.3.0

El panel Lighthouse ahora ejecuta Lighthouse 11.3.0. Consulta la lista completa de cambios. Entre los cambios notables, se incluye la capacidad de generar informes sobre las páginas de error 404.

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:

  • En Red > Carga útil, ahora puedes enfocar con la tecla Tab los botones Ver fuente y Ver codificado como URL, y presionar Intro o Espacio para activar la acción correspondiente.
  • En Console, para reducir la confusión, los vínculos que dirigen a secuencias de comandos que ya no están disponibles para el Debugger ahora aparecen en gris y no se pueden hacer clic.
  • En los árboles de navegación, como el árbol en Fuentes > Página, la tecla Intro ahora expande y contrae los nodos con elementos secundarios.

Problemas de Chromium: 1338391, 1500662, 1420362.

Otros aspectos destacados

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

  • Rendimiento. Si falla una grabación, ahora tienes la opción de descargar los eventos de registro sin procesar y tratar de averiguar qué salió mal (confirmar).
  • La combinación de teclas Mostrar consola (Ctrl + ` para Mac, Ctrl + + para Windows y Linux) ahora no solo abre la Consola, sino que también se cierra cuando se presiona por segunda vez.
  • Recursos para desarrolladores Se corrigió un error que impedía informar los recursos de CSS y sus problemas (1420362).
  • Elementos:
    • Se corrigió un error relacionado con la inspección de elementos en elementos iframe (1453375).
    • Calculado. Se corrigió un error que impedía que se renderizaran los valores predeterminados (1499882).
    • Search. Se corrigió un error que impedía calcular la cantidad de coincidencias para búsquedas cortas de uno o dos caracteres (1416457).
  • Consola Ahora se analizan correctamente las expresiones regulares que terminan con un carácter de escape en el cuadro Filter (1346936).
  • Configuración > Workspace Se corrigió un error que impedía agregar una carpeta excluida (1503580).
  • Red > Vista previa. Ahora renderiza imágenes con URIs data: (1381791).
  • Memoria Se agregaron los botones de carga y de guardar adecuados a la barra de acciones (1275407).

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