Novedades de Herramientas para desarrolladores (Chrome 84)

Kayce Basques
Kayce Basques

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

La nueva pestaña Problemas del panel lateral tiene como objetivo ayudar a reducir la fatiga que generan las notificaciones y el desorden de la Consola. Actualmente, la consola es el lugar central para los desarrolladores de sitios web, las bibliotecas marcos de trabajo y el mismo Chrome para registrar mensajes, advertencias y errores. En la pestaña Problemas, se presenta advertencias del navegador de forma estructurada, agregada y procesable, vínculos a los en Herramientas para desarrolladores y proporciona orientación sobre cómo solucionar los problemas. Con el tiempo, cada vez más de las advertencias de Chrome se mostrarán en la pestaña Problemas y no en la consola, lo que debería ayudar y reducir el desorden en 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

Ver la información de accesibilidad en la información sobre la herramienta del modo de inspección

La información sobre la herramienta del modo de inspección ahora indica si el elemento tiene un nombre y rol accesibles. y se enfoca 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 Tiempo de bloqueo total (TBT) en el pie de página. TBT es una métrica de rendimiento de carga que ayuda a cuantificar necesita una página para ser utilizable. Básicamente, mide cuánto tiempo parece poder usar una página (porque su contenido se renderizó en la pantalla), pero realmente 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 el lab principal 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 la página Volver a cargar. Volver a cargar la página para registrar el rendimiento de carga de la página. En su lugar, haz clic en Grabar. Grabar, vuelve a cargar la página manualmente, 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 necesitaba 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. Colocar el cursor sobre un elemento 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 el comando anterior "resolved" terminología.

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

Un ejemplo de la consola con el nuevo campo “entregado” terminología.

Error V8: #6751

Actualizaciones del panel de estilos

Compatibilidad con la palabra clave revert

La IU de autocompletado del panel Estilos ahora detecta la palabra clave de CSS revert, lo que revierte el valor en cascada de una propiedad a cuál hubiera sido el valor si no se hubieran realizado cambios en la 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 eliges colores con el Selector de color o alternas entre representaciones de colores en la Panel de estilos manteniendo presionada la tecla Mayúsculas y haciendo clic en el valor de color, verás los espacios de argumento.

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 está usando la nueva sintaxis porque las funciones de CSS futuras, como color(), no serán compatibles con la Sintaxis de argumentos separados por comas obsoleta.

Desde hace tiempo, la mayoría de los navegadores admiten la sintaxis de argumentos separados por espacios. Consulte ¿Puedo usar ¿Notas 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. Ejecuta console.dir($0) en Console en su lugar.

El panel Properties obsoleto.

Referencias:

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

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

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 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   Más > 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.