Novedades de Herramientas para desarrolladores (Chrome 91)

Ventana emergente de información de Métricas web en el panel Rendimiento

Coloca el cursor sobre un marcador de Métricas web en el panel Rendimiento para comprender de qué se trata el indicador, por ejemplo, si el rendimiento es bueno, necesita mejorar o es deficiente.

Problema de Chromium: 1147872

Visualiza el ajuste de desplazamiento de CSS

Ahora puedes activar o desactivar la insignia scroll-snap en el panel Elements para inspeccionar la alineación del ajuste de desplazamiento de CSS.

Cuando se aplica scroll-snap-type a un elemento HTML de tu página (p.ej., esta página de demo), puedes ver la insignia scroll-snap junto a él en el panel Elementos. Haz clic en la insignia para activar o desactivar la visualización de una superposición de ajuste de desplazamiento en la página.

En el ejemplo anterior, puedes ver marcas de puntos en los bordes ajustados. El puerto de desplazamiento tiene un contorno sólido, mientras que los elementos de ajuste tienen contornos de guion. El relleno del desplazamiento se rellena de color verde, mientras que el margen de desplazamiento se rellena de naranja.

Problema de Chromium: 862450

Nuevo inspector de memoria

Usa el nuevo Inspector de memoria para inspeccionar un elemento ArrayBuffer en JavaScript, además de la memoria de Wasm.

Abre esta página de demostración. En el panel Sources, abre el archivo demo-js.js y establece un punto de interrupción en la línea 18.

Actualiza la página. Expande la sección Alcance en el panel debugger de la derecha. Observa el ícono nuevo junto al valor buffer. Haz clic en él para abrir el Inspector de memoria.

Consulta la documentación para obtener más información sobre cómo inspeccionar ArrayBuffer y WebAssembly.Memory de JavaScript con este nuevo inspector de memoria.

Problema de Chromium: 1166577

Nuevo panel de configuración de insignias en el panel Elementos

Ahora puedes habilitar o inhabilitar las insignias de forma selectiva en la Configuración de insignias del panel Elementos. Usa esta función para personalizar las insignias importantes y concentrarte en ellas mientras inspeccionas páginas web.

En el panel Elementos, haz clic con el botón derecho en cualquiera de ellos. Selecciona Configuración de la insignia en el menú contextual. El panel de configuración de la insignia aparecerá en la parte superior. Habilita o inhabilita cualquier casilla de verificación para ocultar o mostrar las insignias.

Problema de Chromium: 1066772

Vista previa de imagen mejorada con información de relación de aspecto

Las vistas previas de imágenes en el panel Elements ahora muestran más información sobre la imagen: tamaño renderizado, relación de aspecto renderizada, tamaño intrínseco, relación de aspecto intrínseco y tamaño de archivo.

Esta información te ayuda a comprender mejor tus imágenes y a aplicar optimizaciones si es necesario.

La información de la relación de aspecto de la imagen también está disponible en el panel Red cuando haces clic para obtener una vista previa de la imagen.

Problemas de Chromium: 1149832, 1170656

Nuevo botón de condiciones de red con opciones para configurar Content-Encoding

Se agregará un nuevo botón de condiciones de red en el panel Red. Haz clic en él para abrir la pestaña Network conditions.

Se agrega una nueva opción de Codificación de contenido aceptada a la pestaña Condiciones de la red. Configúralo para probar si las respuestas del servidor están codificadas correctamente en navegadores que no admiten gzip, brotli ni otros Content-Encoding futuros.

Problema de Chromium: 1162042

Mejoras en el panel de estilos

Nueva combinación de teclas para ver el valor calculado en el panel Estilos

Ahora, puedes hacer clic con el botón derecho en una propiedad de CSS en el panel Estilos y seleccionar Ver valor calculado para ver el valor de CSS calculado.

Problema de Chromium: 1076198

Compatibilidad con la palabra clave accent-color

La IU de autocompletado del panel Styles ahora detecta la palabra clave de CSS accent-color, que permite a los desarrolladores web especificar el color de los elementos destacados para los controles de IU (p.ej., la casilla de verificación y el botón de selección) generados por el elemento.

La propiedad accent-color de CSS actualmente es experimental. Habilita chrome://flags/#enable-experimental-web-platform-features para probarlo.

Problema de Chromium: 1092093

Categoriza los tipos de problemas con íconos y colores

La pestaña Problemas ahora clasifica los problemas en errores de página, próximos cambios rotundos y posibles mejoras para indicar mejor la gravedad. Para abrir la pestaña Problemas, haz clic en el botón de recuento de problemas en la consola.

