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 predeterminados significativos cuando se completan automáticamente las funciones de CSS

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

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.

Figura 2. El nuevo comportamiento de autocompletar DevTools completa automáticamente filter: blur(1px) y el cambio se puede ver en el viewport.

Error relevante de Chromium: #931145

Cómo borrar los datos de sitios desde el menú de comandos

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 App SQL y Borrar datos del sitio para borrar Borrar datos del sitio.

Figura 3. El comando Clear Site Data

La opción para borrar los datos del sitio está disponible desde Aplicación > Liberar espacio de almacenamiento desde hace tiempo. La nueva función de Chrome 75 es poder ejecutar el comando desde el menú de comandos.

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

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

Problema relevante de Chromium: #942503

Cómo 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 un <iframe> en tu página y ese <iframe> usara IndexedDB, no podrías ver sus bases de datos. A partir de Chrome 75, DevTools muestra las bases de datos de IndexedDB para todos los orígenes.

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

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

Problema relevante de Chromium: #943770

Cómo ver el tamaño sin comprimir de un recurso cuando se coloca el cursor sobre él

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. Quieres saber cuánto pesan los recursos de la página después de que el navegador los descomprime. Anteriormente, esta información solo estaba disponible cuando se usaban filas de solicitudes grandes. Ahora puedes acceder a esta información colocando el cursor sobre la columna Tamaño.

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

Error 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);

Desde hace un tiempo, DevTools te permite especificar cuándo se debe pausar exactamente en un punto de interrupción como este: al comienzo de la línea, antes de llamar a document.querySelector('#dante') o antes de llamar a addEventListener('click', logWarning). Si habilitas los 3, en esencia, estás creando 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.

Figura 8. El comportamiento anterior. Solo hay 1 entrada en el panel Puntos de interrupción.

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

Error relevante de Chromium: #927961

Recuentos de recursos de IndexedDB y Cache

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

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 sobre herramientas detalladas en el modo de inspección.

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

Ahora puedes inhabilitar estas indicaciones de herramientas detalladas en Configuración > Preferencias > Elementos > Mostrar la indicación de herramientas de inspección detallada.

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

Error 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 tabulación en el Editor. Una vez que un usuario del teclado presionaba la tecla Tab en el Editor, no tenía forma de salir de él porque la tecla Tab se usaba 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 para que la IU de DevTools sea más navegable con el teclado. Consulta Cómo navegar por las Herramientas para desarrolladores de Chrome con tecnología de accesibilidad de Rob para obtener más información.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que los usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de las Herramientas para desarrolladores o en los videos de YouTube con sugerencias de Herramientas para desarrolladores.

Novedades de DevTools

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