Qué hay de nuevo en DevTools (Chrome 100)

Published on Updated on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias Carlos Caballero por la traducción y Miguel Ángel por la revisión.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Chrome 100

¡Aquí está la versión número 100 de Chrome! Chrome DevTools continuará proporcionando herramientas confiables para que los desarrolladores construyan en la web. Tómese un momento para hacer clic en la pestaña Novedades para celebrar los hitos.

Como de costumbre, puede ver el último video de Novedades en DevTools haciendo clic en la imagen.

Ver y editar reglas @supports en el panel Estilos

Ahora puede ver y editar las reglas-at @supports en el panel Estilos. Estos cambios facilitan la experimentación con las reglas-at en tiempo real.

Abra esta página de demostración, inspeccione el elemento <div class="box">, vea las reglas-at @support en el panel Estilos. Haga clic en la declaración de la regla para editarla.

Ver y editar @supports en las reglas

Chromium issues: 1222574, 1222573

Mejoras en el panel de la grabadora

Admite selectores comunes de forma predeterminada

Al determinar un selector único durante la grabación, ahora el panel Grabadora prefiere automáticamente los elementos con los siguientes atributos:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

Los atributos anteriores son selectores comunes utilizados en la automatización de pruebas.

Por ejemplo, inicie una nueva grabación con esta página de demostración. Complete una dirección de correo electrónico y observe el valor del selector.

Dado que el elemento de correo electrónico tiene definido data-testid, se usa como selector automáticamente en lugar de los atributos id o class.

Soporta selectores comunes de forma predeterminada

Personaliza el selector de grabaciones

Puede personalizar el selector de una grabación si no utiliza los selectores comunes.

Por ejemplo, esta página de demostración usa el atributo data-automate como selector. Inicie una nueva grabación e ingrese data-automate como el atributo del selector. Complete una dirección de correo electrónico y observe el valor del selector ([data-automate=email-address]).

Personaliza el selector de grabaciones El resultado de la selección del selector personalizado

Cambiar el nombre de una grabación

Ahora puede cambiar el nombre de una grabación en el panel Grabadora con el botón de edición (icono de lápiz) junto al título de la grabación.

Cambiar el nombre de una grabación

Vista previa de propiedades de clase/función al pasar el mouse

Ahora puede pasar el cursor sobre una clase o función en el panel Fuentes durante la depuración para obtener una vista previa de sus propiedades. Anteriormente, solo mostraba el nombre de la función y un enlace a su ubicación en el código fuente.

Vista previa de propiedades de clase/función al pasar el mouse

Chromium issue: 1049947

Fotogramas presentados parcialmente en el panel Rendimiento

La grabación de rendimiento ahora muestra una nueva categoría de fotogramas "Fotogramas presentados parcialmente" en la línea de tiempo de Fotogramas.

Anteriormente, la línea de tiempo de Fotogramas visualizaba cualquier fotograma con trabajo retrasado en el subproceso principal como "fotogramas perdidos". Sin embargo, hay casos en los que algunos cuadros aún pueden producir actualizaciones visuales (por ejemplo, desplazamiento) impulsadas por el hilo del compositor.

Esto genera confusión en el usuario porque las capturas de pantalla de estos "fotogramas eliminados" aún reflejan actualizaciones visuales.

Los nuevos "Fotogramas presentados parcialmente" tienen como objetivo indicar de manera más intuitiva que, aunque parte del contenido no se presenta a tiempo en el fotograma, el problema no es tan grave como para bloquear las actualizaciones visuales por completo.

Fotogramas presentados parcialmente en el panel Rendimiento

Chromium issue: 1261130

Destacados varios

Estas son algunas correcciones notables en esta versión:

  • Actualizadas las cadenas de caracteres de user agent en iPhone para dispositivos emulados. Todas las versiones de iPhone posteriores a la 5 tienen una cadena de user agent con iPhone OS 13_2_3. (1289553)
  • Ahora puede guardar fragmento de código fuente como un archivo JavaScript directamente. Anteriormente, necesitaba agregar la extensión de archivo .js manualmente. (1137218)
  • El panel Fuentes ahora muestra correctamente los nombres de las variables del ámbito al depurar con el mapa fuente. Anteriormente, el panel Fuentes mostraba nombres de variables del ámbito minimizados a pesar de que se proporcionaba un mapa fuente. (1294682)
  • El panel Fuentes ahora restaura la posición de desplazamiento correctamente al cargar la página. Anteriormente, la posición no se restauraba correctamente, lo que generaba inconvenientes en la depuración. (1294422)

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.