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

Novedades de Herramientas para desarrolladores (Chrome 84)

Kayce Basques

Cómo solucionar problemas del sitio con la nueva pestaña Problemas

La nueva pestaña Problemas en el panel lateral tiene como objetivo ayudar a reducir la fatiga que generan las notificaciones y el desorden de la consola. Actualmente, Console es el lugar central donde los desarrolladores de sitios web, las bibliotecas, los frameworks y Chrome pueden registrar mensajes, advertencias y errores. En la pestaña Problemas, se presentan advertencias del navegador de forma estructurada, agregada y práctica, vínculos a los recursos afectados en Herramientas para desarrolladores y se proporciona orientación para solucionar los problemas. Con el tiempo, se mostrarán más advertencias de Chrome en la pestaña Problemas en lugar de en Console, lo que debería ayudar a reducir la sobrecarga de la consola.

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

La pestaña 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 enfocar con el teclado.

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

Error de Chromium: #1040025

Actualizaciones del panel Rendimiento

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 la información del Tiempo de bloqueo total (TBT) en el pie de página. TBT es una métrica de rendimiento de carga que ayuda a cuantificar cuánto tiempo tarda una página en ser utilizable. Básicamente, mide cuánto tiempo parece usar una página (porque su contenido se renderizó en la pantalla), pero realmente no se puede porque JavaScript bloquea el subproceso principal y, por lo tanto, la página no puede responder a la entrada del usuario. TBT es la métrica de lab principal para aproximar el retraso de primera entrada, que es una de las nuevas Métricas web esenciales de Google.

Si quieres 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 de forma manual, espera a que se cargue y, luego, detén la grabación. Si ves Total Blocking Time: Unavailable, significa que las Herramientas para desarrolladores no obtuvieron la información que necesitaba de los datos de generación de perfiles internos de Chrome.

Información sobre el tiempo de bloqueo total en el pie de página de la grabación del panel de rendimiento.

Error de Chromium: #1054381

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

La nueva sección Experiencia del panel Rendimiento puede ayudarte a detectar 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 de este cambio en la pestaña Resumen. Coloca el cursor sobre los campos Se movió desde y Se movió a para visualizar dónde ocurrió el cambio de diseño.

Los detalles de un cambio de diseño.

Terminología de promesa más precisa en Console

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

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

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

Ejemplo de la consola que usa la nueva terminología “completada”.

Error V8: #6751

Actualizaciones del panel de estilos

Compatibilidad con la palabra clave `revert`

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

Es la configuración del valor de una 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 Estilos para obtener una vista previa de la imagen en un cuadro de información.

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 del 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 alternes entre representaciones de colores en el panel Estilos, mantén presionada la tecla Mayúsculas y, luego, haz clic en el valor del color, verás la sintaxis de argumento separado por espacios.

Cómo usar argumentos separados por espacios en el panel Estilos

También verás la sintaxis en el panel Computed y la información sobre la herramienta Inspect Mode.

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

Desde hace tiempo, la mayoría de los navegadores admiten la sintaxis de argumentos separados por espacios. Consulta ¿Puedo usar notaciones de colores funcionales separadas por espacios?

Error de Chromium: #1072952

Baja del panel Properties del panel Elements

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

El panel Properties obsoleto.

Referencias:

Compatibilidad con combinaciones de teclas de apps en el panel del manifiesto

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

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

Accesos directos a apps en el panel del manifiesto

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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.