Novedades de Herramientas para desarrolladores (Chrome 89)

Asistencia para la depuración de incumplimientos de Trusted Types

Punto de interrupción en incumplimientos de Trusted Types

Ahora puedes establecer puntos de interrupción y detectar excepciones en los incumplimientos de tipos de confianza en el panel Fuentes.

La API de Trusted Types te ayuda a evitar vulnerabilidades de secuencias de comandos entre sitios basadas en DOM. Aquí puedes obtener más información para escribir, revisar y mantener aplicaciones sin vulnerabilidades de XSS basadas en DOM con Trusted Types.

En el panel Fuentes, abre el panel lateral del depurador. Expande la sección Interrupciones de incumplimientos de CSP y habilita la casilla de verificación Incumplimientos de Trusted Types para pausar las excepciones. Pruébalo con esta página de demostración.

Error de Chromium: 1142804

Vincula el problema del panel Sources a la pestaña Issues

En el panel Fuentes, ahora se muestra un ícono de advertencia junto a la línea que incumple el tipo de confianza. Coloca el cursor sobre ella para obtener una vista previa de la excepción. Haz clic en ella para expandir la pestaña Problemas, que proporciona más detalles sobre las excepciones y orientación para corregirlas.

Error de Chromium: 1150883

Tomar una captura de pantalla del nodo más allá de la ventana gráfica

Ahora puedes capturar capturas de pantalla de nodos para un nodo completo, incluido el contenido que se encuentra debajo del pliegue. Anteriormente, la captura de pantalla se cortaba para el contenido que no era visible en el viewport. Las capturas de pantalla de página completa ahora también son precisas.

En el panel Elements, haz clic con el botón derecho en un elemento y selecciona Capture node screenshot.

Error de Chromium: 1003629

Nueva pestaña de Trust Tokens para las solicitudes de red

Inspecciona las solicitudes de red de Trust Tokens con la nueva pestaña Trust Tokens.

Trust Token es una nueva API que ayuda a combatir el fraude y distinguir a los bots de los seres humanos reales, sin realizar un seguimiento pasivo. Obtén más información para comenzar a usar Trust Tokens.

En las próximas versiones, se incluirá más compatibilidad con la depuración.

Error de Chromium: 1126824

Lighthouse 7 en el panel de Lighthouse

El panel Lighthouse ahora ejecuta Lighthouse 7. Consulta las notas de la versión para obtener una lista completa de los cambios.

Nuevas auditorías en Lighthouse 7:

• Precarga la imagen del procesamiento de imagen con contenido más grande (LCP). Audita si la imagen que usa el elemento LCP se precarga para mejorar el tiempo de LCP.
• Problemas registrados en el panel Issues Indica una lista de problemas sin resolver en el panel Issues.
• Apps web progresivas (AWP). La categoría de PWA cambió de forma bastante significativa.

• El grupo Instalable ahora se basa por completo en las verificaciones de capacidades que habilitan los criterios de instalabilidad de Chrome. Estos son los mismos indicadores que se ven en el panel de manifiesto.

  • La auditoría "Registra un trabajador de servicio…" se mueve al grupo PWA Optimized, y la auditoría "Usa HTTPS" ahora se incluye como parte de la auditoría clave "Requisitos de instalación".
  • Se quitará el grupo Rápida y confiable. Como la auditoría renovada de "requisitos de instalación" incluye la verificación de la capacidad sin conexión, se quitó la auditoría "La página actual y start_url responden con un código de estado HTTP 200 cuando no hay conexión". También se quitó la auditoría "La carga de la página es lo suficientemente rápida en las redes móviles".

Error de Chromium: 772558

Actualizaciones del panel de elementos

Se agregó compatibilidad para forzar el estado :target de CSS.

Ahora puedes usar las Herramientas para desarrolladores para forzar e inspeccionar el estado :target de CSS.

En el panel Elementos, selecciona un elemento y activa o desactiva su estado. Habilita la casilla de verificación :target para forzar e inspeccionar los diseños.

Usa la seudoclase :target para aplicar un diseño al elemento cuando el hash de la URL y el ID de un elemento son iguales. Consulta esta demostración para probarlo. Esta nueva función de Herramientas para desarrolladores te permite probar esos estilos sin tener que cambiar la URL manualmente todo el tiempo.

Error de Chromium: 1156628

Nuevo acceso directo para duplicar elementos

Usa la nueva combinación de teclas Duplicar elemento para clonar un elemento al instante.

Haz clic con el botón derecho en un elemento del panel Elements y selecciona Duplicate element. Se creará un elemento nuevo debajo de él.

También puedes duplicar elementos con combinaciones de teclas:

• Mac: Shift + Option + ⬇️
• Windows y Linux: Shift + Alt + ⬇️

Problemas de Chromium: 1150797, 1150797

Selectores de color para propiedades de CSS personalizadas

El panel Estilos ahora muestra selectores de color para las propiedades de CSS personalizadas.

Además, puedes mantener presionada la tecla Shift y hacer clic en el selector de color para alternar entre las representaciones RGBA, HSLA y hexadecimales del valor de color.

Problema de Chromium: 1147016

