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 de pasos, reproducción en la página, menú contextual de los pasos

Nuevas opciones de copia en el panel de Grabadora

Abre un flujo de usuarios existente en la Grabadora. Anteriormente, cuando volvías a reproducir el flujo del usuario, las Herramientas para desarrolladores siempre iniciaban la repetición al navegar 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 reproducir el anuncio in-page.

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

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 y 1339767

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

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

Mostrar la comparación antes y después de los nombres de las funciones en el panel Rendimiento.

En este ejemplo, se reduce un archivo de origen 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 demo.

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

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

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

Problemas de Chromium: 1364601, 1364601

Nuevas combinaciones de teclas en Console y Panel de fuentes

Puedes alternar entre las pestañas del panel Fuentes con las siguientes opciones: En macOS, Función + Comando + Flecha hacia arriba y Flecha hacia abajo En Windows y Linux, Control + Re Pág 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 el Console y usar estas combinaciones de teclas para navegar.

Además de eso, las Herramientas para desarrolladores ahora aceptan la flecha hacia la derecha para el autocompletado solo al final de la línea. Por ejemplo, se muestra un diálogo de autocompletado cuando estás editando algo en medio del código. Cuando presionas la flecha hacia la derecha, lo más probable es que quieras establecer el cursor en la siguiente posición en lugar de autocompletar. Este cambio en la UX se ajusta mejor a 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 a un constructor con el operador nuevo. Ahora puedes registrar new.target en Console para comprobar su valor durante la depuración. Anteriormente, mostraba errores cuando ingresabas new.target.
Un objeto WeakRef te permite conservar 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 integrada del valor y evalúa la referencia débil directamente en la consola durante la depuración. Anteriormente, tenías que llamar explícitamente “deref” a ellos para resolverlo.
Se corrigió la vista previa intercalada para la variable bloqueada. Anteriormente, el valor que se mostraba era incorrecto.
Desofusca los nombres de variables en las funciones Generator y async en el panel Alcance del panel Fuentes.

Problemas de Chromium: 1267690, 1246863, 1371322, 1311637

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

Se admiten más sugerencias para las propiedades de CSS inactivas en el panel Styles: propiedades de altura y ancho intercalados, flexibilidad y cuadrícula. (1373597, 1178508, 1178508 y1178508).
Se corrigió el resaltado de sintaxis. No funcionaba correctamente desde la reciente actualización del editor de código en Herramientas para desarrolladores. (1290182).
Captura 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 durante la exportación para obtener una mejor experiencia de depuración en la Grabadora. (1351649).
Se agregó compatibilidad con las funciones de grabación y repetición en la Grabadora para realizar una depuración remota. (1185727).
Se corrigió el análisis de nombres de variables especiales de 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

El panel Breakpoints actual proporciona poca ayuda visual para supervisar todos los puntos de interrupción. Además de eso, las acciones más usadas están ocultas detrás del menú contextual.

Este rediseño experimental de la UX aporta estructura al panel Breakpoints y permite a los desarrolladores tener acceso rápido a funciones de uso general, 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 Breakpoints. Tienen etiquetas de texto explícitas que hacen que las opciones sean claras.
Los puntos de interrupción se agrupan por archivo, ordenados por número de línea o columna. Puedes contraerlas y expandirlas.**
Nuevas opciones para quitar y editar un punto de interrupción cuando se coloca el cursor sobre él o sobre el nombre de un archivo en el panel Breakpoint.

Lee todos los cambios en nuestra RFC (cerrado) y deja tus comentarios aquí.

Mostrar el panel de punto de interrupción antes y después del rediseño.

Problemas de Chromium: 1346231, 1324904

[Experimental] Impresión con formato estilístico automática

El panel Sources ahora imprime automáticamente con formato estilístico los archivos de origen reducidos en su lugar. Puedes hacer clic en el botón Pretty print { } para deshacer esta acción.

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

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

Problema de Chromium: 1164184

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.