Novedades de Herramientas para desarrolladores (Chrome 100)

Jecelyn Yeen

Chrome 100

¡Brindamos por la versión número 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 más reciente sobre las novedades de las Herramientas para desarrolladores.

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

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

Cómo ver y editar reglas @supports

Problemas de Chromium: 1222574, 1222573

Mejoras en el panel de Grabadora

Admite selectores comunes de forma predeterminada

Cuando se determina un selector único durante la grabación, el panel Recorder 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 nueva grabación con esta página de demostración. Completa una dirección de correo electrónico y observa el valor del selector.

Dado que el elemento de correo electrónico tiene definido data-testid, se usa automáticamente como selector 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 el 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) que se encuentra junto al título de la grabación.

Cómo cambiar el nombre de una grabación

Vista previa de las propiedades de clases o funciones cuando se coloca el cursor sobre ellas

Ahora puedes colocar 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 vínculo a su ubicación en el código fuente.

Vista previa de las propiedades de clases o funciones cuando se coloca el cursor sobre ellas

Error de Chromium: 1049947

Marcos presentados de forma parcial en el panel Rendimiento

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

Anteriormente, el cronograma de Frames visualizaba los fotogramas con trabajo retrasado del subproceso principal como "fotogramas descartados". Sin embargo, hay casos en los que algunos fotogramas aún pueden producir actualizaciones visuales (p.ej., desplazamiento) controladas por el subproceso del compositor.

Esto genera confusión en los usuarios, ya que las capturas de pantalla de estos “fotogramas descartados” siguen reflejando actualizaciones visuales.

El nuevo "Marcos presentados parcialmente" tiene como objetivo indicar de forma más intuitiva que, si bien 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.

Marcos presentados de forma parcial en el panel Rendimiento

Problema de Chromium: 1261130

Otros aspectos destacados

Estas son algunas correcciones destacadas en 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 agente de usuario con iPhone OS 13_2_3. (1289553)
  • Ahora puedes guardar fragmentos directamente como archivos JavaScript. Anteriormente, debías agregar la extensión de archivo .js de forma manual. (1137218)
  • Ahora, el panel Fuentes muestra correctamente los nombres de las variables de alcance cuando se depura con el mapa de origen. Anteriormente, el panel Fuentes mostraba nombres de variables de alcance reducidos a pesar de que se proporcionaba un mapa de origen. (1294682)
  • El panel Fuentes 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 durante 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 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools