Novedades de Herramientas para desarrolladores (Chrome 112)

Sofia Emelianova
Sofia Emelianova

Actualizaciones de la grabadora

Compatibilidad con extensiones para volver a reproducir

La grabadora admite opciones de reproducción personalizadas que puedes incorporar en 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 reproducción personalizada

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

Problema de Chromium: 1400243.

Registro con selectores de perforación

Además de los selectores personalizados, CSS, ARIA, de texto y XPath, ahora puedes realizar grabaciones con selectores de perímetros. Estos selectores se comportan como los de CSS, pero también pueden atravesar raíces sombras.

Inicia una grabación nueva en una página con shadow DOM y marca Casilla de verificación Pierce en Tipos de selectores para grabar. Registra tu interacción con los elementos en el shadow DOM e inspecciona el paso correspondiente.

configurar la grabadora para que use selectores de perforación; Pierce el selector en acción.

Problema de Chromium: 1411188.

Exporta como una secuencia de comandos de Puppeteer con el 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 opción nueva 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.

El informe de Lighthouse abierto en Chrome.

Obtener extensiones

Explora las opciones para personalizar tu experiencia de grabación, por ejemplo, con opciones de exportación personalizadas. Obtén extensiones para la Grabadora haciendo clic en el botón 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 la grabadora. ¡Esperamos ver el tuyo en la lista!

Problemas de Chromium: 1417104, 1413168.

Elementos > Actualizaciones de diseños

documentación de CSS

¿Cuántas veces al día buscas documentación sobre las propiedades de CSS? La opción Elementos > El panel Estilos ahora muestra una descripción breve cuando colocas el cursor sobre una propiedad.

Cuadro de información con documentación sobre una propiedad de CSS.

El cuadro de información también tiene un vínculo de Más información que te lleva a una Referencia de MDN CSS en esta propiedad.

Si conoces bien CSS, la información sobre la herramienta puede resultarte molesta. Para desactivarlas todas, marca Casilla de verificación No mostrar.

Para volver a activarlas, ve a Configuración. Configuración > Preferencias > Elementos > Casilla de verificación Mostrar información sobre la documentación de CSS.

Problema de Chromium: 1401107.

Compatibilidad con la anidación de CSS

La opción Elementos > El panel Estilos ahora reconoce la sintaxis Anidamiento de CSS y aplica estilos anidados a los elementos correctos.

Problema de Chromium: 1172985.

Marca puntos de registro y puntos de interrupción condicionales en la consola

Con el objetivo de mejorar aún más la UX mejorada de los puntos de interrupción, Console ahora marca los mensajes activados por los puntos de interrupción:

Cambios en la forma en que la consola ahora muestra los mensajes activados por los puntos de interrupción: con íconos y un vínculo de origen adecuado

La consola ahora te proporciona vínculos de anclaje adecuados a los puntos de interrupción en los archivos fuente, en lugar de a las secuencias de comandos de VM<number> que crea Chrome para ejecutar cualquier parte 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.

Problema de Chromium: 1027458.

Ignora secuencias de comandos irrelevantes durante la depuración

Para ayudarte a enfocarte en las partes más importantes del código, ahora puedes agregar secuencias de comandos irrelevantes a la Lista de elementos ignorados directamente desde el árbol de archivos en Fuentes > Panel 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 Debugger ignora las secuencias de comandos agregadas a la lista y las omite en la pila de llamadas.

Menús contextuales de una carpeta y una secuencia de comandos con opciones relacionadas con la omisión

Todas las secuencias de comandos y carpetas que figuran en la lista de elementos ignorados aparecerán inhabilitadas en el árbol de archivos.

Las secuencias de comandos y las carpetas incluidas en la lista de elementos ignorados están inhabilitadas. Puede ocultarlas con una opción experimental en el menú desplegable Más opciones.

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

Problema de Chromium: 883325.

Comenzó la baja del Generador de perfiles de JavaScript

A partir de Chrome 58, el equipo de Herramientas para desarrolladores planificó dar de baja el Generador de perfiles de JavaScript y que los desarrolladores de Node.js y Deno usaran el panel Performance para perfilar el rendimiento de la CPU en JavaScript.

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

Banner de baja en la parte superior del generador de perfiles.

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

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

Problema de Chromium: 1417647.

Emular el contraste reducido

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

La opción de contraste reducido está seleccionada en “Emular las deficiencias de visión” funcionalidad.

Ten en cuenta que las opciones de lista se actualizaron para indicarte qué insensibilidad de 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, 1412721.

Lighthouse 10

El panel de Lighthouse ahora ejecuta Lighthouse 10.0.1. Para obtener más información, consulta Novedades de Lighthouse 10.0.1.

Para aprender los conceptos básicos del uso del panel de Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Faro > Configuración. Casilla de verificación vacía. La 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 Moto G Power como dispositivo de emulación predeterminado. Herramientas para desarrolladores agregó este dispositivo a Configuración. Configuración > Dispositivos.

Moto G Power en la lista de dispositivos

Problema de Chromium: 772558.

Una advertencia de Console para quitar tu controlador de recuperación de service worker no-op

Chrome 112 omite los controladores de recuperación de service workers no-op (sin operación) porque pueden ralentizar la navegación, pero no tienen un propósito. Esos controladores ya no son necesarios 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-ops en tu sitio web. Considera quitarlo.

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

Problema de Chromium: 1347319.

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

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 plataformas 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   Más > 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.