Novedades de Herramientas para desarrolladores (Chrome 95)

Jecelyn Yeen

Nuevas herramientas de creación de longitud de CSS

Las Herramientas para desarrolladores agregaron una forma más fácil y flexible de actualizar las longitudes en CSS.

En el panel Estilos, busca cualquier propiedad de CSS con longitud (p.ej., height, padding).

Coloca el cursor sobre el tipo de unidad y observa que está subrayado. Haz clic en ella para seleccionar un tipo de unidad del menú desplegable.

Coloca el cursor sobre el valor de la unidad y el puntero del mouse cambiará a un cursor horizontal. Arrastra horizontalmente para aumentar o disminuir el valor. Para ajustar el valor en 10, mantén presionada la tecla Mayúsculas mientras arrastras.

Aún puede editar el valor unitario como texto. Para ello, simplemente haga clic en el valor y comience a editarlo.

Problemas de Chromium: 1126178, 1172993

Cómo ocultar problemas en la pestaña Problemas

Ahora puedes ocultar problemas específicos en la pestaña Problemas para enfocarte solo en los que te interesan.

En la pestaña Problemas, coloca el cursor sobre el problema que deseas ocultar. Haz clic en Más opciones     > Ocultar problemas como este.

Todos los problemas ocultos se agregarán al panel Problemas ocultos (Hidden issues). Expande el panel. Puedes mostrar todos los problemas ocultos o uno seleccionado.

Error de Chromium: 1175722

Se mejoró la visualización de las propiedades

DevTools mejora la visualización de las propiedades de las siguientes maneras:

• Siempre debes destacar y ordenar primero las propiedades propias en Console, el panel Fuentes y el panel Propiedades.
• Aplana la visualización de las propiedades en el panel Properties.

Por ejemplo, el siguiente fragmento crea un objeto link de URL con 2 propiedades propias: user y access, y actualiza el valor de una propiedad heredada search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Intenta registrar link en la consola. Las propiedades propias ahora aparecen en negrita y se ordenan primero. Estos cambios facilitan la detección de propiedades personalizadas, en especial para las APIs web (p.ej., URL) con muchas propiedades heredadas.

Además de estos cambios, las propiedades del panel Properties también se aplanaron para mejorar la experiencia de depuración de propiedades del DOM, en especial para los componentes web.

Problemas de Chromium: 1076820, 1119900

Lighthouse 8.4 en el panel de Lighthouse

El panel de Lighthouse ahora ejecuta Lighthouse 8.4. Lighthouse ahora detectará si el elemento Largest Contentful Paint (LCP) era una imagen cargada de forma diferida y recomendará quitarle el atributo loading.

Consulta Novedades de Lighthouse 8.4 para obtener más detalles sobre las actualizaciones.

Error de Chromium: 772558

Ordena los fragmentos en el panel de fuentes

Los fragmentos del panel Fragmentos, que se encuentra en el panel Fuentes, ahora se ordenan alfabéticamente. Anteriormente, no se ordenaba.

Utiliza la función de fragmentos para ejecutar comandos más rápido. Mira este video para obtener una sugerencia.

Error de Chromium: 1243976

Nuevos vínculos a las notas de la versión traducidas y cómo informar un error de traducción

Ahora puedes hacer clic para leer las notas de la versión de DevTools en otros 6 idiomas: ruso, chino, español, japonés, portugués y coreano en la pestaña Novedades.

A partir de Chrome 94, puedes configurar tu idioma preferido en Herramientas para desarrolladores. Si encuentras algún problema con las traducciones, ayúdanos a mejorarlas informando un problema de traducción a través de Más opciones > Ayuda > Informar un error de traducción.

Problemas de Chromium: 1246245, 1245481

IU mejorada para el menú de comandos de DevTools

¿Te resultó difícil buscar un archivo en el menú de comandos? ¡Buenas noticias! Se mejoró la interfaz de usuario del menú de comandos.

Abre el menú de comandos para buscar un archivo con la combinación de teclas Control + P en Windows y Linux, o Comando + P en macOS.

Las mejoras de la IU del menú de comandos aún están en curso. No te pierdas las novedades.

Problema de Chromium: 1201997

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 Herramientas para desarrolladores de Chrome

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.
• Para informar un problema de Herramientas para desarrolladores, usa more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.

Novedades de DevTools

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