Novedades de Herramientas para desarrolladores (Chrome 102)

Jecelyn Yeen

Función de vista previa: Nuevo panel Estadísticas de rendimiento

Usa el panel de Estadísticas de rendimiento para obtener estadísticas prácticas y basadas en casos de uso sobre el rendimiento de tu sitio web.

Abre el panel y comienza una nueva grabación según tu caso de uso. Por ejemplo, midamos la carga de esta página de demostración.

Una vez que finalice la grabación, obtendrás las estadísticas de rendimiento en el panel Estadísticas. Haz clic en cada elemento de estadísticas (por ejemplo, Solicitud que bloquea la renderización, cambio de diseño) para comprender el problema y las posibles soluciones.

Consulta la documentación del panel Estadísticas de rendimiento para obtener más información con el instructivo paso a paso.

Esta es una función de vista previa que ayuda a los desarrolladores web (en especial, a los que no son expertos en rendimiento) a identificar y corregir posibles problemas de rendimiento. Nuestro equipo está trabajando activamente en esta función y esperamos tus comentarios para realizar más mejoras.

Error de Chromium: 1270700

Nuevos atajos para emular temas claros y oscuros

Ahora puedes emular los temas claro y oscuro más rápido (función de medios de CSS prefers-color-scheme) con los nuevos accesos directos en el panel Estilos.

Anteriormente, se necesitaban más pasos para emular temas en la pestaña Renderización.

Error de Chromium: 1314299

Mejoras en la seguridad de la pestaña Network Preview

Las Herramientas para desarrolladores ahora aplican la Política de Seguridad del Contenido (CSP) en la pestaña Vista previa del panel Red.

Por ejemplo, en la primera captura de pantalla, se muestra una página que contiene contenido mixto. La página se carga a través de una conexión HTTPS segura, pero la hoja de estilo se carga a través de una conexión HTTP no segura.

De forma predeterminada, el navegador bloqueó la solicitud de la hoja de diseño. Sin embargo, cuando abriste la página a través de la pestaña Vista previa en el panel Red, la hoja de diseño no se había bloqueado antes (por lo que el fondo se volvió rojo). Ahora está bloqueado como se esperaba (segunda captura de pantalla).

Error de Chromium: 833147

Se mejoró la recarga en el punto de interrupción

El depurador ahora finaliza la ejecución de la secuencia de comandos cuando se vuelve a cargar en el punto de interrupción.

Por ejemplo, la secuencia de comandos entró en un bucle sin fin anteriormente cuando se estableció y se volvió a cargar en el punto de interrupción ReactDOM en esta demostración de React. El panel Fuentes se interrumpió debido al bucle infinito.

La ejecución continua de JavaScript está causando muchos problemas a los desarrolladores y podría dejar el renderizador en un estado dañado. Este cambio alinea el comportamiento de depuración con otros navegadores, como Firefox.

Problemas de Chromium: 1014415, 1004038, 1112863, 1134899

Actualizaciones de Console

Cómo controlar los errores de ejecución de secuencias de comandos en la consola

Los errores durante la evaluación de la secuencia de comandos en la consola ahora generan eventos de error adecuados que activan el controlador window.onerror y se envían como eventos "error" en el objeto de la ventana.

Problema de Chromium: 1295750

Confirma la expresión en vivo con Intro

Cuando termines de escribir una expresión en vivo, puedes hacer clic en Enter para confirmarla. Anteriormente, presionar Intro agregaba líneas nuevas. Esto no coincide con otras partes de las Herramientas para desarrolladores.

Para agregar una línea nueva en el editor de expresiones en vivo, usa Shift + Enter.

Problema de Chromium: 1260744

Cancela la grabación del flujo de usuarios al inicio

Puedes cancelar la grabación durante el inicio de la grabación del flujo de usuarios. Anteriormente, no había una opción para cancelar la grabación.

Error de Chromium: 1257499

Cómo mostrar los seudoelementos destacados heredados en el panel Styles

Consulta los seudoelementos destacados heredados (p.ej., ::selection, ::spelling-error, ::grammar-error y ::highlight) en el panel Estilos. Anteriormente, estas reglas no se mostraban.

Como se mencionó en la especificación, cuando varios estilos entran en conflicto, la cascada determina el estilo ganador. Esta nueva función te ayuda a comprender la herencia y la prioridad de las reglas.

Error de Chromium: 1024156

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

• El panel Properties ahora muestra las propiedades de acceso con valor predeterminado. Anteriormente, se ocultó por error. (1309087)
• El panel Styles ahora muestra correctamente las reglas @support anuladas como tachadas. Anteriormente, las reglas no estaban tachadas. (1298025)
• Se corrigió la lógica de formato CSS en el panel Fuentes que causaba varias líneas en blanco al editar CSS. (1309588)
• Limita la opción Expandir de forma recursiva de un objeto en la Consola a un máximo de 100 para que no se ejecute de forma indefinida para los objetos circulares. (1272450)

[Experimental] Copiar cambios de CSS

Con este experimento, el panel Styles destaca los cambios de CSS en verde. Puedes colocar el cursor sobre las reglas modificadas y hacer clic en el botón de copiar nuevo que aparece junto a ellas para copiarlas.

Además, puedes copiar todos los cambios de CSS en todas las declaraciones haciendo clic con el botón derecho en cualquier regla y seleccionando Copiar todos los cambios de CSS.

También se agregó un nuevo botón Copiar a la pestaña Cambios para ayudarte a hacer un seguimiento y copiar tus cambios de CSS con facilidad.

Problema de Chromium: 1268754

[Experimental] Selección de color fuera del navegador

Habilita este experimento para elegir un color fuera del navegador con el selector de color. Anteriormente, solo podías elegir un color dentro del navegador.

En el panel Estilos, haz clic en cualquier vista previa de color para abrir el selector de color. Usa el cuentagotas para elegir un color desde cualquier lugar.

Problema de Chromium: 1245191

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