Novedades de Herramientas para desarrolladores (Chrome 115)

Sofia Emelianova
Sofia Emelianova

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.

Haz clic en la insignia 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. Activa o desactiva una superposición que muestra columnas, filas y sus números sobre el elemento en el viewport.

La insignia de subcuadrícula y la superposición 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 la información sobre herramientas

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

Es un cuadro de información sobre el peso de especificidad de un selector.

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.

Es la información sobre herramientas con un valor de la propiedad de CSS personalizada.

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:

Se mejoró el resaltado de la sintaxis CSS y la compatibilidad con los editores directos en Sources.

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

El número de línea en la columna izquierda y el diálogo de punto de interrupción

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 Menú de tres puntos. > Configuración > Seguridad Privacidad y seguridad > Cookies y otros datos de sitios > Botón de selección marcado. Bloquear cookies de terceros y habilita la opción.
  2. En chrome://flags, establece el experimento Bounce Tracking Mitigations en Enabled With Deletion.
  3. Inspecciona esta página de demostración, abre Aplicación > Servicios en segundo plano > Mitigaciones del seguimiento de rebotes, 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 Ejecutar forzosamente para borrar el estado de inmediato.

En la lista de mitigaciones del seguimiento por rebote, se muestra una eliminación de estado.

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

Problema 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 DevTools. Consulta también la lista completa de cambios.

Es la tabla de fases del LCP.

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.

Ignorar las secuencias de comandos de contenido de forma predeterminada

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

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

Las secuencias de comandos de contenido insertadas por extensiones están habilitadas de forma predeterminada. Para encontrarla, ve a Configuración y, luego, a Lista de ignorados.

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 Red > Respuesta ahora imprime de forma legible los cuerpos de respuesta minimizados de forma predeterminada, de manera similar al panel Fuentes.

Se habilitó la impresión de formato en la ventana Response de la pestaña Network.

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

Resaltado de sintaxis SVG

Problemas de Chromium: 1382752 y 1385374.

Otros aspectos destacados

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

  • Configuració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 Interacciones expandible (1432510).
  • Elementos: Las hojas de estilo que no se cargaron ahora se subrayan con líneas onduladas (1440626).
  • El Debugger 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 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