Novedades de Herramientas para desarrolladores (Chrome 95)

Jecelyn Yeen

Nuevas herramientas para crear longitudes 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 se convertirá en un cursor horizontal. Arrastra horizontalmente para aumentar o disminuir el valor. Para ajustar el valor en un valor 10, mantén presionada la tecla Mayúsculas mientras lo 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

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 un problema que quieras ocultar. Haz clic en Más opciones   > Oculta problemas como estos.

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.

Problema de Chromium: 1175722

Se mejoró la visualización de propiedades.

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

• Siempre pone en negrita y ordena las propiedades propias primero en la Consola, en el panel Fuentes y en el panel Propiedades.
• Compacta la pantalla de 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 acoplan para brindar una mejor experiencia de depuración de propiedades del DOM, especialmente en el caso de 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 Containful Paint (LCP) era una imagen de carga diferida y recomendará que quites el atributo loading.

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

Problema de Chromium: 772558

Ordenar fragmentos en el panel Sources

Ahora, los fragmentos del panel Fragmentos del panel Fuentes se ordenan alfabéticamente. Antes, no estaba ordenado.

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

Problema de Chromium: 1243976

Nuevos vínculos para informar un error de traducción y agregar notas de la versión traducidas

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, en la pestaña Novedades.

A partir de Chrome 94, puedes establecer tu idioma preferido en Herramientas para desarrolladores. Si tuviste algún problema con las traducciones, ayúdanos a mejorarlo. Para ello, infórmalo en Más opciones > Ayuda > Informa un error de traducción.

Problemas de Chromium: 1246245, 1245481

IU mejorada para el menú de comandos de Herramientas para desarrolladores

¿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 en 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 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 plataforma 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   > 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.