| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
Qué hay de nuevo en DevTools (Chrome 103) |
|
2022-06-14 |
2022-06-14 |
Captura de eventos de doble-click y clic derecho en el panel Grabación, nuevas opciones para medir el flujo de usuario en Lighthouse y más. |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/Q9pEKY4SizIKKYpJJriL.jpg |
|
Gracias por la traducción Miguel Ángel y Carlos Caballero por la revisión.
{% Partial 'devtools/banner.md' %}
{% YouTube id='LyMts4yfQu8' %}
El panel Grabación puede capturar ahora eventos de doble-click y clic derecho.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/qsleBCUrr2twMujW0R94.png", alt="Captura de eventos de doble-click y clic derecho en el panel Grabación", width="800", height="572" %}
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: clickpero con la propiedadbuttonestablecida asecondary. El valorbuttonde un clic normal del ratón esprimary.
Chromium issues: 1300839, 1322879, 1299701, 1323688
Ahora puedes usar Lighthouse para medir el rendimiento de su sitio web más allá del tiempo de carga de página.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3GGcCxlOGrnXLMfp0t9y.png", alt="Nuevos modos de tiempo e instantánea en el panel Lighthouse", width="800", height="507" %}
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/pq9Vg8xOUzplWAlXGJEa.png", alt="Modo tiempo", width="800", height="549" %}
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
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.
{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/U8d1PjOFZuGkyOXHQ5Z8.mp4", autoplay=true, loop=true, class="screenshot" %}
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
DevTools ahora muestra un diálogo de confirmación antes de eliminar una grabación de rendimiento.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DaoCroAA60WmMLpuVU9P.png", alt="Confirmar para eliminar de una grabación de rendimiento", width="800", height="549" %}
Chromium issue: 1318087
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/hcaQzMTxecNyw4RY0PMX.png", alt="Reordene los paneles en el panel de elementos", width="800", height="616" %}
Chromium issue: 1146146
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/JAp1UdPCnWNduuNadLVz.png", alt="Eligiendo un color fuera del navegador", width="800", height="450", class="screenshot" %}
Chromium issue: 1245191
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/XMHyRsyK24fWLK7o72K7.png", alt="Mejorada previsualización de valor en línea durante la depuración", width="800", height="534" %}
Chromium issue: 1316340
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/m58oDW2ZwCMxX6zoUoJM.png", alt="Soporte para grandes bloques para autenticadores virtuales", width="800", height="601" %}
Chromium issue: 1321803
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
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1PacYBEm9DoSeW7iai8M.png", alt="Nuevos atajos de teclado en el panel Fuentes", width="800", height="494" %}
Chromium issues: 1226363
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 source maps 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
{# https://chromium.googlesource.com/v8/v8/+/d821a6a373ecf086a2ef0d233ace7f3431e47732 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/9d3d33e0bde8357d58a3c4981dd016e9b9c553f3 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/04a58f2837c1ec9e78bd722bbe81e9cd7ab38727 #}
Chromium issues: 1319828, 1318635, 1305475
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}