Novedades de Herramientas para desarrolladores (Chrome 80)

Kayce Basques

Compatibilidad con las redeclaraciones let y class en la consola

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

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

Ahora, la consola permite la redeclaración:

Problema de Chromium #1004193

Depuración de WebAssembly mejorada

Las Herramientas para desarrolladores comenzaron a admitir el estándar de depuración DWARF, lo que significa una mayor compatibilidad con recorrer el código, establecer puntos de interrupción y resolver seguimientos de pila en tus lenguajes de origen dentro Herramientas para desarrolladores. Para ver la historia completa, consulta Depuración de WebAssembly mejorada en las Herramientas para desarrolladores de Chrome.

Actualizaciones del panel de red

Solicita cadenas de iniciador 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 se hizo con un recurso determinado (como 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 Initiator para ver su Request Initiator Chain:

• 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 otro palabras, https://web.dev/bootstrap.js provocó la solicitud de red para https://web.dev/default-627898b5.js
• Los recursos debajo del recurso inspeccionado son las dependencies. 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 provocó la solicitud de red de https://web.dev/chunk-f34f99f7.js

Problema de Chromium #842488

Destaca la solicitud de red seleccionada en la descripción general

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

Problema de Chromium #988253

Columnas de URL y ruta de acceso en el panel de red

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

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

Problema de Chromium #993366

Cadenas de usuario-agente actualizadas

Herramientas para desarrolladores admite la configuración de una cadena de usuario-agente personalizada a través de la pestaña Condiciones de red. El La cadena usuario-agente afecta al encabezado HTTP User-Agent conectado a los recursos de red, así como al valor de navigator.userAgent.

Las cadenas de usuario-agente predefinidas se actualizaron para reflejar las versiones modernas del navegador.

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

Problema de Chromium #1029031

Actualizaciones del panel de auditorías

Nueva IU de configuración

La IU de configuración tiene un nuevo diseño responsivo, y las opciones de configuración de limitación se simplificó. Consulta Limitación del panel de auditorías para obtener más información sobre la IU de limitación. cambios.

Actualizaciones de la pestaña Cobertura

Modos de cobertura por función o por bloque

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

Ahora, se debe volver a cargar la página para iniciar la cobertura

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 confiables. Por ejemplo, se puede informar que una función no está en uso si se ejecutó hace mucho tiempo y el recolector de elementos no utilizados de V8 lo limpió.

Problema de Chromium #1004203

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   > 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.