Novedades de Herramientas para desarrolladores (Chrome 112)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Actualizaciones de la Grabadora

Compatibilidad con extensiones de repetición

La Grabadora ahora admite opciones de reproducción personalizadas que puedes incorporar a las Herramientas para desarrolladores con una extensión.

Prueba la extensión de ejemplo. Selecciona la nueva opción de repetición personalizada para abrir la IU de repetición personalizada.

IU de repetición personalizada

Para personalizar la Grabadora según tus necesidades y, luego, integrarla con tus herramientas, considera desarrollar tu propia extensión: explora la API de chrome.devtools.recorder y consulta más ejemplos de extensiones.

Problema de Chromium: 1400243.

Graba con selectores de intersección

Además de los selectores personalizados, CSS, ARIA, de texto y XPath, ahora puedes grabar con selectores de penetración. Estos selectores se comportan como los de CSS, pero también pueden atravesar raíces ocultas.

Inicia una nueva grabación en una página con Shadow DOM y marca Casilla de verificación. Pierce en Tipos de selectores para grabar. Graba tu interacción con los elementos del DOM de sombra y, luego, inspecciona el paso correspondiente.

Configuración de la Grabadora para usar selectores de perforación; selector de perforación en acción

Problema de Chromium: 1411188.

Exporta como una secuencia de comandos de Puppeteer con análisis de Lighthouse

La Grabadora presenta una nueva opción de exportación: Puppeteer (incluido el análisis de Lighthouse). Con Puppeteer, puedes automatizar y controlar Chrome. Con Lighthouse, puedes capturar y mejorar el rendimiento de tu sitio web.

Abre la grabación, haz clic en Exportar. Exportar, selecciona la nueva opción y guarda el archivo .js.

Exporta Puppeteer (incluido el análisis de Lighthouse).

Ejecuta la secuencia de comandos de Puppeteer para obtener un informe de Lighthouse en un archivo flow.report.html.

Se abrió el informe de Lighthouse en Chrome.

Obtener extensiones

Explora opciones para personalizar tu experiencia con la grabadora, por ejemplo, con opciones de exportación personalizadas. Para obtener extensiones para la Grabadora, haz clic en Exportar. Exportar > Obtener extensiones en una grabación.

La opción Obtener extensiones en el menú desplegable Exportar

Puedes agregar tu propia extensión a la lista de Extensiones de Grabador. Esperamos ver el tuyo en la lista.

Problemas de Chromium: 1417104 y 1413168.

Elementos > Actualizaciones de diseño

Documentación de CSS

¿Cuántas veces al día consultas la documentación sobre las propiedades de CSS? El panel Elements > Styles ahora muestra una breve descripción cuando colocas el cursor sobre una propiedad.

Es la información sobre herramientas con documentación sobre una propiedad de CSS.

La información sobre herramientas también tiene un vínculo Más información que te lleva a una referencia de CSS de MDN sobre esta propiedad.

Si conoces bien CSS, es posible que las sugerencias te resulten molestas. Para desactivarlas todas, marca Casilla de verificación. No mostrar.

Para volver a activarlas, marca Configuración. Configuración > Preferencias > Elementos > Casilla de verificación. Mostrar la sugerencia de documentación de CSS.

Error de Chromium: 1401107.

Compatibilidad con el anidamiento de CSS

El panel Elements > Styles ahora reconoce la sintaxis de anidamiento de CSS y aplica los estilos anidados a los elementos correctos.

Error de Chromium: 1172985.

Cómo marcar puntos de registro y puntos de interrupción condicionales en la consola

Para mejorar aún más la UX de los puntos de interrupción mejorados, la consola ahora marca los mensajes activados por los puntos de interrupción:

Se realizaron cambios en la forma en que la consola ahora muestra los mensajes activados por los puntos de interrupción: con íconos y el vínculo de origen adecuado.

Ahora, la consola te proporciona vínculos de anclaje adecuados a los puntos de interrupción en los archivos fuente en lugar de secuencias de comandos VM<number> que Chrome crea para ejecutar cualquier fragmento de JavaScript en V8.

Haz clic en el vínculo junto al mensaje del punto de interrupción para ir directamente al editor de puntos de interrupción.

