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

Novedades de Herramientas para desarrolladores (Chrome 109)

Jecelyn Yeen

Grabadora: Copiar como opciones para los pasos, la reproducción in-page y el menú contextual de los pasos

Nuevas opciones de copia en el panel Grabadora.

Abre un flujo de usuarios existente en la Grabadora. Anteriormente, cuando volvías a reproducir el flujo de usuarios, Herramientas para desarrolladores siempre iniciaba la repetición navegando a la página o volviendo a cargarla.

Con las actualizaciones más recientes, la Grabadora muestra el paso de navegación por separado. Puedes hacer clic con el botón derecho y quitarlo para realizar la reproducción in-page.

Aparte de eso, puedes hacer clic con el botón derecho en un paso y copiarlo en el portapapeles en el panel de *Grabadora en lugar de exportar todo el flujo del usuario. También funciona con extensiones. Por ejemplo, intenta copiar un paso como una secuencia de comandos Nightwatch Test. Con esta función, puedes actualizar fácilmente cualquier secuencia de comandos existente.

Anteriormente, solo podías acceder al menú de pasos a través del botón de 3 puntos. Ahora puedes hacer clic con el botón derecho en cualquier parte del paso para acceder al menú.

Problemas de Chromium: 1322313, 1351649, 1322313, 1339767

Mostrar los nombres reales de las funciones en las grabaciones de las presentaciones

El panel Rendimiento ahora muestra los nombres reales de las funciones y sus fuentes en el seguimiento (si hay un mapa de fuentes).

Se muestra la comparación de nombres de funciones antes y después en el panel de rendimiento.

En este ejemplo, un archivo fuente se reduce durante la producción. Por ejemplo, la función sayHi se reduce como n, y la función takeABreak se reduce como o en esta demostración.

Se muestran archivos antes y después de la reducción.

Anteriormente, cuando se registraba un seguimiento en el panel Rendimiento, solo se mostraban los nombres de las funciones reducidas. Esto dificultaba la depuración.

Con los cambios más recientes, Herramientas para desarrolladores ahora lee el mapa de orígenes y muestra los nombres reales de las funciones y la ubicación de la fuente.

Problemas de Chromium: 1364601 y 1364601

Nuevas combinaciones de teclas en el panel Console y el panel Sources

Puedes alternar entre las pestañas en el panel Fuentes de la siguiente manera: En MacOS, Función + Comando + Flecha hacia arriba y abajo En Windows y Linux, Control + Retroceder página o Av Pág

Además, puedes navegar por las sugerencias de autocompletar con Ctrl + N y Ctrl + P en MacOS, similar a Emacs. Por ejemplo, puedes escribir window. en Console y usar estas combinaciones de teclas para navegar.

Además de eso, Herramientas para desarrolladores ahora acepta la flecha hacia la derecha para el autocompletado solo al final de la línea. Por ejemplo, un diálogo de autocompletado se muestra cuando estás editando algo en medio del código. Cuando presionas la tecla de flecha hacia la derecha, lo más probable es que quieras colocar el cursor en la siguiente posición en lugar de autocompletarlo. Este cambio en la UX se alinea mejor con tu flujo de trabajo de creación.

Problema de Chromium: 1167965, 1172535, 1371585. 1369503

Depuración de JavaScript mejorada

Estas son algunas mejoras de depuración de JavaScript en esta versión:

new.target es una metapropiedad que te permite detectar si se llamó a una función o un constructor con el operador nuevo. Ahora puedes registrar new.target en Console para verificar su valor durante la depuración. Antes, mostraba errores cuando ingresabas new.target.
Un objeto WeakRef te permite mantener una referencia débil a otro objeto, sin evitar que ese objeto se recolecte como elemento no utilizado. Herramientas para desarrolladores ahora muestra una vista previa intercalada del valor y evalúa la referencia débil directamente en la consola durante la depuración. Anteriormente, tenías que llamar explícitamente a "deref" para resolverlo.
Se corrigió la vista previa intercalada de la variable bloqueada. Anteriormente, el valor visible era incorrecto.
Desofusca los nombres de las variables en las funciones Generator y async en el panel Scope del panel Sources.

Problemas de Chromium: 1267690, 1246863 1371322 y 1311637

Otros aspectos destacados

Estas son algunas correcciones notables de esta versión:

Se incluyen más sugerencias para las propiedades de CSS inactivas en el panel Estilos: altura y ancho intercalados, Flex y cuadrícula. (1373597, 1178508, 1178508,1178508).
Se corrigió el resaltado de sintaxis. No funcionaba correctamente desde la actualización reciente del editor de código en Herramientas para desarrolladores. (1290182).
Capturar correctamente los eventos de cambio de entrada después de un evento de desenfoque en la Grabadora (1378488).
Se actualizó la secuencia de comandos de repetición de Puppeteer en la exportación para obtener una mejor experiencia de depuración en la Grabadora. (1351649).
Admite la función de grabación y reproducción en la Grabadora para depuración remota. (1185727).
Se corrigió el análisis de nombres especiales de variables CSS en var(). Anteriormente, las Herramientas para desarrolladores no admitían el análisis de variables con caracteres de escape como var(--fo\ o). (1378992).

[Experimental] UX mejorada en la administración de puntos de interrupción

En el panel Breakpoints actual, no se proporciona ayuda visual para supervisar todos los puntos de interrupción. Además de eso, las acciones de uso frecuente están ocultas detrás del menú contextual.

Este nuevo diseño experimental de la UX aporta estructura al panel Breakpoints y permite a los desarrolladores tener acceso rápido a funciones de uso común, como la edición y la eliminación de puntos de interrupción.

Estos son algunos aspectos destacados:

Ambas opciones de pausa se encuentran en el panel Puntos de interrupción. Tienen etiquetas de texto explícitas que hacen que las opciones sean claras.
Los puntos de interrupción se agrupan por archivo y ordenados por línea o número de columna. Puedes contraerlas y expandirlas.**
Nuevas opciones para quitar y editar un punto de interrupción cuando se coloca el cursor sobre él o un nombre de archivo en el panel Breakpoint

Lee los cambios completos en nuestra RFC (cerrada) y deja tus comentarios aquí.

Muestra el panel Punto de interrupción antes y después del nuevo diseño.

Problemas de Chromium: 1346231, 1324904

[Experimental] Impresión automática en el lugar

Ahora, el panel Sources imprime automáticamente archivos de origen reducidos. Puedes hacer clic en el botón Impresión con formato { } para deshacer la acción.

Anteriormente, en el panel Fuentes, se mostraba contenido reducido de forma predeterminada. Había que hacer clic manualmente en el botón Imprimir para darle formato al contenido. Además, el contenido impreso no se mostraba en el mismo archivo, sino en otra pestaña de ::formatted.

Muestra un archivo reducido antes y después de la impresión automática in situ.

Problema de Chromium: 1164184

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