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

Novedades de Herramientas para desarrolladores (Chrome 110)

Jecelyn Yeen

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

El panel Performance ahora borrará la captura de pantalla y el seguimiento cuando hagas 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. Esto hacía que fuera 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 seguimiento en blanco. Esto está alineado con el panel Estadísticas de rendimiento que ya hizo lo mismo.

Se está borrando el Panel de rendimiento cuando se vuelve a cargar la página.

Problemas de Chromium: 1101268, 1382044

Actualizaciones de la grabadora

Visualiza y destaca el código de tu flujo de usuarios en la grabadora

La grabadora ahora ofrece la 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 a medida que te desplazas sobre cada paso de la izquierda, lo que facilita el seguimiento del flujo. Puedes cambiar el formato del código con el menú desplegable, que te permite alternar entre formatos, como la secuencia de comandos Nightwatch Test.

Vista de código en la grabadora.

Problema de Chromium: 1385489

Cómo personalizar 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 al crear un nuevo registro, puedes incluir o excluir selectores como XPath y asegurarte de capturar solo los selectores que desees 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 te permite editar durante la grabación, por lo que tienes la flexibilidad de hacer cambios en tiempo real. Ya no es necesario finalizar la grabación para hacer ajustes.

Edición durante el registro del flujo de usuarios

Problema de Chromium: 1381971

Impresión automática in situ

Ahora, el panel Sources imprime automáticamente archivos fuente reducidos en su lugar. Puedes hacer clic en el botón Impresión con formato { } para deshacer la acción.

Anteriormente, en el panel Fuentes, se mostraba contenido reducido de forma predeterminada. Para darle formato al contenido, tenías que hacer clic en el botón para imprimir de forma manual. Además, el contenido impreso 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 in situ.

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 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 la sintaxis en Vue.

Además, Herramientas para desarrolladores mejoró la vista previa en línea de 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 origen 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.

Vínculo del mapa de fuentes para SASS.

Problemas de Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451{/13735, 1392106{/6106

Autocompletar ergonómico y coherente en la consola

Herramientas para desarrolladores mejora la experiencia de autocompletado mediante la implementación de 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 la función de autocompletado es coherente en todos los editores de texto, en los paneles de Console, Sources y Elements.

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

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ó.
Console ejecuta la línea cuando presionas Enter. Antes, completaba automáticamente la línea con la sugerencia principal. Para usar la función de autocompletar, presiona Tab o Arrow Right.
Console destaca la opción seleccionada mientras 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 del teclado Tab, Enter o Arrow Right.
Cuando edites 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 y 1276960

Otros aspectos destacados

Estas son algunas correcciones notables de esta versión:

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

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).