Novedades de Herramientas para desarrolladores (Chrome 89)

Asistencia para la depuración de incumplimientos de Trusted Types

Punto de interrupción en incumplimientos de los tipos de confianza

Ahora puedes establecer interrupciones y detectar excepciones en incumplimientos de tipo de confianza en la sección Fuentes. panel.

La API de Trusted Types te ayuda a prevenir las vulnerabilidades de secuencia de comandos entre sitios basadas en DOM. Más información para escribir, revisar y mantener aplicaciones libres de vulnerabilidades XSS del DOM con Trusted Types aquí.

En el panel Sources, abre el panel de la barra lateral debugger. Expandir la infracción de CSP Puntos de interrupción y habilita la casilla de verificación Incumplimientos de tipo de confianza para detener la campaña en la excepciones. Pruébalo con esta página de demostración.

Problema de Chromium: 1142804

Vincula el problema en el panel de fuentes a la pestaña Problemas

El panel Sources ahora muestra un ícono de advertencia junto a la línea que infringe Trusted Type. Coloca el cursor sobre para obtener una vista previa de la excepción. Haz clic en él para expandir la pestaña Problemas, que contiene más detalles excepciones y orientación para solucionarlo.

Problema de Chromium: 1150883

Hacer 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 cortó porque el contenido no era visible en el viewport. Las capturas de pantalla de la página completa están precisa ahora también.

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

Problema de Chromium: 1003629

Nueva pestaña de tokens de confianza para las solicitudes de red

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

Trust Token es una API nueva que ayuda a combatir el fraude y distinguir entre bots y seres humanos reales, sin reglas pasivas. el seguimiento de conversiones. Obtén más información para comenzar a usar tokens de confianza.

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

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 de cambios.

Nuevas auditorías en Lighthouse 7:

• Precarga la imagen de Largest Contentful Paint (LCP). Audita si la imagen utilizada por el elemento LCP se precargado para mejorar tu tiempo de LCP.
• Problemas registrados en el panel Issues. Indica una lista de problemas sin resolver en el Issues panel.
• Apps web progresivas (AWP). La categoría AWP cambió de manera bastante significativa.

• Ahora el grupo Installable se basa completamente en las comprobaciones de capacidad que habilitan las funciones criterios instalables. Estos son los mismos indicadores que se ven en el panel del manifiesto.

  • El mensaje “Registra un service worker...” de auditoría se trasladan al grupo Optimizado para AWP, y la sección "Usos HTTPS" la auditoría ahora se incluye como parte de los "requisitos de instalación" clave auditoría de Cloud.
  • Se quitó el grupo Rápido y confiable. Como los "requisitos de instalación" auditoría incluye comprobación de capacidad sin conexión, la "página actual y start_url responden con 200 cuando sin conexión" se quitó la auditoría. El mensaje "La carga de la página es lo suficientemente rápida en la red móvil" se quitó la auditoría también.

Problema de Chromium: 772558

Actualizaciones del panel de elementos

Compatibilidad para forzar el estado :target de CSS

Ahora puedes usar 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 :target. para forzar e inspeccionar los estilos.

Usa la seudoclase :target para asignarle un estilo al elemento cuando el hash en la URL y el ID de un elemento. son iguales. Mira esta demostración para probarla. Esta nueva función de Herramientas para desarrolladores te permite probar para estos estilos sin tener que cambiar la URL de forma manual todo el tiempo.

Problema de Chromium: 1156628

Nuevo acceso directo para duplicar el elemento

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

Haz clic con el botón derecho en un elemento del panel Elementos y selecciona Duplicar elemento. Un nuevo elemento crearse debajo de él.

También puedes duplicar un elemento con la combinación de teclas:

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

Problemas de Chromium: 1150797, 1150797

Selectores de color para propiedades CSS personalizadas

En el panel Estilos ahora se muestran los selectores de color para las propiedades CSS personalizadas.

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

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 propiedad de CSS el panel Estilos para copiar el valor.

Opciones de copia para la clase de CSS:

• Copiar selector. 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 declaraciones no válidas y con prefijos.

Opciones de copia de 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 decodificadas por 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.

Problema de Chromium: 997625

Borrar solo las cookies visibles

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

En el panel Aplicación > 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 Clear filter cookies para borrar las cookies visibles. Borra el texto del filtro y el resto de las cookies permanecen en la lista. Anteriormente, solo tenías la opción de borrar todas las cookies.

