Novedades de Herramientas para desarrolladores (Chrome 123)

Sofia Emelianova
Sofia Emelianova

Encuentra el huevo de Pascua

Para celebrar el Día de los Inocentes de este año, el equipo de Herramientas para desarrolladores ocultó un huevo de Pascua en algún lugar de las Herramientas para desarrolladores.

Para encontrarla, busca un emoji 💫 colorido.

Actualizaciones del panel de elementos

Esta versión incluye varias actualizaciones en el panel Elements.

Cómo emular una página enfocada en Elements > Styles

La pestaña Elements > Styles ahora tiene la opción Emulate a focused page en el botón Toggle elements state (:hov). Anteriormente, solo podías encontrar esta opción en el panel Renderización.

Si cambias el enfoque de la página a Herramientas para desarrolladores, algunos elementos de la capa superpuesta se ocultan automáticamente si se activan por el enfoque. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción Emulate a focused page te permite depurar un elemento como si estuviera enfocado.

El antes y el después de emular una página enfocada en la pestaña Styles.

Error de Chromium: 1468393.

Selector de color, reloj de ángulo y editor de aceleración en las copias de seguridad de var()

Para simplificar la edición de CSS, la pestaña Elements > Styles ahora te permite usar Selector de color, Reloj de ángulos y Editor de aceleración en las copias de seguridad de var().

Las herramientas Selector de color, Reloj de ángulo y Editor de aceleración antes y después de la renderización en los valores de resguardo de var().

Problema de Chromium: 1520417.

La herramienta de longitud de CSS dejó de estar disponible

La herramienta de creación de longitud de CSS dejó de estar disponible debido a los comentarios que indicaban que ralentizaba el flujo de trabajo y no agregaba mucho valor.

Ya no puedes arrastrar para ajustar el valor ni seleccionar un tipo de unidad en el menú desplegable. En cambio, haz doble clic en el valor y escribe uno nuevo.

Para volver a activar la herramienta de longitud, desmarca Configuración > Experimentos > Deprecate CSS <length> authoring tool in the Styles tab.

Si aún quieres usar esta herramienta, al equipo de Herramientas para desarrolladores le gustaría conocer tu opinión y saber cómo te ayuda la herramienta de longitud en tu flujo de trabajo. No dudes en dejar tus comentarios en crbug/1522657.

El experimento de baja está desactivado.

Elemento emergente para el resultado de la búsqueda seleccionado en Rendimiento > Pista principal

Para facilitar la búsqueda, el gráfico de llamas en el segmento Rendimiento > Principal ahora muestra una ventana emergente sobre el evento correspondiente cuando recorres los resultados de la búsqueda.

El antes y el después que muestran una ventana emergente sobre el resultado de la búsqueda seleccionado.

Error de Chromium: 1523279.

Actualizaciones del panel de red

Esta versión incluye algunas actualizaciones en el panel Network.

Botón Borrar y filtro de búsqueda en la pestaña Red > EventStream

La pestaña Red > EventStream obtiene lo siguiente:

  • Un botón Borrar que borra los eventos capturados en la tabla
  • Es un filtro de búsqueda que comprende expresiones regulares.

El antes y el después de agregar un botón Borrar y un filtro de búsqueda.

El equipo de Herramientas para desarrolladores desea agradecer a Charles Vazac por implementar esta función.

Además, la pestaña EventStream ahora también captura los eventos que los servidores envían a través de fetch/XHR, no solo la API de EventSource. Pruébalo en esta página de demostración.

Problema de Chromium: 1488863, 40659493.

Sugerencias sobre los motivos de exención de las cookies de terceros en Red > Cookies

La pestaña Red > Cookies ahora muestra información sobre herramientas con los motivos de exención junto a las cookies que, de otro modo, se habrían bloqueado por la eliminación gradual de las cookies de terceros.

El antes y el después muestran una sugerencia con un motivo de exención para una cookie de terceros.

Las cookies de terceros se pueden permitir por los siguientes motivos:

Problema de Chromium: 41491846.

Habilita e inhabilita todos los puntos de interrupción en Sources

En la sección Fuentes > Puntos de interrupción, se vuelven a incluir las opciones Habilitar y Inhabilitar todos los puntos de interrupción en el menú desplegable. Anteriormente, estas opciones se omitieron en el rediseño de los puntos de interrupción.

Para habilitar o inhabilitar todos los puntos de interrupción, haz clic con el botón derecho en un punto de interrupción en Fuentes > Puntos de interrupción y selecciona la opción correspondiente.

Antes y después de volver a agregar las opciones para habilitar y para inhabilitar.

Error de Chromium: 1522037.

Cómo ver los secuencias de comandos cargados en DevTools para Node.js

Las Herramientas para desarrolladores de Node.js ahora muestran las secuencias de comandos cargadas en el árbol de navegación en Fuentes > Secuencias de comandos.

El antes y el después de agregar la pestaña Scripts con un árbol de secuencias de comandos cargadas.

Error de Chromium: 1518364.

Lighthouse 11.5.0

El panel Lighthouse ahora ejecuta Lighthouse 11.5.0. Consulta la lista completa de cambios.

Entre los cambios notables, se incluye una nueva auditoría que estima las causas raíz de los cambios de diseño. Esta auditoría reemplaza a la auditoría layout-shift-elements, que solo enumeraba los elementos afectados por los cambios de diseño.

Una nueva auditoría que estima las causas raíz de los cambios de diseño.

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:

  • Los lectores de pantalla ahora anuncian lo siguiente:
    • El texto del vínculo Más información junto a los tipos de selectores en el panel Grabador
    • Cuando ningún experimento coincide con el filtro en Configuración > Experimentos.
    • La confirmación de la acción cuando se quita, confirma o restablece un acceso directo en Configuración > Accesos directos
  • La tabla en Configuración > Ubicaciones ahora se renderiza correctamente como una tabla para las herramientas de accesibilidad.

Problemas de Chromium: 1516957, 324282443, 324467508, 324930007.

Otros aspectos destacados

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

  • Se actualizaron las fuentes en Herramientas para desarrolladores para que coincidan con las de Chrome (1523538).
  • Rendimiento: Se corrigió la visualización de capturas de pantalla cuando se coloca el cursor sobre la línea de tiempo (1519469).
  • Fuentes: Se aumentó la altura de la línea en el Editor para mejorar la legibilidad del código (1523640).
  • Red > Respuestas: Se corrigieron varios problemas de visualización con diferentes formatos y codificaciones (1523128, 1509336, 1523128, 41481944, 1509336).

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