Qué hay de nuevo en DevTools (Chrome 103)

Published on Updated on

Translated to: English, 한국어

Gracias por la traducción Miguel Ángel y Carlos Caballero por la revisión.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

## Captura de eventos de doble-click y clic derecho en el panel Grabación

El panel Grabación puede capturar ahora eventos de doble-click y clic derecho.

Captura de eventos de doble-click y clic derecho en el panel Grabación

En este ejemplo, comience una grabación e intente realizar los siguientes pasos:

  • Doble-clic en la tarjeta para ampliarla
  • Clic derecho en la tarjeta y seleccione una acción del menú contextual

Para entender como la Grabadora capturó estos eventos, expanda los pasos:

  • Doble-clic se captura como type: doubleClick.
  • El evento de Clic derecho se captura como type: click pero con la propiedad button establecida a secondary. El valor button de un clic normal del ratón es primary.

Chromium issues: 1300839, 1322879, 1299701, 1323688

## Nuevos modos de tiempo e instantánea en el panel Lighthouse

Ahora puedes usar Lighthouse para medir el rendimiento de su sitio web más allá del tiempo de carga de página.

Nuevos modos de tiempo e instantánea en el panel Lighthouse

El panel Lighthouse ahora soporta 3 modos de medida de flujo de usuario:

  • Los reportes de Navegación analizan una sola carga de página. La navegación es el tipo de reporte más común. Todos los reportes de Lighthouse antes de la versión actual son reportes de navegación.
  • Los reportes de Tiempo analizan un periodo arbitrario de tiempo, que normalmente contiene interacciones de usuario.
  • Los reportes de Instantánea analizan la página en un estado particular, que normalmente se produce después de que el usuario interactúa con ella.

Por ejemplo, veamos el rendimiento de añadir elementos al carrito en esta página de demostración. Seleccione el modo Tiempo y haga clic en Iniciar tiempo. Desplácese y añada algunos elementos al carrito. Una vez haya terminado, haga clic en Finalizar tiempo para generar un reporte de Lighthouse de las interacciones de usuario.

Modo tiempo

Vea flujos de usuario en Lighthouse para aprender sobre los casos de uso únicos, los beneficios y las limitaciones de cada modo.

Chromium issue: 1291284

Actualizaciones en Consejos de Rendimiento {: #performance } -->

### Mejora en el control de zoom en el panel de Consejos de Rendimiento

DevTools ahora ampliará según el cursor de su ratón en vez de la posición de la reproducción. Con la última ampliación basada en el cursor, puede mover el ratón en cualquier parte en la pista, y ampliar hasta el área deseada inmediatamente.

Vea Consejos de Rendimiento para aprender cómo obtener consejos accionables y mejorar el rendimiento de su sitio web con el panel.

Chromium issue: 1313382

Confirmar para eliminar de una grabación de rendimiento

DevTools ahora muestra un diálogo de confirmación antes de eliminar una grabación de rendimiento.

Confirmar para eliminar de una grabación de rendimiento

Chromium issue: 1318087

Reordene los paneles en el panel de elementos

Ahora puede reordenar los paneles en el panel de elementos según su preferencia.

Por ejemplo, cuando abra DevTools en una pantalla estrecha, el panel de Accesibilidad está oculto bajo el botón Mostrar más. Si usted depura frecuentemente problemas de accesibilidad, puede arrastrar el panel hacia delante para un acceso más fácil.

Reordene los paneles en el panel de elementos

Chromium issue: 1146146

Eligiendo un color fuera del navegador

DevTools ahora soporta elegir un color fuera del navegador. Previamente, sólo podía elegir un color dentro del navegador.

En el panel Estilos, haga clic en cualquier previsualización de color para abrir un selector de color. Use el selector para elegir color desde cualquier parte.

Eligiendo un color fuera del navegador

Chromium issue: 1245191

Mejorada previsualización de valor en línea durante la depuración

El depurador ahora muestra la previsualización de valores en línea correctamente.

En este ejemplo, la función double tiene como parámetro de entrada a y una variable x. Ponga un punto de ruptura en la línea de retorno y ejecute el código. La previsualización en línea muestra los valores a y x correctamente. Previamente, el depurador no mostraba el valor x en la previsualización en línea.

Mejorada previsualización de valor en línea durante la depuración

Chromium issue: 1316340

Soporte para grandes bloques para autenticadores virtuales

La pestaña WebAuthn ahora tiene la nueva casilla de verificación Soporta gran bloque para autenticadores virtuales.

Esta casilla está desactivada por defecto. La puede activar sólo para los autenticadores con el protocolo ctap2 que soportan claves residentes.

Soporte para grandes bloques para autenticadores virtuales

Chromium issue: 1321803

Nuevos atajos de teclado en el panel Fuentes

Dos nuevos atajos de teclado están disponibles en el panel Fuentes:

  • Alterne la barra lateral navegación (izquierda) con Control / Comando + Mayúscula + Y
  • Alterne la barra lateral depurador (derecha) con Control / Comando + Mayúscula + H
Nuevos atajos de teclado en el panel Fuentes

Chromium issues: 1226363

Mejoras en los sourcemaps

Previamente, la experiencia de los desarrolladores se veía afectada de forma aleatoria por:

  • Depurar con un ejemplo Codepen
  • Identificar la ubicación de origen de un problema de rendimiento en un ejemplo Codepen
  • Falta de la pestaña Componente cuando React DevTools está habilitado

Aquí hay algunos arreglos en los sourcemaps para mejorar la experiencia general de depuración:

  • Mapeado correcto entre la ubicación y el desplazamiento de la ubicación de origen para los scripts en línea
  • Uso de información de respaldo para la ubicación de texto del marco
  • Resuelve urls relativas con la URL del marco correctamente

Chromium issues: 1319828, 1318635, 1305475

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.