Novedades de Herramientas para desarrolladores (Chrome 89)

Depuración de la compatibilidad con incumplimientos de Trusted Types

Punto de interrupción en incumplimientos de tipo de confianza

Ahora puedes establecer interrupciones y detectar excepciones en incumplimientos de tipo de confianza en el panel Sources.

La API de Trusted Types te ayuda a evitar vulnerabilidades de secuencias de comandos entre sitios basadas en DOM. Obtén información para escribir, revisar y mantener aplicaciones libres de vulnerabilidades XSS de DOM con Trusted Types aquí.

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

Punto de interrupción en incumplimientos de tipo de confianza

Problema de Chromium: 1142804

El panel Sources ahora muestra un ícono de advertencia junto a la línea que infringe el Tipo de confianza. Coloca el cursor sobre él para obtener una vista previa de la excepción. Haz clic en él para expandir la pestaña Issues, en la que encontrarás más detalles sobre las excepciones y cómo solucionarlo.

Vincula el problema en el panel Sources a la pestaña Problemas

Problema de Chromium: 1150883

Tomar una captura de pantalla del nodo más allá del viewport

Ahora puedes tomar capturas de pantalla de un nodo completo, incluido el contenido en la mitad inferior de la página. 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.

Tomar una captura de pantalla del nodo más allá del viewport

Problema de Chromium: 1003629

Nueva pestaña Trust Tokens para solicitudes de red

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

Trust Token es una API nueva que ayuda a combatir el fraude y distinguir a los bots de las personas reales, sin seguimiento pasivo. Obtén más información para comenzar a usar los tokens de confianza.

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

Nueva pestaña Trust Token para las solicitudes de red

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

Lighthouse 7 en el panel de Lighthouse

Nuevas auditorías en Lighthouse 7:

  • Precarga la imagen de Largest Contentful Paint (LCP). Audita si la imagen que usa el elemento LCP está precargada 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 la AWP cambió de forma considerable.
  • El grupo Instalable ahora funciona completamente con las verificaciones de funciones que habilitan los criterios instalables de Chrome. Estos son los mismos indicadores que se ven en el panel del manifiesto.

    • La auditoría "Registra un service worker..." se traslada al grupo Optimizado para AWP, y la auditoría "Usa HTTPS" ahora se incluye como parte de la auditoría clave de "requisitos de instalación".
    • Se quitó el grupo Rápido y confiable. Como la auditoría de "requisitos de instalación" renovada incluye la verificación de capacidad sin conexión, se quitó la auditoría de "página actual y start_url" con 200 cuando se trabaja sin conexión. También se quitó la auditoría de "La carga de la página es lo suficientemente rápida en la red móvil".

Problema de Chromium: 772558

Actualizaciones del panel de elementos

Compatibilidad para forzar el estado :target de CSS

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

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

Usa la seudoclase :target para aplicar diseño al elemento cuando el hash de la URL y el ID de un elemento sean iguales. Revisa esta demostración y pruébala por tu cuenta. Esta nueva función de Herramientas para desarrolladores te permite probar estos estilos sin tener que cambiar la URL de forma manual todo el tiempo.

forzar el estado ":target" de CSS

Problema de Chromium: 1156628

Nuevo acceso directo para duplicar elemento

Usa el nuevo acceso directo Duplicar elemento para clonar un elemento al instante.

Haz clic con el botón derecho en un elemento en el panel Elementos y selecciona Duplicar elemento. Se creará un nuevo elemento debajo de él.

También puedes duplicar el elemento con combinaciones de teclas:

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

Elemento duplicado

Problemas de Chromium: 1150797, 1150797

Selectores de color para propiedades personalizadas de CSS

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

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

Selectores de color para propiedades personalizadas de CSS

Problema de Chromium 1147016

Nuevas combinaciones de teclas para copiar propiedades de CSS

Ahora puedes copiar las propiedades de CSS más rápido con algunas combinaciones de teclas nuevas.

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

Nuevas combinaciones de teclas para copiar propiedades de CSS

Opciones de texto para la clase CSS:

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

Opciones de texto 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 (Copy value): Copia el valor de la línea actual.

Problema de Chromium: 1152391

Actualizaciones de cookies

Nueva opción para mostrar cookies decodificadas por URL

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

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

Opción para mostrar cookies decodificados de URL

Problema de Chromium: 997625

Borrar solo las cookies visibles

El botón Clear all cookies en el panel Cookies ahora se reemplaza por el botón Clear filter cookies.

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

Borrar solo las cookies visibles

Problema de Chromium: 978059

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

Cuando se borran los datos del sitio del panel Almacenamiento, 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.

Opción para borrar cookies de terceros

Problema de Chromium: 1012337

Edita User-Agent Client Hints para dispositivos personalizados

Ahora puedes editar User-Agent Client Hints para dispositivos personalizados.

