Novedades de Herramientas para desarrolladores (Chrome 123)

Busca el huevo de Pascua

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

Para encontrarlo, busca un emoji 💫 colorido.

Actualizaciones del panel de elementos

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

Emular una página enfocada en Elementos > Estilos

La opción Elementos > La pestaña Estilos ahora tiene la opción check_box Emular una página enfocada en el botón Activar o desactivar el estado de los elementos (: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 superposición se ocultan automáticamente si se activan por el foco. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción Emular una página enfocada te permite depurar un elemento de este tipo como si estuviera enfocado.

Problema de Chromium: 1468393.

Selector de color, reloj angular y editor de aceleración en resguardos de var()

Para simplificar la edición de CSS, la opción Elementos > La pestaña Estilos ahora te permite usar el Selector de color, Reloj angular y Editor de aceleración en resguardos 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 indican que esta herramienta ralentiza el flujo de trabajo y no agrega mucho valor.

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

Para volver a activar la herramienta de longitud, borra la configuración Configuración > Experimentos > check_box Dar de baja CSS <length> de creación en la pestaña Estilos.

Si todavía quieres usar esta herramienta, el equipo de Herramientas para desarrolladores quiere escuchar tu opinión y saber cómo la herramienta de longitud te ayuda en tu flujo de trabajo. Puedes dejar tus comentarios en crbug/1522657.

Ventana emergente para el resultado de la búsqueda seleccionado en la pestaña Rendimiento > Pista principal

Para facilitar la búsqueda, el gráfico tipo llama en Rendimiento > La pista principal ahora te muestra una ventana emergente sobre el evento correspondiente cuando te desplazas por los resultados de la búsqueda.

Problema de Chromium: 1523279.

Actualizaciones del panel de red

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

Borrar el botón y el filtro de búsqueda en la Red > Pestaña EventStream

Haz clic en Red > La pestaña EventStream obtiene lo siguiente:

• Un botón para bloquear el control Borrar que borra los eventos capturados de la tabla.
• Un filtro de búsqueda que comprende expresiones regulares

El equipo de Herramientas para desarrolladores quiere agradecer a Charles Vazac por proporcionar 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ébala en esta página de demostración.

Problema de Chromium: 1488863, 40659493.

Cuadros de información con motivos de exención para las cookies de terceros en Red > Galletas

Haz clic en Red > La pestaña Cookies ahora muestra información sobre la herramienta con motivos de exención junto a las cookies que, de lo contrario, deberían haber sido bloqueadas por la eliminación gradual de las cookies de terceros.

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

• Política de Chrome Enterprise
• API de Storage Access o API de Storage Access de nivel superior
• Prueba de baja de la eliminación gradual de cookies de terceros o su período de gracia
• Heurística de eliminación gradual de las cookies de terceros
• Preferencia del usuario

Problema de Chromium: 41491846.

Cómo habilitar o inhabilitar todos los puntos de interrupción en Fuentes

La opción Fuentes > La sección Breakpoints vuelve a mostrar las opciones Habilitar e Inhabilitar todos los puntos de interrupción en su menú desplegable. Anteriormente, estas opciones se dejaban fuera por 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 uno en Fuentes > Breakpoints y selecciona la opción correspondiente.

Problema de Chromium: 1522037.

Visualiza secuencias de comandos cargadas en Herramientas para desarrolladores para Node.js

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

Problema de Chromium: 1518364.

Lighthouse 11.5.0

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

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

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.

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 Grabadora
  • Cuando ningún experimento coincide con el filtro de configuración Configuración > Experimentos.
  • La confirmación de la acción cuando quitas, confirmas o restableces un acceso directo en Configuración Configuración > Combinaciones de teclas.
• La tabla en Configuración Configuración > Ahora, Locations se renderiza correctamente como una tabla para las herramientas de accesibilidad.

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

Otros aspectos destacados

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

• Se actualizaron las fuentes en Herramientas para desarrolladores para que coincidan con Chrome (1523538).
• Rendimiento: Se corrigió la visualización de la captura de pantalla cuando se coloca el cursor sobre el cronograma (1519469).
• Sources: Se aumentó la altura de la línea del 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 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   > 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.