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 él para seleccionar un tipo de unidad en el menú desplegable.

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

Aún puedes editar el valor de la unidad como texto. Para ello, haz clic en el valor y comienza 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. Expande el panel. Puedes mostrar todos los problemas ocultos o uno seleccionado.

Error de Chromium: 1175722

Se mejoró la visualización de las propiedades.

Las Herramientas para desarrolladores mejoran la visualización de las propiedades de la siguiente manera:

• Siempre se muestran en negrita y se ordenan primero las propiedades propias en los paneles Console y Sources, y en el panel Properties.
• Aplanar la visualización de propiedades en el panel Propiedades

Por ejemplo, el siguiente fragmento crea un objeto URL link 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 están en negrita y se ordenan primero. Estos cambios facilitan la identificación de las 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 ahora también se aplanan para brindar una mejor experiencia de depuración de las propiedades del DOM, en especial para los componentes web.

Problemas de Chromium: 1076820, 1119900

Lighthouse 8.4 en el panel de Lighthouse

El panel Lighthouse ahora ejecuta Lighthouse 8.4. Ahora Lighthouse 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

Cómo ordenar fragmentos en el panel Fuentes

Los fragmentos del panel Fragmentos que se encuentra debajo del panel Fuentes ahora están ordenados 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 para informar errores 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.

Desde Chrome 94, puedes establecer tu idioma de preferencia en las Herramientas para desarrolladores. Si encontraste algún problema con las traducciones, ayúdanos a mejorar el servicio informando un problema de traducción a través de Más opciones > Ayuda > Informa un error de traducción.

Problemas de Chromium: 1246245, 1245481

Se mejoró la IU del menú de comandos de Herramientas para desarrolladores

¿Te resultó difícil buscar un archivo en el menú de comandos? Tenemos buenas noticias: la interfaz de usuario del Menú de comandos ahora está mejorada.

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 en la IU del Menú de comandos aún están en curso. No te pierdas las próximas actualizaciones.

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 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las 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 DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores