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

Figura 1. Es el comportamiento anterior del autocompletado. DevTools se autocompleta en filter: blur y no se ve ningún cambio 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.

Problema de Chromium pertinente: #931145

Cómo borrar los datos del sitio 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, Web SQL, Cookies, Caché y Caché de aplicación.

Figura 3. Comando Clear Site Data

Borrar los datos del sitio está disponible en Aplicación > Borrar almacenamiento desde hace un tiempo. La nueva función de Chrome 75 permite ejecutar el comando desde el menú de comandos.

Si no quieres borrar todos los datos del sitio, puedes controlar qué datos se borran en Application > Clear Storage.

Figura 4. Aplicación > Borrar almacenamiento

Problema de Chromium pertinente: #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, Herramientas para desarrolladores muestra las bases de datos de IndexedDB para todos los orígenes.

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

Figura 6. Es el comportamiento nuevo. Se muestran las bases de datos de la demostración.

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 red. Tu sitio utiliza la compresión de texto para reducir el tamaño de transferencia de los recursos. Quieres ver qué tan grandes son 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 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 de Chromium pertinente: #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, las Herramientas para desarrolladores te permiten especificar cuándo exactamente debe detenerse en un punto de interrupción, como este: al principio 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 crearás 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 breakpoint intercalado tiene su propia entrada en el panel Breakpoints.

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

Figura 9. Es el comportamiento nuevo. Hay 3 entradas en el panel Puntos de interrupción.

Problema de Chromium pertinente: #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 caché.

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

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

Parámetro de configuración para inhabilitar la inspección detallada de la información sobre la herramienta

En Chrome 73, se introdujeron sugerencias detalladas cuando se está 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 sugerencias detalladas desde Configuración > Preferencias > Elementos > Mostrar sugerencia detallada de la herramienta de inspección.

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

Error de Chromium pertinente: #948417

Parámetro de 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 de teclado presionaba la tecla Tab en el Editor, no podía salir de él porque la tecla Tab se usaba para la sangría. Para anular el comportamiento predeterminado y usar la tecla Tab para mover el enfoque, habilita Configuración > Preferencias > Fuentes > Habilitar la tecla Tab para mover el enfoque.

Recientemente, se ha trabajado mucho para que la IU de DevTools sea más navegable con el teclado. Consulta el video de Rob Navigate Chrome DevTools With Assistive Technology 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 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