Novedades de Herramientas para desarrolladores (Chrome 75)

Kayce Basques
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 se autocompletan propiedades como filter, las Herramientas para desarrolladores ahora se 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 el cambio se puede ver en el viewport.

Nuevo comportamiento de autocompletar.

Figura 2. Nuevo comportamiento de autocompletar. Herramientas para desarrolladores se autocompleta a 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ús + P (Mac) para abrir el menú de comandos y ejecutar El comando Borrar datos del sitio para borrar todos los datos relacionados con la página, incluidos los service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Caché, y Caché de aplicación.

El comando Borrar datos del sitio.

Figura 3. El comando Borrar datos del sitio

Para borrar los datos del sitio, ve a Aplicación > Libera espacio de almacenamiento por un tiempo. La nueva herramienta de Chrome 75 es poder ejecutar el comando desde el menú Comandos.

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

Aplicación pestaña con “Liberar espacio de almacenamiento” seleccionado.

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 el origen principal. Por ejemplo, si tenías una <iframe> en tu página y esa <iframe> usaba IndexedDB, no podrás ver sus bases de datos. A partir de Chrome 75, Herramientas para desarrolladores muestra IndexedDB. bases de datos de 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 bases de datos. sean 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 la compresión de texto para lo siguiente: reducir el tamaño de transferencia de los recursos. Deseas ver el tamaño de los recursos de la página después de la navegador los descomprime. Anteriormente, esta información solo estaba disponible cuando se usaba grandes solicitudes filas. 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 cuándo debe pausarse exactamente en un punto de interrupción. de la siguiente manera: al comienzo de la línea, antes de que se llame a document.querySelector('#dante'). antes de llamar a addEventListener('click', logWarning). Si habilitas las 3, esencialmente 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 recibe su propia entrada en la 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 la 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 > Elements > Mostrar información detallada sobre la 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. Cuando se activa un teclado usuario con pestañas en el Editor, no tenía forma de salir de la pestaña porque la tecla Tab estaba para la sangría. Para anular el comportamiento predeterminado y usar la tecla de Tabulación para mover el enfoque, habilita Configuración > Preferencias > Fuentes > Habilita el enfoque para mover las pestañas.

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 plataformas 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.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.