El vínculo de anclaje junto a un mensaje de punto de registro que abre el editor de puntos de interrupción.

Error de Chromium: 1027458.

Ignora las secuencias de comandos irrelevantes durante la depuración

Para ayudarte a enfocarte en las partes más importantes de tu código, ahora puedes agregar secuencias de comandos irrelevantes a la Lista de ignorados directamente desde el árbol de archivos en el panel Fuentes > Página.

Haz clic con el botón derecho en cualquier secuencia de comandos o carpeta, y selecciona una de las opciones relacionadas con ignorar. Es posible que veas opciones para agregar o quitar la secuencia de comandos o la carpeta de la lista. El depurador ignora las secuencias de comandos agregadas a la lista y las omite en la pila de llamadas.

Menús contextuales de una carpeta y un guion con opciones relacionadas con la ignorancia

Todos los scripts y las carpetas incluidos en la lista de ignorados aparecen en gris en el árbol de archivos.

Las carpetas y los secuencias de comandos incluidos en la lista de ignorados aparecen en gris. Puedes ocultarlos con una opción experimental en el menú desplegable Más opciones.

Si seleccionas un script ignorado, el botón Configurar te llevará a Configuración. Configuración > Lista de ignorados. También puedes ocultar las fuentes ignoradas del árbol de archivos con Menú de tres puntos. > Ocultar las fuentes de la lista de elementos ignorados Experimental..

Error de Chromium: 883325.

Se inició la baja del generador de perfiles de JavaScript

Desde Chrome 58, el equipo de Herramientas para desarrolladores planeó, con el tiempo, desaprobar el Perfilador de JavaScript y hacer que los desarrolladores de Node.js y Deno usen el panel Rendimiento para generar perfiles del rendimiento de la CPU de JavaScript.

En esta versión de Herramientas para desarrolladores (112), se inicia la baja del Generador de perfiles de JavaScript en cuatro fases. El panel Generador de perfiles de JavaScript ahora muestra el banner de advertencia correspondiente.

Banner de baja en la parte superior de Profiler.

En lugar de Profiler, usa el panel Rendimiento para generar perfiles de la CPU.

Obtén más información y envía comentarios en el RFC y crbug.com/1354548 correspondientes.

Error de Chromium: 1417647

Emular el contraste reducido

La pestaña Renderización agrega una nueva opción a la lista Emular deficiencias de visión: Contraste reducido. Con esta opción, puedes descubrir cómo se ve tu sitio web para las personas con sensibilidad reducida al contraste.

Opción de contraste reducido seleccionada en la función &quot;Emular deficiencias de visión&quot;.

Ten en cuenta que las opciones de la lista se actualizaron para indicarte qué insensibilidad al color representan.

Con las Herramientas para desarrolladores, puedes encontrar y corregir todos los problemas de contraste a la vez. Para obtener más información, consulta Cómo hacer que tu sitio web sea más legible.

Problemas de Chromium: 1412719 y 1412721.

Lighthouse 10

Ahora, el panel Lighthouse ejecuta Lighthouse 10.0.1. Para obtener más detalles, consulta Novedades de Lighthouse 10.0.1.

Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.

Lighthouse > Configuración. > Casilla de verificación vacía. Navegación heredada ahora está inhabilitada de forma predeterminada. Esta opción usa la configuración de Lighthouse heredada en el modo de navegación.

Se inhabilitó la navegación heredada.

Lighthouse 10 ahora usa el Moto G Power como el dispositivo de emulación predeterminado. Las Herramientas para desarrolladores agregaron este dispositivo a Configuración. Configuración > Dispositivos.

Moto G Power en la lista de dispositivos

Error de Chromium: 772558.

Advertencia de la consola para quitar el controlador de recuperación del Service Worker no operativo

Chrome 112 omite los controladores de recuperación de Service Worker no operativos (sin operación) porque pueden ralentizar la navegación, pero no cumplen ningún propósito. Ya no se requieren esos controladores para que tu sitio web se considere una app web progresiva.

La consola ahora muestra una advertencia si encuentra un controlador de recuperación no operativo en tu sitio web. Considera quitarlo.

Un controlador de recuperación no operativo y la advertencia correspondiente en la consola.

Problema de Chromium: 1347319.

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

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