Novedades de Herramientas para desarrolladores (Chrome 75)

Kayce Basques
Kayce Basques
X GitHub Error

¡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.

El comportamiento anterior de Autocomplete.

Figura 1. El comportamiento anterior de Autocomplete. DevTools completa automáticamente filter: blur y no se ve ningún cambio en la ventana de visualización.

El nuevo comportamiento de autocompletar

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 Clear Site Data para borrar todos los datos relacionados con la página, incluidos los siguientes: trabajadores en segundo plano, localStorage, sessionStorage, IndexedDB, Web SQL, cookies, caché y caché de aplicaciones.

El comando Clear Site Data

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 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.

Error relevante de Chromium: #942503

Cómo ver todas las bases de datos de IndexedDB

Anteriormente, Application > 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.

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

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

El comportamiento nuevo Se pueden ver las bases de datos de la demostración.

Figura 6. El comportamiento nuevo Se pueden ver las bases de datos de la demostración.

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

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.

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 debe detenerse 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 Puntos de interrupción 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 Puntos de interrupción.

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

El comportamiento nuevo Hay 3 entradas en el panel Breakpoints.

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

Error relevante de Chromium: #927961

Recuentos de recursos de IndexedDB y caché

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

Es el total de entradas en una base de datos de IndexedDB.

Figura 10: Es el total de entradas en una base de datos de IndexedDB.

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

Configuración para inhabilitar la información sobre la herramienta de inspección detallada

Chrome 73 introdujo información sobre herramientas detalladas en el modo de inspección.

Una información sobre la herramienta detallada.

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.

Una información sobre herramientas mínima.

Figura 12: Una información sobre herramientas mínima que solo muestra el ancho y la altura.

Error relevante de Chromium: #948417

Configuración para activar o desactivar la sangría de tabulación en el editor del panel Sources

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 Tab para mover el enfoque.

Recientemente, se trabajó mucho para que la IU de DevTools sea más navegable con el teclado. Consulta Cómo navegar por 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 versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus 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.

Novedades de DevTools

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