Novedades de Herramientas para desarrolladores (Chrome 84)

Kayce Basques
Kayce Basques

Soluciona problemas del sitio con la nueva pestaña Problemas

La nueva pestaña Problemas del panel lateral tiene como objetivo reducir la fatiga por notificaciones y el desorden de la Consola. Actualmente, la consola es el lugar central para que los desarrolladores de sitios web, las bibliotecas, los frameworks y Chrome registren mensajes, advertencias y errores. En la pestaña Issues, se muestran advertencias del navegador de forma estructurada, agregada y práctica, se proporcionan vínculos a los recursos afectados dentro de las Herramientas para desarrolladores y se brinda orientación para solucionar los problemas. Con el tiempo, cada vez más advertencias de Chrome aparecerán en la pestaña Problemas en lugar de en la Consola, lo que debería ayudar a reducir el desorden de la Consola.

Consulta Find And Fix Problems With The Chrome DevTools Issues Tab para comenzar.

La pestaña Problemas

Error de Chromium: #1068116

Cómo ver la información de accesibilidad en la información sobre la herramienta del modo de inspección

La sugerencia del modo de inspección ahora indica si el elemento tiene un nombre y un rol accesibles y si se puede enfocar con el teclado.

La información sobre la herramienta del modo de inspección con información de accesibilidad.

Error de Chromium: #1040025

Actualizaciones del panel de rendimiento

Cómo ver la información del tiempo de bloqueo total (TBT) en el pie de página

Después de registrar el rendimiento de carga, el panel Rendimiento ahora muestra información sobre el Tiempo total de bloqueo (TBT) en el pie de página. El TBT es una métrica de rendimiento de carga que ayuda a cuantificar el tiempo que tarda una página en volverse utilizable. Básicamente, mide cuánto tiempo una página parece ser utilizable (porque su contenido se renderizó en la pantalla), pero en realidad no lo es porque JavaScript bloquea el subproceso principal y, por lo tanto, la página no puede responder a las entradas del usuario. El TBT es la principal métrica de laboratorio para aproximar el retraso de primera entrada, que es una de las nuevas Métricas web esenciales de Google.

Para obtener información sobre el Tiempo de bloqueo total, no uses el flujo de trabajo Volver a cargar la página Volver a cargar la página para registrar el rendimiento de la carga de la página. En su lugar, haz clic en Grabar Grabar, vuelve a cargar la página de forma manual, espera a que se cargue y, luego, detén la grabación. Si ves Total Blocking Time: Unavailable, significa que Herramientas para desarrolladores no obtuvo la información que necesita de los datos internos de generación de perfiles de Chrome.

Información del tiempo de bloqueo total en el pie de página de una grabación del panel Rendimiento

Error de Chromium: #1054381

Eventos de cambio de diseño en la nueva sección Experiencia

La nueva sección Experiencia del panel Rendimiento puede ayudarte a detectar los cambios de diseño. El cambio de diseño acumulado (CLS) es una métrica que puede ayudarte a cuantificar la inestabilidad visual no deseada y es una de las nuevas Métricas web esenciales de Google.

Haz clic en un evento de Cambio de diseño para ver los detalles del cambio de diseño en la pestaña Resumen. Coloca el cursor sobre los campos Se movió de y Se movió a para visualizar dónde ocurrió el cambio de diseño.

Son los detalles de un cambio de diseño.

Terminología de promesas más precisa en la consola

Cuando se registraba un Promise, la consola describía de forma incorrecta el estado del Promise como resolved:

Ejemplo de la consola con la antigua terminología "resuelto".

Ahora, la consola usa el término fulfilled, que se alinea con la especificación de Promise:

Ejemplo de la consola con la nueva terminología "cumplido".

Error de V8: #6751

Actualizaciones del panel de diseño

Compatibilidad con la palabra clave revert

La IU de autocompletado del panel Styles ahora detecta la palabra clave revert de CSS, que revierte el valor en cascada de una propiedad al valor que habría tenido si no se hubieran realizado cambios en el diseño del elemento.

Es el valor de la propiedad que se revertirá.

Error de Chromium: #1075437

Vistas previas de imágenes

Coloca el cursor sobre un valor de background-image en el panel Styles para ver una vista previa de la imagen en una información sobre herramientas.

Se coloca el cursor sobre un valor de background-image.

Error de Chromium: #1040019

El selector de color ahora usa la notación de color funcional separada por espacios

El módulo de color CSS, nivel 4 especifica que las funciones de color, como rgb(), deben admitir argumentos separados por espacios. Por ejemplo, rgb(0, 0, 0) es equivalente a rgb(0 0 0).

Cuando elijas colores con el selector de color o alternes entre representaciones de color en el panel Styles manteniendo presionada la tecla Mayúsculas y, luego, haciendo clic en el valor del color, ahora verás la sintaxis de argumentos separados por espacios.

Usa argumentos separados por espacios en el panel Styles.

También verás la sintaxis en el panel Computed y en la sugerencia del modo de inspección.

Las Herramientas para desarrolladores usan la nueva sintaxis porque las próximas funciones de CSS, como color(), no admiten la sintaxis de argumentos separados por comas obsoleta.

La sintaxis de argumentos separados por espacios se admite en la mayoría de los navegadores desde hace un tiempo. Consulta ¿Puedo usar notaciones de color funcionales separadas por espacios?

Error de Chromium: #1072952

Se dejó de usar el panel Propiedades en el panel Elementos

Se dejó de usar el panel Propiedades en el panel Elementos. Ejecuta console.dir($0) en la consola.

El panel Propiedades obsoleto.

Referencias:

Compatibilidad con accesos directos a aplicaciones en el panel de manifiesto

Los accesos directos de la app ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de una app web. El menú de accesos directos de la app solo se muestra para las apps web progresivas que están instaladas en la computadora o el dispositivo móvil del usuario.

Consulta Cómo completar tareas rápidamente con los accesos directos a aplicaciones para obtener más información.

Combinaciones de teclas de la app en el panel Manifest

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