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

Novedades de Herramientas para desarrolladores (Chrome 75)

Kayce Basques

¡Hola! Estas son las novedades de las Herramientas para desarrolladores de Chrome en Chrome 75.

Versión en video de esta página

Valores preestablecidos significativos cuando se completan automáticamente las funciones de CSS

Algunas propiedades de CSS, como filter, toman funciones para los valores. Por ejemplo, filter: blur(1px) agrega un desenfoque de 1 píxel a un nodo. Cuando autocompletas propiedades como filter, las Herramientas para desarrolladores ahora propagan la propiedad con un valor significativo para que puedas obtener una vista previa del tipo de cambio que tendrá el valor en el nodo.

El comportamiento anterior de autocompletar.

Figura 1: El comportamiento anterior de autocompletar. Herramientas para desarrolladores se completa automáticamente en filter: blur y no se ven cambios en el viewport.

Nuevo comportamiento de autocompletar.

Figura 2. Nuevo comportamiento de autocompletar. Herramientas para desarrolladores se completa automáticamente en filter: blur(1px) y el cambio se puede ver en el viewport.

Problema relevante de Chromium: #931145

Borrar los datos del sitio desde el menú Comando

Presiona Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos y, luego, ejecuta el comando Borrar datos del sitio para borrar todos los datos relacionados con la página, incluidos los siguientes: Service workers, localStorage, sessionStorage, IndexedDB, Web1 yWeb1 App1} Web1 de la página y Borrar datos del sitio

El comando Borrar datos del sitio.

Figura 3. El comando Borrar datos del sitio

Para borrar los datos del sitio, ve a Aplicación > Liberar espacio de almacenamiento por un tiempo. La nueva función de Chrome 75 es la capacidad de ejecutar el comando desde el menú de comandos.

Si no quieres borrar todos los datos de los sitios, puedes controlar qué datos se borran en Aplicación > Liberar espacio de almacenamiento.

Pestaña “Aplicación” con la opción “Liberar espacio de almacenamiento” seleccionada.

Figura 4. Aplicación > Liberar espacio de almacenamiento.

Problema relevante de Chromium: #942503

Ver todas las bases de datos de IndexedDB

Anteriormente, Aplicación > IndexedDB solo te permitía inspeccionar bases de datos de IndexedDB desde el origen principal. Por ejemplo, si tuvieras una <iframe> en tu página y esa <iframe> usara IndexedDB, no podrás ver sus bases de datos. A partir de Chrome 75, las Herramientas para desarrolladores muestran bases de datos IndexedDB para todos los orígenes.

El comportamiento anterior. La página incorpora una demostración que usa IndexedDB, pero no hay bases de datos visibles.

Figura 5. El comportamiento anterior. La página incorpora una demostración que usa IndexedDB, pero no hay bases de datos visibles.

El comportamiento nuevo. Las bases de datos de la demostración son visibles.

Figura 6. El comportamiento nuevo. Las bases de datos de la demostración son visibles.

Problema relevante de Chromium: #943770

Consulta el tamaño sin comprimir de un recurso con solo colocar el cursor sobre el elemento

Supongamos que inspeccionas la actividad de la red. Tu sitio usa compresión de texto para reducir el tamaño de transferencia de los recursos. Deseas ver el tamaño de los recursos de la página después de que el navegador los descomprime. Antes, esta información solo estaba disponible cuando se usaban filas de solicitud grandes. Ahora puedes acceder a esta información colocando el cursor sobre la columna Tamaño.

Coloca el cursor sobre la columna Tamaño para ver el tamaño sin comprimir de un recurso.

Figura 7: Coloca el cursor sobre la columna Tamaño para ver el tamaño sin comprimir de un recurso.

Problema relevante de Chromium: #805429

Puntos de interrupción intercalados en el panel de puntos de interrupción

Supongamos que agregas un punto de interrupción de línea de código a la siguiente línea de código:

document.querySelector('#dante').addEventListener('click', logWarning);

Hace un tiempo, Herramientas para desarrolladores te permite especificar en qué momento exactamente debe pausarse en un punto de interrupción como este: al comienzo de la línea, antes de que se llame a document.querySelector('#dante') o antes de que se llame a addEventListener('click', logWarning). Si habilitas los 3, básicamente creas 3 puntos de interrupción. Anteriormente, el panel Breakpoints no te permitía administrar estos 3 puntos de interrupción de forma individual. A partir de Chrome 75, cada punto de interrupción intercalado tiene su propia entrada en el panel Breakpoints.

El comportamiento anterior. Solo hay una entrada en el panel Breakpoints.

Figura 8: El comportamiento anterior. Solo hay 1 entrada en el panel Breakpoints.

El comportamiento nuevo. Hay 3 entradas en el panel Breakpoints.

Figura 9: El comportamiento nuevo. Hay 3 entradas en el panel Breakpoints.

Problema relevante de Chromium: #927961

Recuentos de recursos de IndexedDB y Cache

Los paneles IndexedDB y Cache ahora indican la cantidad total de recursos en una base de datos o caché.

Entradas totales en una base de datos de IndexedDB.

Figura 10: Entradas totales en una base de datos de IndexedDB.

Problemas relevantes de Chromium: #941197, #930773, #930865

Parámetro de configuración para inhabilitar el cuadro de información de inspección detallada

Chrome 73 introdujo información detallada sobre la herramienta en el modo de inspección.

Información detallada sobre la herramienta.

Figura 11: Información detallada sobre la herramienta que muestra el color, la fuente, el margen y el contraste.

Ahora puedes inhabilitar esta información detallada sobre la herramienta en Configuración > Preferencias > Elementos > Mostrar información detallada de inspección.

Información mínima sobre la herramienta.

Figura 12: Cuadro de información mínimo que solo muestra el ancho y la altura.

Problema relevante de Chromium: #948417

Parámetro de configuración para activar o desactivar la sangría de tabulación en el editor del panel de fuentes

Las pruebas de accesibilidad revelaron que había una trampa de pestañas en el Editor. Una vez que un usuario de teclado incluyó una pestaña en el Editor, no tenía forma de salir de la pestaña porque se usaba la tecla Tab para la sangría. Para anular el comportamiento predeterminado y usar Tab para mover el enfoque, habilita Configuración > Preferencias > Fuentes > Habilitar el enfoque de movimientos de pestaña.

Recientemente, se trabajó mucho en lograr que la IU de Herramientas para desarrolladores sea más fácil de navegar con el teclado. Para obtener más información, consulta el artículo de Rob sobre Cómo navegar las Herramientas para desarrolladores de Chrome con tecnología asistencial.

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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.