Novedades de Herramientas para desarrolladores (Chrome 112)

Actualizaciones de la grabadora

Compatibilidad con extensiones de repetición

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 con tus herramientas, considera desarrollar tu propia extensión: explora la API de chrome.devtools.recorder y consulta más ejemplos de extensiones.

Error de Chromium: 1400243.

Grabación con selectores de perforación

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

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 del shadow DOM y, luego, 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 (incluidos los 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, es posible que las sugerencias de herramientas te resulten molestas. Para desactivarlos todos, marca Casilla de verificación. No mostrar.

Para volver a activarlos, marca Configuración. Configuración > Preferencias > Elementos > Casilla de verificación. Mostrar la información sobre herramientas de 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.

Error 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:

Se realizaron cambios en la forma en que Console ahora muestra los mensajes activados por puntos de interrupción: con íconos y un vínculo de fuente 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 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 elementos ignorados directamente desde el árbol de archivos en el panel Sources > Page.

Haz clic con el botón derecho en cualquier secuencia de comandos o carpeta y selecciona una de las opciones relacionadas con la omisión. 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 una 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 las fuentes de 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 de DevTools (112) inicia la baja en cuatro fases del generador de perfiles de JavaScript. El panel 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.

Error 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 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

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

Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza 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 el controlador de recuperación de service worker sin operaciones

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

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

Error de Chromium: 1347319.

Otros aspectos destacados

Estas son algunas correcciones importantes de 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 del objeto de escucha de eventos para permitirte hacer una pausa cuando abres una ventana de pantalla en pantalla de documentos (1315352).
  • Herramientas para desarrolladores configuró una solución alternativa que muestra correctamente los artefactos de webpack 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 versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus 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 analizó en la serie Novedades de DevTools.