Qué hay de nuevo en DevTools (Chrome 95)

Published on Updated on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias Miguel Ángel por la traducción y Carlos Caballero por la revisión.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Nuevas herramientas para cambiar medidas en CSS

¡DevTools ha añadido una forma fácil pero flexible de cambiar medidas en CSS!

En la pestaña Estilos, busca cualquier propiedad CSS con medida (por ejemplo, height, padding).

Pasa el ratón por encima de la unidad y nota que la unidad está subrayada. Haz clic en ella para seleccionar una unidad desde el desplegable.

Si sitúas el ratón sobre el valor de la unidad, el puntero cambiará a un cursor horizontal. Arrastra horizontalmente para aumentar o disminuir el valor. Para ajustar el valor en 10, mantén pulsada la tecla Mayúsculas al arrastrar.

Todavía puedes editar el valor de la unidad como texto — sólo haz clic en el valor y empieza a editar.

Chromium issues: 1126178, 1172993

Oculta problemas en la pestaña Problemas

Ahora puedes ocultar problemas específicos en la pestaña Problemas para concentrarte sólo en aquellos problemas que te interesan.

En la pestaña Problemas, desliza el puntero del ratón sobre un problema que quieres ocultar. Haz clic en Más opciones   Más   > Oculta problemas como este.

Menú de ocultar problemas

Todos los problemas ocultos se añadirán a la pestaña Problemas ocultos. Expande la pestaña. Puedes mostrar todos los problemas ocultos o uno seleccionado.

Pestaña de Problemas Ocultos

Chromium issue: 1175722

Mejora la visualización de propiedades

DevTools mejora la visualización de propiedades:

  • Siempre en negrita y ordena las propiedades propias primero en el panel Consola, Fuentes y Propiedades.
  • Aplana la visualización de propiedades en la pestaña Propiedades.

Por ejemplo, el fragmento de código siguiente 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 están en negrita y ordenadas primero. Estos cambios hacen más fácil identificar propiedades personalizadas, especialmente para API Web (e.g. URL) con muchas propiedades heredadas.

Las propiedades propias están en negritas y ordenadas primero.

Además de estos cambios, las propiedades de la pestaña Propiedades también se aplanan para una mejor experiencia de depuración de propiedades del DOM, especialmente para componentes Web.

Propiedades aplanadas

Chromium issues: 1076820, 1119900

Lighthouse 8.4 en el panel Lighthouse

El panel Lighthouse está usando Lighthouse 8.4. Lighthouse detectará ahora si el elemento Largest Containful Paint (LCP) era una imagen con carga diferida y recomendará eliminar el atributo loading de ella.

Revisa las Novedades de Lighthouse 8.4 para más detalles sobre los cambios.

La auditoría del LCP con carga diferida en el reporte de Lighthouse

Chromium issue: 772558

Ordena los fragmentos en el panel Fuentes

Los fragmentos de código en la pestaña Fragmentos bajo el panel Fuentes están ordenados ahora alfabéticamente. Antes no lo estaba.

Utiliza la característica de fragmentos para ejecutar comandos más rápido. ¡Mira este vídeo para ver un ejemplo!

Ordena los fragmentos de código en el panel Fragmentos

Chromium issue: 1243976

Nuevos enlaces a las notas de la versión traducida y reporta un error de traducción

Ahora puedes hacer clic para leer las notas de la versión de DevTools en 6 otros idiomas - Ruso, Chino, Español, Japonés, Portugués y Coreano a través de la pestaña ¿Qué hay de nuevo?.

Desde Chrome 94, puedes establecer tu idioma preferido en DevTools. Si encuentras algún problema con las traducciones, ayúdanos a mejorarlas reportando un problema de traducción a través de Más opciones > Ayuda > Reportar un problema de traducción.

Nuevos enlaces a las notas de la versión traducida y la posibilidad de reportar un error de traducción

Chromium issues: 1246245, 1245481

Mejorado el menú de comandos de DevTools

Has encontrado que es difícil buscar un archivo en el Menú de comandos? ¡Buenas noticias para ti, la interfaz de usuario del Menú de comandos se ha mejorado!

Abre el Menú de comandos para buscar un archivo con atajo de teclado Control+P en Windows y Linux, o Comando+P en macOS.

Las mejoras de la interfaz de usuario del Menú de comandos aún están en progreso. ¡Mantente al tanto de más actualizaciones!

Menú de comandos

Chromium issue: 1201997

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.