Se usó la API de Cloud Translation para traducir esta página.

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, 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 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 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 grabación nueva, 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. Puedes hacer clic en el botón Imprimir con formato { } 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 bonita 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 de uso generalizado, 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 del mapa de origen para SASS.

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

Autocompletado ergonómico y coherente en la consola

Las Herramientas para desarrolladores mejoran 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ó.
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.
La consola destaca la opción seleccionada a medida que navegas por la lista de sugerencias con los atajos Arrow up y Arrow down.
Para completar automáticamente la opción seleccionada durante la navegación, usa las teclas del teclado Tab, Enter o Arrow Right.
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.

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

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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

Envíanos tus comentarios y solicitudes de funciones a crbug.com.
Informa un problema de Herramientas para desarrolladores con Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tuit a @ChromeDevTools.
Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.