Novedades de Herramientas para desarrolladores (Chrome 115)

Mejoras en los elementos

Nueva insignia de subcuadrícula de CSS

El panel Elements recibe una nueva insignia subgrid para subgrid. Actualmente, esta función es experimental en Chrome Canary.

Para inspeccionar y depurar una cuadrícula anidada que es una subcuadrícula y, por lo tanto, hereda la cantidad y el tamaño de las pistas de su elemento superior, haz clic en la insignia. Activa o desactiva una superposición que muestra columnas, filas y sus números sobre el elemento en el viewport.

Para obtener la lista de todas las insignias en el panel Elements, consulta la referencia de insignias.

Error de Chromium: 1442536.

Especificidad del selector en los cuadros de información

En Elements > Styles, coloca el cursor sobre el nombre de un selector para ver su peso de especificidad en una sugerencia.

Error de Chromium: 1204932.

Valores de las propiedades de CSS personalizadas en las sugerencias

En Elements > Styles, coloca el cursor sobre el nombre de una propiedad de CSS personalizada para ver su valor en una sugerencia.

El equipo de Herramientas para desarrolladores desea expresar su gratitud a 一丝 y Suyan por implementar esta mejora.

Problema de Chromium: 1380779.

Mejoras en las fuentes

Resaltado de sintaxis CSS

El panel Fuentes obtiene lo siguiente para los archivos CSS preprocesados, como SASS, SCSS y LESS:

• Resaltado de sintaxis
• Se admite el editor intercalado. Estos editores son similares a los de Elements > Styles, por ejemplo, Selector de color y Editor de aceleración.

Problemas de Chromium: 1302261 y 1392085.

Atajo para establecer puntos de interrupción condicionales

Ahora puedes establecer puntos de interrupción condicionales más rápido con un acceso directo. Para abrir el diálogo de punto de interrupción, mantén presionado Comando (macOS) o Control (Windows / Linux) y haz clic en el número de línea de la columna izquierda de Fuentes > Editor.

Problema de Chromium: 1405767.

Aplicación > Mitigaciones del seguimiento por rebote

El experimento Bounce Tracking Mitigations en Chrome te permite identificar y borrar el estado de los sitios que parecen realizar un seguimiento entre sitios con la técnica de seguimiento por rebote. El panel Aplicación > Servicios en segundo plano tiene una nueva pestaña Mitigaciones del seguimiento de rebote que te permite forzar manualmente las mitigaciones del seguimiento y enumera los sitios cuyos estados se borraron.

Descubre esta función de seguridad:

1. Bloquear cookies de terceros en Chrome Navega a > Configuración > Privacidad y seguridad > Cookies y otros datos de sitios > Bloquear cookies de terceros.
2. En chrome://flags, establece el experimento Bounce Tracking Mitigations en Enabled With Deletion.
3. Inspecciona esta página de demostración, abre Application > Background Services > Bounce Tracking Mitigations, haz clic en un vínculo de rebote en la página, espera (10 segundos) a que Chrome registre el rebote y haz clic en Force run para borrar el estado de inmediato.

Además, la pestaña Problemas te advierte sobre la próxima eliminación del estado.

Error de Chromium: 1432303.

Lighthouse 10.2.0

El panel Lighthouse ahora ejecuta Lighthouse 10.2.0. En particular, la verificación de Largest Contentful Paint obtiene una tabla con cálculos de fases para la simulación y la limitación de Herramientas para desarrolladores. Consulta también la lista completa de cambios.

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.

Ignorar las secuencias de comandos de contenido de forma predeterminada

La opción Configuración > Lista de ignorados > Secuencias de comandos de contenido insertadas por extensiones ahora está habilitada de forma predeterminada.

Con este parámetro de configuración habilitado, sucede lo siguiente:

• El depurador ignora esas secuencias de comandos y no se detiene por las excepciones que tengan.
• El panel Fuentes > Pila de llamadas omite los fotogramas ignorados. Para desactivar el salto aquí, marca Mostrar los marcos que están en la lista de elementos ignorados.
• La consola comprime los marcos ignorados en los seguimientos de pila. Haz clic en Mostrar N fotogramas más para expandir y en Mostrar menos para volver a contraer.

Además, las casillas de verificación de la Lista de ignorados tienen un texto más claro.

Problemas de Chromium: 1440958 y 1364501.

Red > Impresión de respuestas de forma predeterminada

El panel Network > Response ahora imprime de forma legible los cuerpos de respuesta minimizados de forma predeterminada, de manera similar al panel Sources.

Además, los archivos SVG tienen resaltado de sintaxis.

Problemas de Chromium: 1382752 y 1385374.

Otros aspectos destacados

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

• Configuración > Dispositivos: Se agregó Facebook para Android v407 en Pixel 6 a la lista de cadenas de agentes.
• Red: Se agregó el acceso directo Borrar registro de red (1444991):
  • macOS: Comando + K
  • Windows/Linux: Control + L
• Se quitó la opción del menú desplegable Recorder > Recording N > Panel de estadísticas de rendimiento (1414773).
• Las hojas de estilo que no se pudieron cargar ahora están ocultas en el árbol del navegador (1386059).
• Rendimiento: Se corrigió la visualización incorrecta del segmento expandible Interacciones (1432510).
• Elementos: Las hojas de estilo que no se cargaron ahora se subrayan con líneas onduladas (1440626).
• El depurador no se detiene automáticamente en WebAssembly cuando no hay un complemento para el lenguaje respectivo (1443342).
• Se restableció el atajo que mueve el cursor una palabra a la vez para los archivos CSS en Fuentes > Editor (1241848):
  • macOS: Alt + Flecha
  • Windows/Linux: Ctrl + Flecha

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