Novedades de Herramientas para desarrolladores (Chrome 109)

Jecelyn Yeen

Grabadora: Copiar como opciones para pasos, repetición en la página, menú contextual del paso

Nuevas opciones de copia en el panel de la grabadora

Abre un flujo de usuarios existente en el Registrador. Anteriormente, cuando se volvía a reproducir el flujo de usuarios, DevTools siempre iniciaba la reproducción navegando a la página o volviéndola a cargar.

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 repetición en la página.

Además, 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 Nightwatch Test. 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, 1339767

Muestra los nombres de las funciones reales en las grabaciones de rendimiento

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

Se muestra una comparación de antes y después de la visualización de los nombres de las funciones en el panel Rendimiento.

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

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

Anteriormente, cuando registrabas un seguimiento en el panel Rendimiento, este solo te mostraba los nombres de las funciones reducidas. Esto dificultaba la depuración.

Con los cambios más recientes, DevTools ahora lee el mapa de fuentes y muestra los nombres de las funciones y la ubicación de la fuente reales.

Problemas de Chromium: 1364601, 1364601

Nuevas combinaciones de teclas en el panel Consola y fuentes

Puedes cambiar entre las pestañas del panel Fuentes con las siguientes combinaciones de teclas: En macOS, Función + Comando + Flecha hacia arriba y abajo En Windows y Linux, Control + Página arriba o abajo

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

Además, DevTools ahora acepta Flecha hacia la derecha para el autocompletado solo al final de la línea. Por ejemplo, se muestra un diálogo de autocompletado cuando editas algo en medio del código. Cuando presionas la tecla Flecha hacia la derecha, lo más probable es que quieras colocar el cursor en la siguiente posición en lugar de usar la función de autocompletado. Este cambio de UX se alinea mejor con tu flujo de trabajo de autoría.

Error de Chromium: 1167965, 1172535, 1371585. 1369503

Depuración mejorada de JavaScript

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 new. Ahora puedes registrar new.target en Console para verificar su valor durante la depuración. Anteriormente, se mostraban errores cuando ingresabas new.target. Se muestra la comparación antes y después de la depuración de la evaluación de new.target.
  • Un objeto WeakRef te permite mantener una referencia débil a otro objeto, sin impedir que se recopile. DevTools ahora muestra una vista previa intercalada del valor y evalúa la referencia débil directamente en la consola durante la depuración. Anteriormente, debías llamar de forma explícita a “deref” para resolverlo. Muestra la comparación antes y después de la evaluación de WeakRef durante la depuración.
  • Se corrigió la vista previa intercalada para la variable con sombra. Anteriormente, el valor que se mostraba era incorrecto. Se muestra una vista previa intercalada de la comparación antes y después para la variable con sombra.
  • Desobfusca los nombres de las variables en las funciones Generator y async en el panel Scope del panel Sources.

Problemas de Chromium: 1267690, 1246863 1371322, 1311637

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

  • Se admiten más sugerencias para propiedades CSS inactivas en el panel Estilos: altura y ancho intercalados, propiedades flex y de 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 DevTools. (1290182)
  • Captura los eventos de cambio de entrada correctamente después del evento de desenfoque en el registrador. (1378488).
  • Se actualizó la secuencia de comandos de repetición de Puppeteer en la exportación para mejorar la experiencia de depuración en el Grabador. (1351649).
  • Se admite la grabación y la repetición en la Grabadora para la depuración remota. (1185727).
  • Se corrigió el análisis de nombres de variables CSS especiales en var(). Anteriormente, DevTools no admitía el análisis de variables con caracteres escapados, como var(--fo\ o). , (1378992).

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

El panel actual de Puntos de interrupción proporciona poca ayuda visual para supervisar todos los puntos de interrupción. Además, las acciones de uso frecuente se ocultan detrás del menú contextual.

Este rediseño experimental de UX aporta estructura al panel Breakpoints y permite que los desarrolladores tengan acceso rápido a funciones de uso general, como editar y quitar 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 se expliquen por sí mismas.
  • Los puntos de interrupción se agrupan por archivo y se ordenan por número de línea o columna. Puedes contraerlas y expandirlas.**
  • Se agregaron nuevas opciones para quitar y editar un punto de interrupción cuando colocas el cursor sobre él o sobre el nombre de un archivo en el panel Punto de interrupción.

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

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

Problemas de Chromium: 1346231, 1324904

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

El panel Sources ahora imprime automáticamente los archivos de origen reducidos con formato estilístico. Para deshacerlo, haz clic en el botón de formato legible { }.

Anteriormente, el panel Sources mostraba contenido reducido de forma predeterminada. Debías hacer clic en el botón de formato de texto enriquecido de forma manual para aplicar formato al contenido. Además, el contenido impreso con formato 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 automática en el lugar.

Error de Chromium: 1164184

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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.