• Errores de la página (rojo). Problemas que afectan de inmediato la funcionalidad de la página, como no establecer los encabezados CORS correctos, etcétera.
• Próximos cambios rotundos (amarillo). Problemas que informan sobre un próximo cambio incompatible de la plataforma web que puede provocar la pérdida de la funcionalidad de la página (p.ej., una advertencia de próximos cambios en CORS RFC 1918).
• Posibles mejoras (azul). Posibles mejoras en la página, pero actualmente no afectan la funcionalidad básica de la página (p.ej., problemas de accesibilidad)

Problema de Chromium: 1183241

Borra los tokens de confianza

Ahora puedes borrar tokens de confianza con el nuevo botón Borrar en el panel Trust tokens, en el panel Application.

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

Problema de Chromium: 1126824

Ver detalles de las funciones bloqueadas en la vista Detalles del marco

Ahora puedes ver los detalles de las funciones bloqueadas en la sección Política de permisos de la vista Detalles del marco.

Abre esta página de demo. Ve al panel Aplicación y selecciona un marco. En la sección Política de Permisos, desplázate hasta la propiedad Funciones inhabilitadas. Haz clic en Mostrar detalles para ver los detalles de por qué se bloqueó la función. Haz clic en el ícono junto a cada política para navegar al iframe o la solicitud de red que bloqueó la función.

La política de permisos es una API de plataforma web que le brinda a un sitio web la capacidad de permitir o bloquear el uso de funciones del navegador en su propio marco o en iframes que incorpora.

Problema de Chromium: 1158827

Cómo filtrar experimentos en el parámetro de configuración Experimentos

Encuentra experimentos más rápido con el nuevo filtro de experimentos. Por ejemplo, ve a Configuración > Experimentos (Experiments), en el cuadro de texto Filtro, escribe “contraste”. para filtrar todos los experimentos con la palabra “contraste”.

Nueva columna Vary Header en el panel de almacenamiento en caché

Usa la nueva columna Vary Header en el panel Cache Storage para ver el encabezado de respuesta HTTP Vary.

Problema de Chromium: 1186049

Mejoras en el panel de fuentes

Compatibilidad con funciones nuevas de JavaScript

Las Herramientas para desarrolladores ahora son compatibles con la nueva función de lenguaje JavaScript de verificación de marca privada, también conocida como #foo in obj.

Esta función de verificaciones de marca privada extiende el operador in para admitir las pruebas de campos de clase privada en cualquier objeto determinado.

Pruébala en el panel Console y Fuentes. También puedes inspeccionar los campos privados en la sección Scope del panel debugger.

Problema de Chromium: 11374

Compatibilidad mejorada para la depuración de puntos de interrupción

Las Herramientas para desarrolladores ahora establecieron correctamente los puntos de interrupción en varias secuencias de comandos. Los agrupadores modernos de JavaScript (p. ej., Webpack, Rollup) admiten la función de división de código. Hay situaciones en las que un componente compartido se puede incluir en varias rutas (divisiones de código).

Anteriormente, Herramientas para desarrolladores solo podía establecer puntos de interrupción en una ubicación sin procesar. Con esta mejora más reciente, las Herramientas para desarrolladores pueden establecer puntos de interrupción en todas las ubicaciones relevantes de manera correcta.

Problemas de Chromium: 1142705, 979000, 1180794

Admitir vista previa al colocar el cursor sobre un elemento con la notación []

Las Herramientas para desarrolladores ahora admiten la vista previa al colocar el cursor sobre las expresiones de miembros de JavaScript que usan la notación [] en el panel Fuentes.

Problema de Chromium: 1178305

Contorno mejorado de los archivos HTML

Las Herramientas para desarrolladores ahora tienen una mejor compatibilidad con esquemas para archivos HTML. En el panel Fuentes, abre un archivo HTML. Puedes activar o desactivar el esquema del código con las teclas Cmd + Mayúsculas + O en Mac o Ctrl + Mayúsculas + O en Windows.

En el siguiente ejemplo, las Herramientas para desarrolladores ahora enumeran correctamente todas las funciones en el esquema. Anteriormente, las Herramientas para desarrolladores solo mostraban algunas de las funciones.

Problema de Chromium: 761019, 1191465

Seguimientos de pila de errores adecuados para la depuración de Wasm

Herramientas para desarrolladores ahora resuelve las llamadas a funciones intercaladas y muestra los seguimientos de pila de errores adecuados para la depuración de Wasm.

Anteriormente, Herramientas para desarrolladores solo mostraba referencias genéricas de Wasm en los seguimientos de pila de Error.

La versión anterior de Chrome a la izquierda no muestra la ubicación de origen (p.ej., dsquare) en los seguimientos de pila de Error, mientras que la nueva versión de la derecha sí.

Problema de Chromium: 1189161

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