Novedades de Herramientas para desarrolladores (Chrome 110)

Jecelyn Yeen

Cómo borrar el panel de rendimiento cuando se vuelve a cargar

El panel Rendimiento ahora borra la captura de pantalla y el registro cuando haces clic en el botón Iniciar perfilación y volver a cargar la página.

Anteriormente, el panel Rendimiento mostraba un cronograma 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.

Problemas de Chromium: 1101268, 1382044

Actualizaciones de la grabadora

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

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

El registrador destaca el código correspondiente cuando colocas el cursor sobre cada paso de la izquierda, lo que facilita el seguimiento de tu flujo. Puedes cambiar el formato de código con el menú desplegable, que te permite alternar entre formatos, como la secuencia de comandos de Nightwatch Test.

Vista de código en la grabadora.

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 grabación nueva, puedes incluir o excluir selectores, como XPath, lo que te garantiza que captures solo los selectores que deseas en tus flujos de usuarios.

Nueva opción para personalizar los tipos de selectores.

Error de Chromium: 1384431

Cómo editar el flujo de usuarios durante la grabación

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

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

Error de Chromium: 1381971

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

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

Anteriormente, el panel Sources mostraba contenido reducido de forma predeterminada. Para aplicar formato al contenido, debías hacer clic en el botón de formato legible manualmente. Además, el contenido con formato mejorado no se mostraba en la misma pestaña, sino en otra pestaña ::formatted.

Muestra un archivo reducido antes y después de la impresión automática en el lugar.

Problemas de Chromium: 1383453, 1382752, 1382397

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

El panel Sources mejoró el resaltado de sintaxis para varios formatos de archivo de uso general, 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, DevTools ahora muestra el mapa de origen de una hoja de estilo en el panel Sources. 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 del mapa de origen para SASS.

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

Completado automático ergonómico y coherente en Console

DevTools mejora la experiencia de autocompletado con la implementación de los siguientes cambios:

  • Tab siempre se usa para la autocompletación.
  • 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 Console:

  • La Consola muestra una lista de sugerencias de autocompletado, con un borde sutil de puntos alrededor de la opción superior que indica que aún no se inició la navegación. Borde de puntos alrededor de la opción de autocompletar superior.

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

  • Console destaca la opción seleccionada mientras navegas por la lista de sugerencias con los atajos Arrow up y Arrow down. Puntos destacados durante la navegación por sugerencias

  • Para completar automáticamente con 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 finalización automática, 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 importantes de esta versión:

  • Se resolvió un problema de regresión en DevTools, que no se detenía en la sentencia debugger en las secuencias de comandos intercaladas. (1385374).
  • 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 console.trace() de forma predeterminada. (1139616).
  • El panel Fragmentos del panel Fuentes admite el autocompletado mejorado, similar al de Console. (772949) Autocompletado 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 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.