Novedades de Herramientas para desarrolladores (Chrome 102)

Función de vista previa: Panel nuevo de estadísticas de rendimiento

Utiliza el panel 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 la página de esta página de demostración.

Una vez que se complete la grabación, verás las estadísticas de rendimiento en el panel Insights. Haz clic en cada elemento de las estadísticas (por ejemplo, solicitud de bloqueo de renderización, cambio de diseño) para comprender el problema y las posibles soluciones.

Ve a 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 versión preliminar para ayudar a los desarrolladores web (especialmente a los expertos en no rendimiento) a identificar y solucionar posibles problemas de rendimiento. Nuestro equipo está trabajando activamente en esta función y esperamos tus comentarios para seguir mejorando.

Problema de Chromium: 1270700

Nuevas combinaciones de teclas para emular temas claros y oscuros

Ahora puedes emular los temas claro y oscuro más rápido (función multimedia de CSS prefers-color-scheme) con las nuevas combinaciones de teclas del panel Estilos.

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

Problema de Chromium: 1314299

Seguridad mejorada en la pestaña Vista previa de red

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, la primera captura de pantalla muestra una página que incluye contenido mixto. La página se carga con una conexión HTTPS segura, pero la hoja de estilo se carga con una conexión HTTP no segura.

El navegador bloqueó la solicitud de hoja de estilo de forma predeterminada. Sin embargo, cuando abriste la página a través de la pestaña Preview en el panel Network, la hoja de estilo no se había bloqueado anteriormente (por lo tanto, el fondo se volvía rojo). Se bloqueó como esperabas (segunda captura de pantalla).

Problema de Chromium: 833147

Recarga mejorada 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, antes, la secuencia de comandos estaba en un bucle infinito cuando se configuraba y se volvía a cargar en el punto de interrupción ReactDOM en esta demostración de React. El panel Sources se rompió debido al bucle infinito.

Continuar ejecutando JavaScript genera muchos problemas para los desarrolladores y podría dejar al renderizador en mal estado. Este cambio alinea el comportamiento de depuración con otros navegadores como Firefox.

Problemas de Chromium: 1014415, 1004038, 1112863, 1134899

Actualizaciones de Console

Maneja errores de ejecución de secuencias de comandos en Console

Los errores durante la evaluación de secuencias 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 window.

Problema de Chromium: 1295750

Confirmar la expresión en vivo con Intro

Cuando termines de escribir una expresión activa, puedes hacer clic en Enter para confirmarla. Antes, cuando se presionaba Intro, se agregaban líneas nuevas. Esto es inconsistente con otras partes de las Herramientas para desarrolladores.

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

Problema de Chromium: 1260744

Cancelar el registro del flujo de usuarios al comienzo

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

Problema de Chromium: 1257499

Cómo mostrar seudoelementos destacados heredados en el panel Estilos

Consulta los seudoelementos de resaltado 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.

Problema de Chromium: 1024156

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

• En el panel Properties, ahora se muestran las propiedades del descriptor de acceso con valor predeterminado. Se ocultó anteriormente por error. (1309087).
• El panel Styles ahora muestra correctamente las reglas @support anuladas como tachadas. Antes, las reglas no estaban tachadas. (1298025).
• Se corrigió la lógica de formato de CSS en el panel Sources que generaba varias líneas en blanco al editar CSS. (1309588).
• Limita la opción Expandir de manera recurrente de un objeto en Console a un máximo de 100 para que no se aplique de manera permanente a los objetos circulares. (1272450).

[Experimental] Copiar cambios de CSS

Con este experimento, el panel Estilos destaca en verde tus cambios de CSS. Puedes colocar el cursor sobre las reglas modificadas y hacer clic en el botón de nueva copia junto a ellas para copiarlas.

Además, puedes copiar todos los cambios de CSS en las declaraciones. Para ello, haz clic con el botón derecho en cualquier regla y selecciona 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 de los cambios de CSS y copiarlos 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. Anteriormente, solo se podía elegir un color dentro del navegador.

En el panel Estilos, haz clic en la vista previa de cualquier color para abrir el selector. 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 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.