Novedades de Herramientas para desarrolladores (Chrome 96)

Jecelyn Yeen

Función de versión preliminar: Nuevo panel Resumen de CSS

Usa el nuevo panel Resumen de CSS para identificar posibles mejoras de CSS en tu página. Abre el panel Resumen de CSS y, luego, haz clic en Capturar resumen 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 ella y esperamos tus comentarios para seguir mejorándola.

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

Error de Chromium: 1254557

Se restableció y mejoró la experiencia de edición y copia de la longitud de CSS

Se restablecieron las experiencias de copiar CSS y editar como texto para las propiedades de CSS con longitud. Estas experiencias no funcionan 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 contenido adicional no debería afectar la experiencia principal de edición como texto.

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

Puedes inhabilitarlo a través de la casilla de verificación Configuración > Experimentos > Habilitar herramientas de creación de longitud de CSS en el panel Estilos.

Problemas de Chromium: 1259088, 1172993

Actualizaciones de renderización de pestañas

Emula la función de medios prefers-contrast de CSS

La función de medios 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.

Error de Chromium: 1139777

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

Usa las Herramientas para desarrolladores para emular el modo oscuro automático y ver fácilmente cómo se ve tu página cuando está habilitado el modo 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 a los sitios con tema claro cuando el usuario habilitó 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 dark mode.

Error de Chromium: 1243309

Cómo copiar declaraciones como JavaScript en el panel Styles

Se agregaron dos opciones nuevas al menú contextual para que puedas copiar fácilmente reglas de CSS como propiedades de JavaScript. Estas opciones de acceso directo son útiles, en especial, para los desarrolladores que trabajan con bibliotecas de CSS-in-JS.

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

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

Problema de Chromium: 1253635

Nueva pestaña Payload en el panel Network

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.

Error de Chromium: 1214030

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

El panel Properties ahora solo muestra las propiedades pertinentes en lugar de mostrar todas las propiedades de la instancia. Se quitaron los prototipos y métodos del DOM.

Junto con las mejoras del panel Propiedades en Chrome 95, ahora puedes ubicar las propiedades pertinentes con mayor facilidad.

Error 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, ocultarlos 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.

Error de Chromium: 1251176

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

Los objetos Intl ahora tienen una vista previa adecuada y se evalúan de forma anticipada en la consola. Anteriormente, los objetos Intl no se evaluaban de forma anticipada.

Error de Chromium: 1073804

Seguimientos de pila asíncronos coherentes

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

Error de Chromium: 1254259

Conserva la barra lateral de la consola

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 envíen sus comentarios y preocupaciones.

Ahora tenemos suficientes comentarios sobre el aviso de baja, por lo que trabajaremos para mejorar la barra lateral en lugar de quitarla.

Problemas de Chromium: 1232937, 1255586

Panel de caché de aplicaciones obsoleto en el panel de aplicaciones

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

Error 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 que dejaron de estar disponibles y mucho más.

Con este experimento habilitado, ahora puedes ver el estado de los informes en el nuevo panel de la API de Reporting en el panel de Application.

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

Obtén más información sobre la API de Reporting en este artículo.

Error de Chromium: 1205856

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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con 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 las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools