Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 84)

Kayce Basques

Soluciona problemas del sitio con la nueva pestaña Problemas

El objetivo de la nueva pestaña Issues en el panel lateral es reducir la fatiga de notificaciones y el desorden de Console. Actualmente, Console es el lugar central en que los desarrolladores de sitios web, las bibliotecas, los frameworks y Chrome pueden registrar mensajes, advertencias y errores. La pestaña Problemas presenta advertencias del navegador de manera estructurada, agregada y procesable, vínculos a recursos afectados dentro de Herramientas para desarrolladores y proporciona orientación sobre cómo solucionar los problemas. Con el tiempo, cada vez más advertencias de Chrome aparecerán en la pestaña Problemas en lugar de en Console, lo que debería ayudar a reducir el desorden en la consola.

Para comenzar, consulta Cómo encontrar y solucionar problemas relacionados con la pestaña Problemas con las Herramientas para desarrolladores de Chrome.

La pestaña de problemas

Error de Chromium: #1068116

La información sobre la herramienta del modo de inspección ahora indica si el elemento tiene un nombre y una función accesibles y si se puede centrar en el teclado.

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

Error de Chromium: #1040025

Actualizaciones del panel de rendimiento

Consulta la información sobre el tiempo de bloqueo total (TBT) en el pie de página

Después de registrar el rendimiento de carga, el panel Rendimiento ahora muestra la información del Tiempo de bloqueo total (TBT) en el pie de página. La TBT es una métrica del rendimiento de la carga que ayuda a cuantificar cuánto tiempo tarda una página en usarse. Básicamente, mide cuánto tiempo parece que se puede usar una página (porque su contenido se renderizó en la pantalla), pero en realidad no se puede usar, porque JavaScript bloquea el subproceso principal y, por lo tanto, la página no puede responder a las entradas del usuario. TBT es la métrica del lab principal para calcular 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 para registrar el rendimiento de carga de la página. En su lugar, haz clic en Record Registro , vuelve a cargar la página manualmente, espera a que se cargue y, luego, deja de grabar. Si ves Total Blocking Time: Unavailable, significa que Herramientas para desarrolladores no obtuvo la información que necesitaba de los datos internos de generación de perfiles de Chrome.

Información sobre el tiempo de bloqueo total, al pie de una grabación del panel de 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 cambios en el 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ó desde y Se movió a para ver dónde se produjo el cambio de diseño.

Los detalles de un cambio de diseño.

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

Cuando se registraba un Promise, la consola usaba para describir de forma incorrecta el estado del Promise como resolved:

Ejemplo de la consola que usa la antigua terminología “resuelta”.

Console ahora usa el término fulfilled, que se alinea con la especificación Promise:

Ejemplo de la consola que usa la nueva terminología "entregada"

Error V8: #6751

Actualizaciones del panel de diseños

Compatibilidad con la palabra clave `revert`

La IU de autocompletado del panel Estilos ahora detecta la palabra clave de CSS revert, que revierte el valor en cascada de una propiedad a lo que hubiera sido si no se hubieran realizado cambios en el estilo del elemento.

Es la configuración del valor que se revertirá de una propiedad.

Error de Chromium: #1075437

Vistas previas de las imágenes

Coloca el cursor sobre un valor background-image en el panel Estilos para obtener una vista previa de la imagen en la información sobre la herramienta.

Coloca el cursor sobre un valor de imagen de fondo.

Error de Chromium: #1040019

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

El nivel 4 de módulo de color de CSS 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 alternas entre representaciones de color en el panel Estilos manteniendo presionada la tecla Mayúsculas y haciendo clic en el valor de color, verás la sintaxis del argumento separado por espacios.

Uso de argumentos separados por espacios en el panel Estilos.

También verás la sintaxis en el panel Calculado y la información sobre la herramienta Modo de inspección.

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

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 colores funcionales separadas por espacios?

Error de Chromium: #1072952

Baja del panel Properties en el panel Elements

El panel Properties del panel Elements dejó de estar disponible. En su lugar, ejecuta console.dir($0) en la consola.

El panel Propiedades (Properties) está obsoleto.

Referencias:

Compatibilidad con combinaciones de teclas a aplicaciones en el panel Manifest

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

Para obtener más información, consulta Completa tareas rápidamente con accesos directos a aplicaciones.

Accesos directos a aplicaciones en el panel Manifiesto

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).