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

El panel Performance ahora borra la captura de pantalla y el seguimiento cuando haces clic en el botón Start profiling and reload page.

Anteriormente, en el panel Rendimiento se mostraba un cronograma con capturas de pantalla de grabaciones anteriores. De este modo, era difícil ver cuándo comenzó la medición real. Ahora, el panel siempre navega primero a la página about:blank para garantizar que el registro comience con un registro en blanco. Esto coincide con el panel Estadísticas de rendimiento, que ya hizo lo mismo.

Borrando Panel de rendimiento cuando se vuelve a cargar la página.

Problemas de Chromium: 1101268, 1382044

Actualizaciones de la grabadora

Ver y destacar el código del flujo de usuarios en la grabadora

La Grabadora ahora ofrece una vista de código dividido, lo que facilita la visualización del código de flujo de usuarios. Para acceder a la vista de código, abre un flujo de usuarios y haz clic en Show Code.

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

Vista de código en la grabadora.

Problema de Chromium: 1385489

Personaliza los tipos de selector de una grabación

Puedes crear grabaciones que capturen solo los tipos de selector 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 la captura solo de los selectores que deseas en tus flujos de usuarios.

Nueva opción para personalizar los tipos de selectores.

Problema de Chromium: 1384431

Edita el flujo de usuarios durante la grabación

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

Edición durante el registro del flujo del usuario.

Problema de Chromium: 1381971

Impresión con formato estilístico automática

El panel Sources ahora imprime automáticamente los archivos fuente reducidos en su lugar. Puedes hacer clic en el botón Pretty-Print { } para deshacer esta acción.

Anteriormente, el panel Fuentes mostraba contenido reducido de forma predeterminada. Para darle formato al contenido, tenías que hacer clic manualmente en el botón de impresión bonita. Además de eso, el contenido impreso no se mostraba en la misma pestaña, sino en otra ::formatted.

Muestra un archivo reducido antes y después de la impresión con bonita automática.

Problemas de Chromium: 1383453, 1382752, 1382397

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

El panel Sources mejoró la sintaxis destacada de 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 integrada para Vue, HTML intercalado y TSX. Coloca el cursor sobre una variable para obtener una vista previa de su valor.

Vista previa intercalada de Vue.

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

Vínculo del mapa de fuentes para SASS.

Problemas de Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, {1471392106{/1471392106ᴟ

Autocompletar ergonómico y coherente en la consola

Las Herramientas para desarrolladores mejoran la experiencia de autocompletado implementando 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 del 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:

En la consola, se muestra una lista de sugerencias de autocompletar con un borde de puntos sutil alrededor de la opción superior 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 las combinaciones de teclas Arrow up y Arrow down.
Para autocompletar con la opción seleccionada durante la navegación, usa las teclas Tab, Enter o Arrow Right.
Cuando edites durante el código, por ejemplo, cuando el cursor está entre n y s, usa Tab para el autocompletado, 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 notables en esta versión:

Se resolvió un problema de regresión en Herramientas para desarrolladores, por el que no se detuvo en la sentencia debugger de las secuencias de comandos intercaladas. (1385374).
Un nuevo parámetro de configuración de Consola que permite expandir o contraer console.trace() mensajes de forma predeterminada. Activa o desactiva los parámetros en Configuración > Preferencias > Expande los mensajes de console.trace() de forma predeterminada. (1139616).
El panel Fragmentos del panel Fuentes admite el autocompletado mejorado, similar a la consola. (772949).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Para enviarnos sugerencias o comentarios, accede a crbug.com.
Informa un problema en Herramientas para desarrolladores con Más opciones > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
Twittea a @ChromeDevTools.
Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.