Nuevos atajos para copiar propiedades de CSS

Ahora puedes copiar propiedades de CSS más rápido con algunos atajos nuevos.

En el panel Elementos, selecciona un elemento. Luego, haz clic con el botón derecho en una clase o propiedad de CSS en el panel Estilos para copiar el valor.

Opciones de copia para la clase CSS:

• Selector de copias. Copia el nombre del selector actual.
• Copiar regla Copia la regla del selector actual.
• Copiar todas las declaraciones: Copia todas las declaraciones de la regla actual, incluidas las propiedades no válidas y con prefijo.

Opciones de copia para la propiedad CSS:

• Copiar declaración Copia la declaración de la línea actual.
• Copiar propiedad Copia la propiedad de la línea actual.
• Copiar valor: Copia el valor de la línea actual.

Error de Chromium: 1152391

Actualizaciones de cookies

Nueva opción para mostrar las cookies decodificadas por URL

Ahora puedes optar por ver el valor de las cookies decodificado por URL en el panel Cookies.

Ve al panel Application y selecciona el panel Cookies. Selecciona cualquier cookie de la lista. Habilita la nueva casilla de verificación Mostrar valores decodificados de URL para ver la cookie decodificada.

Error de Chromium: 997625

Borra solo las cookies visibles

El botón Borrar todas las cookies del panel Cookies ahora se reemplazó por el botón Borrar cookies filtradas.

En el panel Application > panel Cookies, ingresa texto en el cuadro de texto para filtrar las cookies. En nuestro ejemplo, filtramos la lista por "PREF". Haz clic en el botón Borrar cookies filtradas para borrar las cookies visibles. Borra el texto del filtro y verás que las demás cookies permanecen en la lista. Anteriormente, solo tenías la opción de borrar todas las cookies.

Error de Chromium: 978059

Nueva opción para borrar cookies de terceros en el panel Storage

Cuando borras los datos del sitio en el panel Storage, Herramientas para desarrolladores ahora borra solo las cookies propias de forma predeterminada. Habilita la opción incluidas las cookies de terceros para borrar también las cookies de terceros.

Problema de Chromium: 1012337

Cómo editar las sugerencias de clientes de User-Agent para dispositivos personalizados

Ahora puedes editar las sugerencias de clientes de User-Agent para dispositivos personalizados.

Ve a Configuración > Dispositivos y haz clic en Agregar dispositivo personalizado…. Expande la sección Sugerencias de clientes de usuario-agente para editar las sugerencias de clientes.

Las Client Hints de usuario-agente son una alternativa a la cadena de usuario-agente que permite a los desarrolladores acceder a información sobre el navegador de un usuario de una manera ergonómica y que preserva la privacidad. Obtén más información sobre los User-Agent Client Hints en web.dev/user-agent-client-hints/.

Error de Chromium: 1073909

Actualizaciones del panel de red

Persiste el parámetro de configuración "Grabar el registro de red"

Las Herramientas para desarrolladores ahora conservan el parámetro de configuración "Registrar registro de red". Anteriormente, las Herramientas para desarrolladores restablecían la elección del usuario cada vez que se volvía a cargar una página.

Problema de Chromium: 1122580

Cómo ver las conexiones de WebTransport en el panel de red

Ahora, el panel Network muestra las conexiones de WebTransport.

WebTransport es una nueva API que ofrece mensajería bidireccional cliente-servidor de baja latencia. Obtén más información sobre sus casos de uso y cómo enviar comentarios sobre el futuro de la implementación en web.dev/webtransport/.

Error de Chromium: 1152290

Se cambió el nombre de "En línea" a "Sin limitación"

Se cambió el nombre de la opción de emulación de red "En línea" a "Sin limitación".

Error de Chromium: 1028078

Nuevas opciones de copia en la consola, el panel Fuentes y el panel Estilos

Nuevos atajos para copiar objetos en los paneles Console y Sources

Ahora puedes copiar valores de objetos con los nuevos atajos en los paneles Console y Sources. Esto es útil, en especial, cuando tienes un objeto grande (p.ej., un array largo) para copiar.

Problemas de Chromium: 1149859, 1148353

Nuevos atajos para copiar el nombre del archivo en el panel Sources y el panel Styles

Ahora puedes copiar el nombre del archivo haciendo clic con el botón derecho en lo siguiente:

• Un archivo en el panel Fuentes
• El nombre del archivo en el panel Styles del panel Elements

Selecciona Copiar nombre de archivo en el menú contextual para copiar el nombre del archivo.

Problema de Chromium: 1155120

Actualizaciones de la vista de detalles del fotograma

Nueva información de Service Workers en la vista Detalles del frame

Las Herramientas para desarrolladores ahora muestran service workers dedicados en el marco que los crea.

En el panel Aplicación, expande un marco con trabajadores de servicio y, luego, selecciona un trabajador de servicio en el árbol Trabajadores de servicio para ver los detalles.

Problema de Chromium: 1122507

Cómo medir la información de memoria en la vista Detalles del fotograma

El estado de la API de performance.measureMemory() ahora se muestra en la sección Disponibilidad de la API.

