Novedades de Herramientas para desarrolladores (Chrome 80)

Kayce Basques

Compatibilidad con las redeclaraciones de let y class en Console

La consola ahora admite la redeclaración de instrucciones let y class. La imposibilidad de volver a declarar era una molestia común para los desarrolladores web que usan la consola para experimentar con código JavaScript nuevo.

Por ejemplo, antes, cuando se volvía a declarar una variable local con let, la consola mostraba un error:

Ahora, la consola permite la redeclaración:

Error de Chromium #1004193

Se mejoró la depuración de WebAssembly

Las Herramientas para desarrolladores comenzaron a admitir el estándar de depuración DWARF, lo que significa una mayor compatibilidad para ejecutar el código paso a paso, establecer puntos de interrupción y resolver seguimientos de pila en tus lenguajes fuente dentro de las Herramientas para desarrolladores. Consulta Mejoras en la depuración de WebAssembly en Chrome DevTools para conocer todos los detalles.

Actualizaciones del panel de red

Cadenas de iniciadores de solicitudes en la pestaña Iniciador

Ahora puedes ver los iniciadores y las dependencias de una solicitud de red como una lista anidada. Esto puede ayudarte a comprender por qué se solicitó un recurso o qué actividad de red causó un recurso determinado (como una secuencia de comandos).

Después de registrar la actividad de red en el panel Red, haz clic en un recurso y, luego, ve a la pestaña Iniciador para ver su cadena de iniciadores de solicitudes:

• El recurso inspeccionado está en negrita. En la captura de pantalla anterior, https://web.dev/default-627898b5.js es el recurso inspeccionado.
• Los recursos que se encuentran sobre el recurso inspeccionado son los iniciadores. En la captura de pantalla anterior, https://web.dev/bootstrap.js es el iniciador de https://web.dev/default-627898b5.js. En otras palabras, https://web.dev/bootstrap.js causó la solicitud de red para https://web.dev/default-627898b5.js.
• Los recursos que se encuentran debajo del recurso inspeccionado son las dependencias. En la captura de pantalla anterior, https://web.dev/chunk-f34f99f7.js es una dependencia de https://web.dev/default-627898b5.js. En otras palabras, https://web.dev/default-627898b5.js causó la solicitud de red para https://web.dev/chunk-f34f99f7.js.

Problema de Chromium #842488

Destaca la solicitud de red seleccionada en la pestaña Overview

Después de hacer clic en un recurso de red para inspeccionarlo, el panel Red ahora coloca un borde azul alrededor de ese recurso en la Descripción general. Esto puede ayudarte a detectar si la solicitud de red se produce antes o después de lo esperado.

Problema de Chromium #988253

Columnas de URL y ruta en el panel de red

Usa las nuevas columnas Ruta de acceso y URL en el panel Red para ver la ruta de acceso absoluta o la URL completa de cada recurso de red.

Haz clic con el botón derecho en el encabezado de la tabla Cascada y selecciona Ruta de acceso o URL para mostrar las columnas nuevas.

Problema de Chromium #993366

Se actualizaron las cadenas de usuario-agente

Las Herramientas para desarrolladores permiten configurar una cadena de User-Agent personalizada a través de la pestaña Condiciones de red. La cadena de User-Agent afecta el encabezado HTTP User-Agent adjunto a los recursos de red y también el valor de navigator.userAgent.

Se actualizaron los strings de usuario-agente predefinidos para reflejar las versiones modernas de los navegadores.

Para acceder a Network Conditions, abre el menú de comandos y ejecuta el comando Show Network Conditions.

Error de Chromium #1029031

Actualizaciones del panel Auditorías

Nueva IU de configuración

La IU de configuración tiene un diseño nuevo y adaptable, y se simplificaron las opciones de configuración de limitación. Consulta Regulación del panel Auditorías para obtener más información sobre los cambios en la IU de regulación.

Actualizaciones de la pestaña Cobertura

Modos de cobertura por función o por bloque

La pestaña Coverage tiene un nuevo menú desplegable que te permite especificar si los datos de cobertura del código se deben recopilar por función o por bloque. La cobertura por cuadra es más detallada, pero también mucho más costosa de recopilar. Ahora, de forma predeterminada, Herramientas para desarrolladores usa la cobertura por función.

Ahora, la cobertura se debe iniciar con una recarga de la página

Se quitó la opción para activar o desactivar la cobertura de código sin volver a cargar la página porque los datos de cobertura no eran confiables. Por ejemplo, se puede informar que una función no se usa si su ejecución ocurrió hace mucho tiempo y el recolector de basura de V8 la limpió.

Problema de Chromium #1004203

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.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores