Novedades de Herramientas para desarrolladores (Chrome 110)

Jecelyn Yeen

Borra el panel de rendimiento cuando se vuelve a cargar la página

Ahora, el panel Rendimiento borra la captura de pantalla y el registro cuando haces clic en el botón Iniciar la generación de perfiles y volver a cargar la página.

Anteriormente, el panel Rendimiento mostraba una línea de tiempo con capturas de pantalla de grabaciones anteriores. Esto dificultaba ver cuándo comenzaba la medición real. Ahora, el panel siempre navega primero a la página about:blank para garantizar que la grabación comience con un registro en blanco. Esto se alinea con el panel Estadísticas de rendimiento, que ya hacía lo mismo.

Se borra el panel de rendimiento cuando se vuelve a cargar la página.

Problemas de Chromium: 1101268 y 1382044

Actualizaciones de la Grabadora

Cómo ver y destacar el código de tu flujo de usuarios en el grabador

El Grabador ahora ofrece una vista de código dividida, lo que facilita la visualización del código de flujo del usuario. Para acceder a la vista de código, abre un flujo de usuarios y haz clic en Mostrar código.

El Grabador destaca el código correspondiente a medida que te desplazas sobre cada paso a la izquierda, lo que facilita el seguimiento de tu flujo. Puedes cambiar el formato del código con el menú desplegable, que te permite cambiar entre formatos como la secuencia de comandos Nightwatch Test.

Vista de código en el Recorder

Error de Chromium: 1385489

Personaliza los tipos de selectores de una grabación

Puedes crear grabaciones que capturen solo los tipos de selectores que te interesan. Con la nueva opción para personalizar los tipos de selectores cuando creas una nueva grabación, puedes incluir o excluir selectores como XPath, lo que garantiza que solo captures los selectores que deseas en tus flujos de usuarios.

Se agregó una nueva opción para personalizar los tipos de selectores.

Error de Chromium: 1384431

Cómo editar el flujo de usuarios mientras se graba

La Grabadora ahora permite editar durante la grabación, lo que te brinda la flexibilidad de realizar cambios en tiempo real. Ya no es necesario finalizar la grabación para realizar ajustes.

Edición durante la grabación del flujo de usuarios

Problema de Chromium: 1381971

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 pretty print { } para deshacerlo.

Anteriormente, el panel Fuentes mostraba contenido comprimido de forma predeterminada. Para darle formato al contenido, debías hacer clic en el botón de impresión atractiva de forma manual. Además, el contenido con formato no se mostraba en la misma pestaña, 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.

Problemas de Chromium: 1383453, 1382752, 1382397

Mejor resaltado de sintaxis y vista previa intercalada para Vue, SCSS y mucho más

El panel Fuentes mejoró el resaltado de sintaxis para varios formatos de archivo muy utilizados, lo que te permite leer el código con mayor facilidad y reconocer su estructura, incluidos Vue, JSX, Dart, LESS, SCSS, SASS y CSS intercalado.

Resaltado de sintaxis en Vue.

Además, las Herramientas para desarrolladores también mejoraron la vista previa intercalada para Vue, HTML intercalado y TSX. Coloca el cursor sobre una variable para obtener una vista previa de su valor.

Vista previa intercalada para Vue.

Además, ahora las Herramientas para desarrolladores muestran el mapa de fuentes de una hoja de estilo en el panel Fuentes. Por ejemplo, cuando abres un archivo SCSS, puedes acceder al archivo CSS relacionado haciendo clic en el vínculo del mapa de origen.

Es el vínculo al mapa de origen de SASS.

Problemas de Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Autocompletar ergonómico y coherente en la consola

DevTools mejora la experiencia de autocompletado con los siguientes cambios:

  • Tab siempre se usa para el autocompletado.
  • El comportamiento de Arrow right y Enter varía según el contexto.
  • La experiencia de autocompletado es coherente en todos los editores de texto, en los paneles Console, Sources y Elements.

Por ejemplo, esto es lo que sucede cuando escribes cons en la consola:

  • La consola muestra una lista de sugerencias de autocompletado, con un sutil borde punteado alrededor de la primera opción que indica que la navegación aún no comenzó. Borde punteado alrededor de la primera opción de autocompletar.

  • La consola ejecuta la línea cuando presionas Enter. Anteriormente, completaba automáticamente la línea con la sugerencia principal. Para autocompletar, presiona Tab o Arrow Right. Ejecuta la línea al presionar Intro.

  • La consola destaca la opción seleccionada a medida que navegas por la lista de sugerencias con los atajos Arrow up y Arrow down. Destaca durante la navegación con sugerencias.

  • Para completar automáticamente la opción seleccionada durante la navegación, usa las teclas del teclado Tab, Enter o Arrow Right. Autocompletar con la opción seleccionada durante la navegación

  • Cuando edites en medio del código, por ejemplo, cuando el cursor esté entre n y s, usa Tab para la función de autocompletar, Enter para ejecutar la línea y Arrow Right para mover el cursor hacia adelante. Edición en medio del código

Problemas de Chromium: 1399436, 1276960

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

  • Se resolvió un problema de regresión en Herramientas para desarrolladores, en el que no se detenía en la instrucción debugger en los secuencias de comandos intercalados. (1385374)
  • Se agregó un nuevo parámetro de configuración de Console que te permite expandir o contraer los mensajes de console.trace() de forma predeterminada. Activa o desactiva la configuración en Configuración > Preferencias > Expandir los mensajes de console.trace() de forma predeterminada. (1139616)
  • El panel Fragmentos del panel Fuentes admite la función de autocompletar mejorada, similar a la de la Consola. (772949) Autocompletar en fragmentos

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