Problema de Chromium: 978059

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

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

Problema de Chromium: 1012337

Edita las Sugerencias de clientes de usuario-agente para dispositivos personalizados

Ahora puedes editar las Sugerencias de clientes de usuario-agente para dispositivos personalizados.

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

User-Agent Client Hints es una alternativa a la cadena de usuario-agente que permite a los desarrolladores acceder 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 Sugerencias de clientes de usuario-agente en web.dev/user-agent-client-hints/

Problema de Chromium: 1073909

Actualizaciones del panel de red

Conserva el “registro de red” estableciendo

Herramientas para desarrolladores ahora conserva la opción “Record network log” del lugar. Anteriormente, las Herramientas para desarrolladores restablecían la elección del usuario. cada vez que se vuelve a cargar una página.

Problema de Chromium: 1122580

Ver conexiones de WebTransport en el panel Red

El panel Network ahora muestra las conexiones de WebTransport.

WebTransport es una nueva API que ofrece mensajería bidireccional cliente-servidor de baja latencia. 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

“En línea” se le cambió el nombre a "Sin limitación".

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

Problema de Chromium: 1028078

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

Nuevas combinaciones de teclas para copiar objetos en la consola y en el panel de fuentes

Ahora puedes copiar valores de objetos con las nuevas combinaciones de teclas en la consola y el panel Sources. Este es especialmente cuando tienes que copiar un objeto grande (p.ej., un array largo).

Problemas de Chromium: 1149859, 1148353

Nuevos accesos directos para copiar el nombre del archivo en el panel Fuentes y en el panel Estilos

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 Estilos del panel Elementos

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 marco

Nueva información de los service workers en la vista de detalles del marco

Herramientas para desarrolladores ahora muestra service workers dedicados debajo del marco que los crea.

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

Problema de Chromium: 1122507

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

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

La nueva API de performance.measureMemory() estima el uso de memoria de toda la página web. Aprendizaje Consulta cómo supervisar el uso total de memoria de tu página web con esta nueva API en este artículo.

Problema de Chromium: 1139899

Cómo enviar comentarios desde la pestaña Problemas

Si en algún momento deseas mejorar el mensaje de un problema, ve a la pestaña Problemas en la consola o Más opciones de configuración > Más herramientas > Problemas > para abrir la pestaña Problemas. Cómo expandir un problema y haz clic en ¿Te resultó útil el mensaje del problema? para enviar comentarios la ventana emergente.

Pérdida de fotogramas en el panel Rendimiento

Cuando se analiza el rendimiento de carga en el panel Performance, ahora la sección Frames marca los fotogramas descartados se marcan en rojo. Coloca el cursor sobre ella para conocer la velocidad de fotogramas.

Problema de Chromium: 1075865

Emular dispositivos plegables y con 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 pantalla única o plegada y con pantalla doble o desplegada. de seguridad en la nube.

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

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 basadas en tu interacción con el navegador, lo que hace que facilitar la automatización de las pruebas del navegador. Puppeteer es una biblioteca de Node.js que proporciona 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 Grabación en el panel izquierdo. Agrega una nueva grabación y ponle un nombre al archivo (p.ej., prueba01.js).

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

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

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

Problema de Chromium: 1144127

Editor de fuentes en el panel Estilos

El nuevo editor de fuentes es un editor emergente en el panel Estilos para las propiedades relacionadas con fuentes, por lo que te resultará útil. a encontrar la tipografía perfecta para tu página web.

El elemento emergente proporciona una IU limpia para manipular dinámicamente la tipografía con una serie de tipos de entrada.

Problema de Chromium: 1093229

Herramientas de depuración de CSS Flexbox

Herramientas para desarrolladores agregó compatibilidad experimental para 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. El También se admite la propiedad gap de CSS. En nuestro ejemplo, tenemos CSS gap: 12px;. Observa la el patrón de sombreado para cada déficit.

Problema de Chromium: 1139949

Nueva pestaña de 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 nueva pestaña es un experimento que debería facilitar el trabajo con páginas web que contienen una gran cantidad de de infracciones de la CSP y del tipo de confianza.

Problema de Chromium: 1137837

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

El Algoritmo de contraste perceptivo avanzado (APCA) reemplaza a la AA/AAA proporción de contraste de los lineamientos en el Selector de color.

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

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

Problema de Chromium: 1121900

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.