La nueva API de performance.measureMemory() estima el uso de memoria de toda la página web. Obtén información para supervisar el uso total de memoria de tu página web con esta nueva API en este artículo.

Error de Chromium: 1139899

Cómo proporcionar comentarios desde la pestaña Problemas

Si alguna vez quieres mejorar un mensaje de problema, ve a la pestaña Problemas desde Console o Más parámetros de configuración > Más herramientas > Problemas > para abrir la pestaña Problemas. Expande un mensaje de problema y haz clic en ¿Te resultó útil este mensaje del problema?. Luego, podrás proporcionar comentarios en la ventana emergente.

Fotogramas descartados en el panel Rendimiento

Cuando analizas el rendimiento de la carga en el panel Rendimiento, la sección Frames ahora marca los fotogramas descartados en rojo. Coloca el cursor sobre él para conocer la velocidad de fotogramas.

Error de Chromium: 1075865

Cómo emular dispositivos plegables y con pantalla doble en el modo de dispositivo

Ahora puedes emular dispositivos plegables y de doble pantalla en DevTools.

Después de habilitar la barra de herramientas de dispositivos, selecciona uno de los siguientes dispositivos: Surface Duo o Samsung Galaxy Fold.

Haz clic en el nuevo ícono de tramo para alternar entre las posturas de pantalla única o plegada y de pantalla doble o desplegada.

También puedes habilitar las funciones experimentales de la plataforma web para acceder a la nueva función de medios CSS screen-spanning y a la API de JavaScript getWindowSegments. El ícono experimental muestra el estado de la marca Funciones experimentales de la plataforma web. El ícono se destaca cuando la marca está activada. Navega a chrome://flags y activa el parámetro.

Error de Chromium: 1054281

Funciones experimentales

Automatiza las pruebas del navegador con Puppeteer Recorder

Ahora, las Herramientas para desarrolladores pueden generar secuencias de comandos de Puppeteer basadas en tu interacción con el navegador, lo que te facilita la automatización de las pruebas del navegador. Puppeteer es una biblioteca de Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium a través del protocolo de DevTools.

Ve a esta página de demostración. Abre el panel Fuentes en Herramientas para desarrolladores. Selecciona la pestaña Grabación en el panel izquierdo. Agrega una nueva grabación y asígnale un nombre al archivo (p.ej., test01.js).

Haz clic en el botón Grabar que se encuentra en la parte inferior para comenzar a grabar la interacción. Intenta completar el formulario en pantalla. Observa que los comandos de Puppeteer se agregan al archivo según corresponda. Vuelve a hacer clic en el botón Grabar para detener la grabación.

Para ejecutar la secuencia de comandos, sigue la guía de inicio en el sitio oficial de Puppeteer.

Ten en cuenta que este es un experimento en etapa inicial. Tenemos previsto mejorar y ampliar la funcionalidad de Grabadora con el tiempo.

Error de Chromium: 1144127

Editor de fuentes en el panel Styles

El nuevo editor de fuentes es un editor emergente en el panel Styles para las propiedades relacionadas con las fuentes que te ayuda a encontrar la tipografía perfecta para tu página web.

La ventana emergente proporciona una IU clara para manipular la tipografía de forma dinámica con una serie de tipos de entrada intuitivos.

Error de Chromium: 1093229

Herramientas de depuración de Flexbox de CSS

Desde la última versión, las Herramientas para desarrolladores agregaron compatibilidad experimental para la depuración de flexbox.

Ahora las Herramientas para desarrolladores dibujan una línea guía para ayudarte a visualizar mejor la propiedad align-items de CSS. También se admite la propiedad gap de CSS. En nuestro ejemplo, tenemos CSS gap: 12px;. Observa el patrón de sombreado de cada brecha.

Error de Chromium: 1139949

Nueva pestaña de incumplimientos de CSP

Consulta todos los incumplimientos de la Política de Seguridad del Contenido (CSP) de un vistazo en la nueva pestaña Incumplimientos de CSP. Esta nueva pestaña es un experimento que debería facilitar el trabajo con páginas web que tienen una gran cantidad de incumplimientos de CSP y de Trusted Types.

Error de Chromium: 1137837

Nuevo cálculo del contraste de color: Algoritmo avanzado de contraste perceptual (APCA)

El Algoritmo avanzado de contraste perceptual (APCA) reemplazará la proporción de contraste de los lineamientos AA/AAA en el selector de color.

El APCA es una nueva forma de calcular el contraste basada en investigaciones modernas sobre la percepción del color. En comparación con los lineamientos de AA/AAA, el APCA depende más del contexto. El contraste se calcula en función de las propiedades espaciales del texto (peso y tamaño de la fuente), el color (diferencia de luminosidad percibida entre el texto y el fondo) y el contexto (luz ambiental, entorno y propósito previsto del texto).

En el ejemplo, se muestra que el umbral de la APCA es del 38%. La relación de contraste debe cumplir o superar el valor indicado. Este valor se calcula en función del peso y el tamaño de la fuente, y se hace referencia a esta tabla de búsqueda de APCA.

Problema de Chromium: 1121900

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores