Novedades de Herramientas para desarrolladores (Chrome 121)

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 settings Configuración > Experimentos > check_box_outline_blank Rediseño de 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

Ahora el panel Elements 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.

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.

Error de Chromium: 1499265.

Compatibilidad mejorada con mapas de origen

El parámetro de configuración settings Settings > Experiments > check_box 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:

• Expresiones en la consola y sugerencias de autocompletar

  

• Expresiones en vivo

  

• Expresiones de inspección

  

• Puntos de interrupción condicionales y puntos de registro

  

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 incluye bigotes que indican los retrasos en la entrada y la presentación en los límites del tiempo de procesamiento.

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 Rendimiento tienen tres botones nuevos para el filtrado avanzado:

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

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.

Error de Chromium: 1479986.

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

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.

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.

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

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

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.

Error de Chromium: 772558.

Accesibilidad

Esta versión incluye las siguientes mejoras de accesibilidad:

• En Network > Payload, ahora puedes enfocar con la tecla Tab los botones view source y view URL-encoded, 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 importantes 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 Filtro (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 upload y de guardar download 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 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