Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 96)

Jecelyn Yeen

Función de vista previa: Nuevo panel Resumen de CSS

Usa el nuevo panel Resumen de CSS para identificar posibles mejoras del CSS en tu página. Abre el panel Descripción general de CSS y, luego, haz clic en Capturar descripción general para generar un informe del CSS de tu página.

Puedes desglosar aún más la información. Por ejemplo, haz clic en un color de la sección Colores para ver la lista de elementos que aplican el mismo color. Haz clic en un elemento para abrirlo en el panel Elementos.

El panel Resumen de CSS es una función de vista previa. Nuestro equipo sigue trabajando activamente en el tema y estamos esperando tus comentarios para poder mejorar.

Lee este artículo para obtener más información sobre el panel Descripción general de CSS.

Panel Resumen de CSS

Problema de Chromium: 1254557

Experiencia de edición y copia de la longitud de CSS restablecida y mejorada

Las experiencias copiar CSS y editar como texto se restablecen para las propiedades de CSS con longitud. Estas experiencias se vieron afectadas en la última versión.

Además, puedes arrastrar para ajustar el valor de la unidad y actualizar el tipo de unidad a través del menú desplegable. Esta función de creación de longitud de complemento no debería afectar la experiencia de edición principal como texto.

Si encuentras algún problema, infórmalo a través de goo.gle/length-feedback.

Puedes inhabilitarla desde Configuración > Experimentos > Habilita las herramientas de creación de longitudes de CSS en la casilla de verificación del panel Estilos.

Problemas de Chromium: 1259088, 1172993

Actualizaciones de la pestaña Renderización

Emular la función de medios de preferencia de contraste de CSS

La función multimedia prefers-contrast se usa para detectar si el usuario solicitó más o menos contraste en la página.

Abre el menú de comandos, ejecuta el comando Show Rendering y, luego, configura el menú desplegable Emulate CSS media feature prefers-contrast.

Problema de Chromium: 1139777

Emula la función del Tema oscuro automático de Chrome

Usa las Herramientas para desarrolladores para emular el tema oscuro automático y ver fácilmente cómo se ve tu página cuando está habilitado el Tema oscuro automático de Chrome.

Chrome 96 presenta una prueba de origen para el Tema oscuro automático en Android. Con esta función, el navegador aplica un tema oscuro generado automáticamente para los sitios con tema claro cuando el usuario habilita los temas oscuros en el sistema operativo.

Abre el menú de comandos, ejecuta el comando Show Rendering y, luego, configura el menú desplegable Emulate auto oscuro mode.

Emula la función del Tema oscuro automático de Chrome

Problema de Chromium: 1243309

Cómo copiar declaraciones como JavaScript en el panel Estilos

Se agregaron dos opciones nuevas al menú contextual para que copies fácilmente las reglas CSS como propiedades de JavaScript. Estas opciones de combinaciones de teclas son útiles especialmente para los desarrolladores que trabajan con bibliotecas CSS en JS.

En el panel Estilos, haz clic con el botón derecho en una regla de CSS. Puedes seleccionar Copiar declaración como JS para copiar una sola regla o Copiar todas las declaraciones como JS para copiar todas las reglas.

En el siguiente ejemplo, se copiará paddingLeft: '1.5rem' en el portapapeles.

Copiar declaración como JavaScript

Problema de Chromium: 1253635

Nueva pestaña Carga útil en el panel Red

Usa la nueva pestaña Carga útil en el panel Red cuando inspecciones una solicitud de red con carga útil. Anteriormente, la información de la carga útil estaba disponible en la pestaña Encabezados.

Pestaña Carga útil en el panel Red

Problema de Chromium: 1214030

Se mejoró la visualización de propiedades en el panel Propiedades.

El panel Properties ahora muestra solo las propiedades relevantes en lugar de todas las propiedades de la instancia. Los prototipos y métodos del DOM ahora se han eliminado.

Junto con las mejoras del panel Propiedades de Chrome 95, ahora puede ubicar las propiedades relevantes con mayor facilidad.

Visualización de propiedades en el panel Properties

Problema de Chromium: 1226262

Actualizaciones de Console

Opción para ocultar errores de CORS en la consola

Puedes ocultar los errores de CORS en la consola. Como los errores de CORS ahora se informan en la pestaña Problemas, ocultar los errores de CORS en la consola puede ayudar a reducir el desorden.

En la consola, haz clic en el ícono de Configuración y desmarca la casilla de verificación Mostrar errores de CORS en la consola.

Opción para ocultar errores de CORS en la consola

Problema de Chromium: 1251176

Vista previa y evaluación correctas de los objetos `Intl` en la consola

Los objetos Intl ahora tienen una vista previa adecuada y se evalúan con anticipación en la consola. Anteriormente, los objetos Intl no se evaluaban con anticipación.

Objetos internacionales en la consola

Problema de Chromium: 1073804

Seguimientos de pila asíncronos y coherentes

Ahora, la consola informa seguimientos de pila async para que las funciones async sean coherentes con otras tareas asíncronas y sean coherentes con lo que se muestra en la pila de llamadas.

seguimientos de pila asíncronos

Problema de Chromium: 1254259

La barra lateral de la consola llegó para quedarse. En Chrome 94, anunciamos la próxima baja de la barra lateral de la consola y les pedimos a los desarrolladores que nos enviaran comentarios y dudas.

Recibimos suficientes comentarios sobre el aviso de baja y trabajaremos para mejorar la barra lateral en lugar de quitarla.

Barra lateral de la consola

Problemas de Chromium: 1232937, 1255586

Panel de la caché de la aplicación obsoleto en el panel Application

Se quitó el panel Caché de la aplicación del panel Aplicaciones, ya que se quitó la compatibilidad con AppCache en Chrome y otros navegadores basados en Chromium.

Problema de Chromium: 1084190

[Experimental] Nuevo panel de la API de Reporting en el panel Application

La API de Reporting está diseñada para ayudarte a supervisar los incumplimientos de seguridad de tu página, las llamadas a la API obsoletas y mucho más.

Con este experimento habilitado, ahora puedes ver el estado de los informes en el nuevo panel API de informes en el panel Aplicación.

Ten en cuenta que la sección Extremos aún está en desarrollo activo (por el momento, no se muestran extremos de informes).

Consulta este artículo para obtener más información sobre la API de Reporting.

Panel de la API de Reporting en el panel Application

Problema de Chromium: 1205856

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.