Novedades de Herramientas para desarrolladores (Chrome 109)

Jecelyn Yeen

Grabadora: Opciones de copiar como para los pasos, reproducción en la página y menú contextual del paso

Nuevas opciones de copia en el panel de Grabadora

Abre un flujo de usuarios existente en el Recorder. Anteriormente, cuando reproducías el flujo de usuarios, Herramientas para desarrolladores siempre comenzaba la reproducción navegando a la página o volviéndola a cargar.

Con las actualizaciones más recientes, el Grabador muestra el paso de navegación por separado. Puedes hacer clic con el botón derecho y quitarlo para realizar la reproducció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 *Grabador 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, 1339767

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

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

Muestra una comparación del antes y el después de los nombres de las funciones que se muestran en el panel Rendimiento.

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

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

Anteriormente, cuando grababas un registro en el panel Rendimiento, el registro solo mostraba los nombres de las funciones minimizados. Esto dificultó la depuración.

Con los cambios más recientes, las Herramientas para desarrolladores ahora leen el mapa de fuentes y muestran los nombres de las funciones y la ubicación de la fuente reales.

Problemas de Chromium: 1364601, 1364601

Nuevas combinaciones de teclas en los paneles Console y Sources

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

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

Además, las Herramientas para desarrolladores ahora aceptan 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 de flecha hacia la derecha, es probable que quieras establecer el cursor en la siguiente posición en lugar de autocompletar. Este cambio en la UX se alinea mejor con tu flujo de trabajo de creación.

Problemas de Chromium: 1167965, 1172535 y 1371585. 1369503

Se mejoró la depuración de JavaScript

Estas son algunas de las mejoras en la depuración de JavaScript que se incluyen 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 la consola para verificar su valor durante la depuración. Anteriormente, mostraba errores cuando ingresabas new.target. Muestra una comparación del antes y el 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 recolecte como elemento no utilizado. Ahora, Herramientas para desarrolladores 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” en ellos para resolverlo. Muestra la comparación de antes y después de la evaluación de WeakRef durante la depuración.
  • Se corrigió la vista previa intercalada para la variable sombreada. Anteriormente, el valor para mostrar era incorrecto. Muestra la vista previa intercalada de la comparación de antes y después para la variable sombreada.
  • Se ofuscan los nombres de las 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 destacadas en esta versión:

  • Se agregó compatibilidad con más sugerencias para las propiedades CSS inactivas en el panel Estilos: altura y ancho intercalados, y propiedades de flex y cuadrícula. (1373597, 1178508, 1178508,1178508)
  • 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 del evento on blur en el Recorder. (1378488)
  • Se actualizó la secuencia de comandos de reproducción de Puppeteer en la exportación para mejorar la experiencia de depuración en el Grabador. (1351649)
  • Se admite la grabación y reproducción en la Grabadora para la depuración remota. (1185727)
  • Se corrigió el análisis de nombres especiales de variables 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, las acciones que se usan con frecuencia están ocultas detrás del menú contextual.

Este rediseño experimental de la UX aporta estructura al panel Puntos de interrupción y permite que los desarrolladores accedan rápidamente a funciones de uso frecuente, 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 se expliquen por sí solas.
  • Los puntos de interrupción se agrupan por archivo y se ordenan 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 el punto de interrupción o el nombre de un archivo en el panel Breakpoint

Lee los cambios completos en nuestro RFC (cerrado) 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 Fuentes ahora imprime automáticamente con formato estilístico los archivos fuente reducidos en su lugar. Puedes hacer clic en el botón Imprimir de forma legible { } para deshacerlo.

Anteriormente, el panel Fuentes mostraba contenido comprimido de forma predeterminada. Tenías que hacer clic en el botón de impresión bonita de forma manual para formatear el contenido. Además, el contenido con formato 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 con formato estilístico in situ.

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

Novedades de Herramientas para desarrolladores

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