Novedades de Herramientas para desarrolladores (Chrome 100)

Jecelyn Yeen

Chrome 100

¡Aquí tenemos la versión número 100 de Chrome! Las Herramientas para desarrolladores de Chrome seguirán proporcionando herramientas confiables para que los desarrolladores compilen en la Web. Tómate un momento para explorar la pestaña Novedades para celebrar los logros.

Como de costumbre, puede hacer clic en la imagen para mirar el último video de Novedades de Herramientas para desarrolladores.

Ver y editar @compatibilidades en reglas en el panel Estilos

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

Problemas de Chromium: 1222574, 1222573

Mejoras en el panel de la grabadora

Compatibilidad con selectores comunes de forma predeterminada

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

• data-testid
• data-test
• data-qa
• datos-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, comienza una nueva grabación con esta página de demostración. Ingresa una dirección de correo electrónico y observa el valor del selector.

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

Personaliza el selector de grabación

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

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

Cómo cambiar el nombre de una grabación

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

Obtener una vista previa de las propiedades de clase o función cuando se coloca el cursor sobre un elemento

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 mostraba el nombre de la función y un vínculo a su ubicación en el código fuente.

Problema de Chromium: 1049947

Fotogramas presentados parcialmente en el panel Rendimiento

La grabación de presentación ahora muestra la nueva categoría de fotogramas "Fotogramas parcialmente presentados" en el cronograma Frames.

Anteriormente, en el cronograma Frames, se visualizaban 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) impulsadas por el subproceso del compositor.

Esto lleva a la confusión del usuario porque las capturas de pantalla de estos "Fotogramas descartados" aún reflejan actualizaciones visuales.

Nuevos "Fotogramas parcialmente presentados" tiene como objetivo indicar de manera más intuitiva que, si bien parte del contenido no se presenta oportunamente en el marco, el problema no es tan grave como para bloquear las actualizaciones visuales por completo.

Problema de Chromium: 1261130

Otros aspectos destacados

Estas son algunas correcciones notables 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 usuario-agente con el SO iPhone 13_2_3. (1289553).
• Ahora puedes guardar snippet como archivo JavaScript directamente. Anteriormente, era necesario agregar manualmente la extensión de archivo .js. (1137218).
• El panel Sources ahora muestra correctamente los nombres de las variables de alcance cuando se depuran con el mapa de fuentes. Anteriormente, el panel Sources mostraba nombres de variables de alcance reducidos a pesar de que se proporcionaba el mapa de fuentes. (1294682).
• El panel Fuentes ahora restablece correctamente la posición de desplazamiento cuando se carga la página. Anteriormente, la posición no se restablecía correctamente, lo que provocaba inconvenientes en la depuración. (1294422).

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 plataforma 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.