Qué hay de nuevo en DevTools (Chrome 96)

Published on Updated on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias Carlos Caballero por la traducción y Miguel Ángel por la revisión.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Función de vista previa: Nuevo panel de Descripción General de CSS

Utilice el nuevo panel Descripción General de CSS / Resumen de CSS para identificar posibles mejoras de CSS en su página. Abra el panel Descripción general de CSS / Resumen de CSS, luego haga clic en Capture overview para generar un informe del CSS de su página.

Puede profundizar más en la información. Por ejemplo, haga clic en un color en la sección Colores para ver la lista de elementos que aplican el mismo color. Haga clic en un elemento para abrir el elemento en el panel Elementos.

El panel Descripción General de CSS es una función de vista previa. Nuestro equipo todavía está trabajando activamente en él y estamos buscando sus comentarios para obtener más mejoras.

Lea este artículo para obtener más información sobre el panel de Descripción General de CSS / Resumen de CSS.

Panel de Descripción General de CSS

Chromium issue: 1254557

Recuperada y mejorada las acciones de copiar y editar propiedades CSS con logintud

Las acciones de copiar CSS y editar como texto se restauran para las propiedades CSS con longitud. Estas características dejaron de funcionar en la última versión.

Además, puede arrastrar para ajustar el valor de la unidad y actualizar el tipo de unidad a través del menú desplegable. Esta funcionalidad no debería afectar a la experiencia de usuario en la acción principal editar como texto.

Informe a través de goo.gle/length-feedback si encuentra algún problema.

Puede deshabilitar esta característica vía Configuración > Experimentos > Enable CSS length authoring tools in the Styles pane.

Chromium issues: 1259088, 1172993

Actualizaciones de la pestaña de Renderizado

Emule la función multimedia CSS de contraste

Emule la función multimedia CSS de constraste

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

Abra el Menú de comandos, ejecute el comando Mostrar renderizado / Mostrar la renderización y luego configure el menú desplegable Emular la función multimedia CSS prefers-contrast

Chromium issue: 1139777

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

Use DevTools para emular el tema oscuro automático para ver fácilmente cómo se ve su página cuando el Tema oscuro automático de Chrome está habilitado.

Chrome 96 presenta una Prueba de origen para Tema oscuro automático en Android. Con esta función, el navegador aplica un tema oscuro generado automáticamente a sitios con temas claros, cuando el usuario ha optado por temas oscuros en el sistema operativo.

Abra el Menú de comandos, ejecute el comando Mostrar renderizado / Mostrar la renderización y luego configure el menú desplegable Emular modo oscuro automático.

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

Chromium issue: 1243309

Copiar declaraciones como JavaScript en el panel Estilos

Se agregan dos nuevas opciones en el menú contextual para que pueda copiar fácilmente las reglas CSS como propiedades de JavaScript. Estas opciones de atajos son útiles especialmente para los desarrolladores que están trabajando con bibliotecas CSS-in-JS.

En el panel Estilos, haga clic con el botón derecho en una regla CSS. Puede seleccionar Copiar 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á padding-left: '1.5rem' al portapapeles.

Copiar declaraciones como JavaScript

Chromium issue: 1253635

Nueva pestaña de Payload en el panel Red

Utilice la nueva pestaña Payload en el panel Red cuando inspeccione una solicitud de red con payload. Anteriormente, la información del payload estaba disponible en la pestaña Encabezados.

Pestaña Payload en el panel Red

Chromium issue: 1214030

Mejoras en la visualización de propiedades en el panel Propiedades

El panel Propiedades ahora muestra solo las propiedades relevantes en lugar de mostrar todas las propiedades de la instancia. Los prototipos y métodos DOM ahora se eliminan.

Junto con las mejoras del panel Propiedades en Chrome 95, puede localizar las propiedades relevantes más fácilmente.

La visualización de propiedades en el panel Propiedades

Chromium issue: 1226262

Actualizaciones de la consola

Opción para ocultar errores CORS en la consola

Puede 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 Consola, haz clic en el ícono Configuración y desmarca la casilla de verificación Mostrar errores de CORS en la consola.

Opción para ocultar errores CORS en la consola

Chromium issue: 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 con anticipación en la consola. Anteriormente, los objetos Intl no se evaluaban con anticipación.

Objetos Intl en la Consola

Chromium issue: 1073804

Trazas de la pila asíncrona consistentes

DevTools ahora informa de las trazas de las pilas async para que las funciones async sean consistentes con otras tareas asincrónicas.

Trazas de la pila asíncrona

Chromium issue: 1254259

Mantener la barra lateral de la consola

La barra lateral de la consola volverá a quedarse. En Chrome 94, anunciamos la desactivación de la barra lateral de la consola y pedimos a los desarrolladores comentarios y opiniones.

Ahora tenemos suficientes comentarios sobre el aviso de desactivación y trabajaremos para mejorar la barra lateral en lugar de eliminarla.

Console sidebar

Chromium issues: 1232937, 1255586

Panel de caché de la aplicación en desuso (deprecated) en el panel de la aplicación {: #app-cache } -->

El panel Caché de la aplicación en el panel de Aplicación se eliminó pues el soporte para AppCache se ha eliminado de Chrome y otros navegadores basados ​​en Chromium.

Chromium issue: 1084190

[Experimental] Nuevo panel de la API de informes en el panel de la aplicación

Para habilitar esta característica experimental, marque la casilla de verificación Enable Reporting API panel in the Application panel que encontrará en la siguiente ruta Configuración > Experimentos.

La API de informes está diseñada para ayudarlo a monitorear las violaciones de seguridad de su página, las llamadas a API obsoletas y más.

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

Tenga en cuenta que la sección Endpoints se encuentra actualmente en desarrollo activo (no muestra ningún informe de endpoints por ahora).

Obtenga más información sobre la API de informes con este artículo.

Panel de la API de informes en el panel de la aplicación

Chromium issue: 1205856

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.