Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 95)

Jecelyn Yeen

Nuevas herramientas para la creación de longitudes de CSS

Herramientas para desarrolladores agregó una forma más fácil y flexible de actualizar 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 aparece subrayado. Haz clic en él para seleccionar un tipo de unidad en el menú desplegable.

Coloca el cursor sobre el valor de la unidad y el puntero del mouse se cambiará al 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 puedes editar el valor de la unidad como texto. Simplemente haz clic en el valor y comienza a editarlo.

Problemas de Chromium: 1126178 y 1172993

Ocultar problemas en la pestaña Problemas

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

En la pestaña Problemas, coloca el cursor sobre el problema que quieres 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 solo uno seleccionado.

Panel de problemas ocultos

Problema de Chromium: 1175722

Se mejoró la visualización de las propiedades.

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

Siempre aplica negrita y ordena las propiedades primero en la consola, el panel Fuentes y el panel Propiedades.
Acopla la pantalla 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 aparecen en negrita y se ordenan primero. Estos cambios facilitan la detección de propiedades personalizadas, especialmente para las APIs web (p.ej., URL) con muchas propiedades heredadas.

Las propiedades propias aparecen en negrita y se ordenan primero

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

Compactar propiedades

Problemas de Chromium: 1076820 y 1119900

Lighthouse 8.4 en el panel de Lighthouse

El panel Lighthouse ahora ejecuta Lighthouse 8.4. Lighthouse ahora detectará si el elemento Largest Containful Paint (LCP) era una imagen de carga diferida y recomendaría quitar de ella el atributo loading.

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

La auditoría de LCP de carga diferida en un informe de Lighthouse

Problema de Chromium: 772558

Ordenar fragmentos en el panel de fuentes

Los fragmentos del panel Fragmentos debajo del panel Fuentes ahora aparecerán ordenados alfabéticamente. Anteriormente, no están ordenados.

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

Ordenar fragmentos en el panel de fuentes

Problema de Chromium: 1243976

Nuevos vínculos a notas de la versión traducidas y, además, informa un error de traducción

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

A partir de Chrome 94, puede configurar su idioma preferido en Herramientas para desarrolladores. Si detectaste algún problema con las traducciones, ayúdanos a mejorarlo. Para ello, informa un problema de traducción en Más opciones > Ayuda > Informar un error de traducción.

Nuevos vínculos a notas de la versión traducidas y, además, informa un error de traducción

Problemas de Chromium: 1246245 y 1245481

¿Te resultó difícil buscar un archivo en el menú de comandos? Tenemos buenas noticias: ahora 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 en la IU del menú de comandos aún están en curso. Pronto habrá más actualizaciones.

Problema de Chromium: 1201997

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).