Ve a Configuración > Dispositivos y haz clic en Agregar dispositivo personalizado.... Expande la sección User agent customerHints para editar las sugerencias de clientes.

Editar User-Agent Client Hints

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

Problema de Chromium: 1073909

Actualizaciones del panel de red

Conservar el parámetro de configuración "Registrar registro de red"

Las Herramientas para desarrolladores ahora conservan la configuración "Record network log". Anteriormente, las Herramientas para desarrolladores restablecían la elección del usuario cada vez que se volvía a cargar una página.

Grabar el registro de red

Problema de Chromium: 1122580

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

El panel de red ahora muestra las conexiones de WebTransport.

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

Problema de Chromium: 1152290

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

La opción de emulación de red “En línea” ahora se llama “Sin regulación”.

Grabar el registro de red

Problema de Chromium: 1028078

Nuevas opciones de copia en la consola, el panel Sources y el panel Styles

Nuevos accesos directos para copiar objetos en el panel Console y el panel Sources

Ahora puedes copiar valores de objetos con las nuevas combinaciones de teclas en el panel de la consola y de la fuente. Esto resulta útil, en especial cuando tienes que copiar un objeto grande (p.ej., un array largo).

Copiar objeto en la consola

Copiar objeto en el panel Sources

Problemas de Chromium: 1149859 y 1148353

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

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

  • un archivo en el panel Fuentes, o
  • el nombre del archivo en el panel Estilos del panel Elementos

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

Copiar el nombre del archivo en el panel Sources

Copia el nombre del archivo en el panel Estilos

Problema de Chromium: 1155120

Actualizaciones de la vista de detalles del marco

Información nueva de Service Workers en la vista de detalles de Frame

Herramientas para desarrolladores ahora muestra service worker dedicado debajo del marco que los crea.

En el panel Application, expande un marco con service workers, luego selecciona un service worker en el árbol Service Workers para ver los detalles.

Información de los Service Workers en la vista de detalles de Frame

Problema de Chromium: 1122507

Cómo medir la información de la memoria en la vista de detalles del marco

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 API nueva en este artículo.

Medir memoria

Problema de Chromium: 1139899

Cómo enviar comentarios desde la pestaña de problemas

Si en algún momento deseas mejorar el mensaje de un problema, ve a la pestaña Problemas de Console o ve a Más opciones 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 el mensaje del problema?; luego, podrás enviar comentarios en la ventana emergente.

Vínculo de comentarios sobre el problema

Pérdida de fotogramas en el panel Rendimiento

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

Pérdida de fotogramas

Problema de Chromium: 1075865

Emula el modo plegable y la pantalla doble en Device Mode

Ahora puedes emular dispositivos plegables y con pantalla doble en Herramientas para desarrolladores.

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

Haz clic en el nuevo ícono de intervalo para alternar entre las posiciones de una sola pantalla o de plegado, y de pantalla doble o desplegada.

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

Emular la pantalla doble

Problema de Chromium: 1054281

Funciones experimentales

Automatiza las pruebas del navegador con la grabadora de Puppeteer

Las Herramientas para desarrolladores ahora pueden generar secuencias de comandos de Puppeteer en función de la 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 Herramientas para desarrolladores.

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

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

Para ejecutar la secuencia de comandos, sigue la guía de introducción del sitio oficial de Puppeteer.

Ten en cuenta que este es un experimento en etapa inicial. Planeamos mejorar y expandir la funcionalidad de la grabadora con el tiempo.

Grabadora de marionetas

Problema de Chromium: 1144127

Editor de fuentes en el panel Estilos

El nuevo editor de fuentes es un editor de elementos emergentes del panel Estilos para propiedades relacionadas con la fuente que te ayudará a encontrar la tipografía perfecta para tu página web.

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

Editor de fuentes en el panel Estilos

Problema de Chromium: 1093229

Herramientas de depuración de CSS Flexbox

Las Herramientas para desarrolladores agregaron compatibilidad experimental con la depuración de flexbox desde la última versión.

Las Herramientas para desarrolladores ahora 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 gap: 12px; de CSS. Observa el patrón de sombreado para cada intervalo.

Caja flexible

Problema de Chromium: 1139949

Nueva pestaña Incumplimientos de CSP

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

Pestaña Incumplimientos de CSP

Problema de Chromium: 1137837

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

El algoritmo de contraste perceptual avanzado (APCA) reemplaza la relación de contraste de los lineamientos AA/AAA en el Selector de color.

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

APCA en el selector de color

En el ejemplo, se muestra que el umbral de la APCA es del 38%. La proporción de contraste debe cumplir o superar el valor indicado. Este valor se calcula en función del grosor y el tamaño de la fuente. Para ello, se hace referencia a esta tabla de consulta de la APCA.

Problema de Chromium: 1121900

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59