Novedades de Herramientas para desarrolladores (Chrome 100)

Jecelyn Yeen

Chrome 100

¡Felicidades por la versión 100 de Chrome! Las Herramientas para desarrolladores de Chrome seguirán proporcionando herramientas confiables para que los desarrolladores creen contenido en la Web. Tómate un momento para hacer clic en la pestaña Novedades y celebrar los logros.

Como de costumbre, puedes hacer clic en la imagen para mirar el video de Novedades de DevTools más reciente.

Cómo ver y editar @supports en reglas en el panel de estilos

Ahora puedes ver y editar las reglas de @supports de CSS en el panel Styles. Estos cambios facilitan la experimentación con las reglas de at en tiempo real. Abre esta página de demostración, inspecciona el elemento <div class=”box”> y consulta las reglas de @supports en el panel Styles. Haz clic en la declaración de la regla para editarla.

Cómo ver y editar @supports en reglas

Problemas de Chromium: 1222574, 1222573

Mejoras en el panel de la grabadora

Admite selectores comunes de forma predeterminada

Cuando se determina un selector único durante la grabación, el panel Grabadora ahora 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 que se usan en la automatización de pruebas.

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

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

Admite selectores comunes de forma predeterminada

Personaliza el selector de la grabación

Puedes personalizar el selector de una grabación si no usas los selectores comunes.

Por ejemplo, esta página de demostración usa el atributo data-automate como selector. Inicia una nueva grabación y, luego, ingresa data-automate como atributo del selector. Completa una dirección de correo electrónico y observa el valor del selector ([data-automate=email-address]).

Personaliza el selector de la grabación

El resultado de la selección del selector personalizado

Cómo cambiar el nombre de una grabación

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

Cómo cambiar el nombre de una grabación

Cómo obtener una vista previa de las propiedades de la clase o función cuando se coloca el cursor sobre ellas

Ahora puedes colocar el cursor sobre una clase o función en el panel Sources durante la depuración para obtener una vista previa de sus propiedades. Anteriormente, solo se mostraba el nombre de la función y un vínculo a su ubicación en el código fuente.

Cómo obtener una vista previa de las propiedades de la clase o función cuando se coloca el cursor sobre ellas

Error de Chromium: 1049947

Marcos presentados de forma parcial en el panel Rendimiento

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

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

Esto genera confusión entre los usuarios, ya que las capturas de pantalla de estos "fotogramas perdidos" aún reflejan actualizaciones visuales.

El nuevo error "Fotogramas presentados de forma parcial" tiene como objetivo indicar de forma más intuitiva que, aunque parte del contenido no se presenta de forma oportuna en el fotograma, el problema no es tan grave como para bloquear las actualizaciones visuales por completo.

Marcos presentados de forma parcial en el panel Rendimiento

Error de Chromium: 1261130

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

  • Se actualizaron las cadenas de usuario-agente de iPhone para dispositivos emulados. Todas las versiones de iPhone posteriores a la 5 tienen una cadena de usuario-agente con el SO iPhone 13_2_3. (1289553)
  • Ahora puedes guardar el fragmento directamente como un archivo JavaScript. Anteriormente, debías agregar la extensión de archivo .js de forma manual. (1137218)
  • El panel Sources ahora muestra correctamente los nombres de las variables de alcance cuando se depura con el mapa de origen. Anteriormente, el panel Sources mostraba nombres de variables de alcance reducidos a pesar de que se proporcionaba el mapa de origen. (1294682).
  • El panel Sources ahora restablece la posición de desplazamiento correctamente cuando se carga la página. Anteriormente, la posición no se restablecía correctamente, lo que causaba inconvenientes en la depuración. (1294422).

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.