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 repetición personalizadas que puedes incorporar en DevTools 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 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 hacer perforaciones a través de raíces sombras.

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. Registra tu interacción con los elementos en el shadow DOM e inspecciona el paso correspondiente.

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

Error 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 (incluye 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.

Cómo obtener extensiones

Explora opciones para personalizar tu experiencia de grabador, 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

No dudes en agregar tu propia extensión a la lista de Extensiones de grabador. Esperamos ver el tuyo en la lista.

Problemas de Chromium: 1417104, 1413168.

Elementos > Actualizaciones de estilos

Documentación de CSS

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

La información sobre herramientas con documentación sobre una propiedad CSS.

La información sobre herramientas también tiene un vínculo Más información que te dirige a una referencia de CSS de MDN sobre 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.

Error de Chromium: 1401107.

Compatibilidad con anidación de CSS

El panel Elementos > Estilos ahora reconoce la sintaxis de anidado de CSS y aplica estilos anidados a los elementos correctos.

Problema de Chromium: 1172985.

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

Para mejorar aún más la UX de los puntos de interrupción mejorados, 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

Console ahora te brinda vínculos de anclaje adecuados a los puntos de interrupción en los archivos de origen en lugar de las secuencias de comandos VM<number> que crea Chrome 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 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 elementos 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 que se agregan a la lista y las omite en la pila de llamadas.

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

Todas las secuencias de comandos y carpetas de la lista de elementos ignorados aparecen inhabilitadas en el árbol de archivos.

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

Si seleccionas una secuencia de comandos omitida, el botón Configurar te llevará a Configuración. Configuración > Lista de elementos omitidos. 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..

Error de Chromium: 883325.

Comenzó la baja del Generador de perfiles de JavaScript

Desde Chrome 58, el equipo de DevTools planeaba dar de baja el generador de perfiles de JavaScript y hacer que los desarrolladores de Node.js y Deno usaran el panel Rendimiento para generar perfiles del rendimiento de la CPU de JavaScript.

Esta versión (112) de Herramientas para desarrolladores comienza 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 Rendimiento para generar perfiles de la CPU.

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

Problema de Chromium: 1417647.

Emular el contraste reducido

La pestaña Renderización agrega una opción nueva 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.

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

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

Con DevTools, 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 detalles, 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.

Lighthouse > 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 heredada de Lighthouse en el modo de navegación.

Se inhabilitó la navegación heredada.

Lighthouse 10 ahora usa Moto G Power como el dispositivo de emulación predeterminado. DevTools agregó este dispositivo a Configuración. Configuración > Dispositivos.

Moto G Power en la lista de dispositivos.

Error 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 no-op (sin operación) de service worker porque pueden ralentizar la navegación, pero no sirven para nada. Ya no se requieren esos controladores para que tu sitio web se califique como una app web progresiva.

Console ahora muestra una advertencia si encuentra un controlador de recuperación sin operación en tu sitio web. Considera quitarla.

Un controlador de recuperación sin operación y la advertencia correspondiente en la consola.

Problema de Chromium: 1347319.

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

  • El panel Sources > Breakpoints ahora muestra rutas de acceso diferenciadoras junto a nombres de archivos ambiguos (1403924).
  • La sección principal del gráfico de llama del panel Rendimiento ahora designa CpuProfiler::StartProfiling como Profiler Overhead (1358602).
  • Se mejoró la finalización automática de DevTools:
    • Fuentes: Finalizaciones coherentes de cualquier palabra (1320204).
    • Consola: Arrow down selecciona la primera sugerencia y las sugerencias obtienen sugerencias de Tab (1276960).
  • DevTools agregó un punto de interrupción de receptor de eventos para permitirte hacer una pausa cuando abres una ventana de pantalla en pantalla de documentos (1315352).
  • Las Herramientas para desarrolladores configuraron una solución alternativa que muestra correctamente los artefactos del paquete web de Vue2 como JavaScript (1416562).
  • Se cambió el nombre de un parámetro de configuración de Console: Expandir automáticamente los mensajes de console.trace(). (1139616).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que los 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 ha abordado en la serie Novedades de Herramientas para desarrolladores.