Novedades de Herramientas para desarrolladores (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Mejoras en los elementos

Nueva insignia de subcuadrícula CSS

El panel Elements obtiene una nueva insignia de subgrid para subgrid. Actualmente, esta función se encuentra en fase experimental en Chrome Canary.

Para inspeccionar y depurar una cuadrícula anidada que es una subcuadrícula y, por lo tanto, heredar el número y el tamaño de los recorridos de su 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.

La insignia de la subcuadrícula y la superposición en el viewport.

Para ver la lista de todas las insignias del panel Elementos, consulta la Referencia de insignias.

Problema de Chromium: 1442536.

Especificidad del selector en la información sobre la herramienta

En Elementos > Estilos, coloca el cursor sobre el nombre de un selector para ver su peso de especificidad en la información sobre la herramienta.

Información sobre la herramienta con el peso de especificidad de un selector.

Problema de Chromium: 1204932.

Valores de las propiedades de CSS personalizadas en el cuadro de información

En Elementos > Estilos, coloca el cursor sobre el nombre de una propiedad de CSS personalizada para ver su valor en la información sobre la herramienta.

Información sobre la herramienta con un valor de la propiedad CSS personalizada.

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

Problema de Chromium: 1380779.

Mejoras en las fuentes

Resaltado de sintaxis CSS

El panel Sources obtiene lo siguiente para los archivos CSS previamente procesados, como SASS, SCSS y LESS:

Se mejoró el resaltado de la sintaxis CSS y la compatibilidad con editores intercalados en las fuentes.

Problemas de Chromium: 1302261, 1392085.

Combinación de teclas para establecer puntos de interrupción condicionales

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

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

Problema de Chromium: 1405767.

Aplicación > Mitigaciones del seguimiento por rebote

El experimento Mitigaciones del seguimiento por rebote 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. Haz clic en Application > El panel Background Services obtiene la nueva pestaña Bounce Tracking Mitigations (Mitigaciones del seguimiento por rebote) que te permite forzar manualmente las mitigaciones del seguimiento y mostrar una lista de los sitios cuyos estados se borraron.

Echa un vistazo a esta función de seguridad:

  1. Bloquear cookies de terceros en Chrome Navega hasta Menú de tres puntos y habilítalo > Configuración > Seguridad Privacidad y seguridad > Cookies y otros datos de sitios > Botón de selección marcado. Bloquear cookies de terceros
  2. En chrome://flags, establece el experimento Bounce Tracking Mitigations (Mitigaciones del seguimiento por rebote) como Enabled With Deletion (Habilitado con eliminación).
  3. Inspecciona esta página de demostración, abre Aplicación > Servicios en segundo plano > Mitigación del seguimiento por rebote, haz clic en un vínculo de rebote en la página, espera (10 segundos) para que Chrome registre el rebote y haz clic en Forzar ejecución para borrar el estado de inmediato.

En las mitigaciones del seguimiento por rebote se muestra la eliminación de estados.

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 de Lighthouse ahora ejecuta Lighthouse 10.2.0. En particular, la verificación de Largest Contentful Paint recibe una tabla con cálculos de fases para la limitación simulada y de Herramientas para desarrolladores. Consulta también la lista completa de cambios.

La tabla de la fase de LCP.

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

Problema de Chromium: 772558.

Ignorar las secuencias de comandos de contenido de forma predeterminada

Configuración. Configuración > Lista de elementos ignorados > Casilla de verificación Las secuencias de comandos de contenido insertadas por extensiones ahora están habilitadas de forma predeterminada.

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

  • El Debugger ignora esas secuencias de comandos y no se detiene en las excepciones que generan.
  • La opción Fuentes > El panel Pila de llamadas omite los fotogramas ignorados. Para desactivar la opción de omitir este paso, marca Casilla de verificación Mostrar fotogramas en la lista de elementos ignorados.
  • La consola contrae los fotogramas ignorados en los seguimientos de pila. Haz clic en Mostrar N marcos más para expandir la pantalla y en Mostrar menos para contraerla de nuevo.

Secuencias de comandos de contenido insertadas por extensiones habilitadas de forma predeterminada. Para encontrarlo, ve a Configuración y, luego, a Lista Ignorar.

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

Problemas de Chromium: 1440958, 1364501.

Red > Impresión con formato estilístico de respuestas de forma predeterminada

Haz clic en Red > El panel Response ahora imprime los cuerpos de respuesta reducidos de forma predeterminada, similar al panel Sources.

Habilitar la impresión con formato estilístico en la ventana de respuesta de la pestaña Red

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

resaltado de sintaxis de SVG.

Problemas de Chromium: 1382752, 1385374.

Otros aspectos destacados

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

  • Configuración. Configuración > Dispositivos: Se agregó Facebook para Android v407 en el Pixel 6 a la lista de cadenas de agente.
  • Red: Se agregó el acceso directo Borrar registro de red (1444991):
    • MacOS: Comando + K
    • Windows/Linux: Control + L
  • Se quitó la Grabadora > Grabación N > Opción desplegable del panel de estadísticas de rendimiento (1414773).
  • Las hojas de estilo que no se pudieron cargar ahora están ocultas del árbol del navegador (1386059).
  • Rendimiento: Se corrigió la visualización incorrecta del segmento expandible Interactions (1432510).
  • Elementos: Las hojas de estilo que no se pudieron cargar ahora muestran un subrayado con líneas onduladas (1440626).
  • Debugger no avanza automáticamente en WebAssembly cuando no hay un complemento para el lenguaje correspondiente (1443342).
  • La combinación de teclas que mueve el cursor una palabra a la vez se restablece 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 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.