En esta página:
- Nuevas Herramientas de Creación de Medidas CSS
- Ocultar Issues en la Pestaña Issues
- Mejora en la Visualización de Propiedades
- Versión 8.4 de Lighthouse en el Panel Lighthouse
- Ordenar Fragmentos en el Panel Sources
- Enlaces a Notas de la Versión Traducidas e Informar un error de Traducción
- UI Mejorada Para el Menú de Comandos en DevTools
- Nota(s)
El 24 de Septiembre de 2021 fue lanzada la versión Nro 95 de las Chrome DevTools, está a 5 versiones de llegar a la Nro 100 y como todos los meses o cada ves que sacan una nueva versión, te compartiré las interesantes novedades que nos trae este nuevo update. En este versión se destacan cambios en los issues, mejorar en la visualización de propiedades, reportes de un bug de traducción, etc. Vamos con este Post.
Antes de continuar con este Post, te invito a leer los siguientes artículos:
- Novedades en las Dev Tools 94 de Google Chrome
- Novedades en las Dev Tools 93 de Google Chrome
- Novedades en las Dev Tools 92 de Google Chrome
- Novedades en las Dev Tools 91 de Google Chrome
- Novedades en las Dev Tools 90 de Google Chrome
- Que son las Chrome Dev Tools y otros Detalles
- Puedes leer más en la categoría Chrome Dev Tools
Asimismo, te invito a escuchar el Podcast: “En Cuanto Tiempo Puedo Ser Un Buen Programador ?”:
| Spotify: | Sound Cloud: | Apple Podcasts |
 |
 |
 |
Bien ahora continuemos con el Post: Novedades en las Dev Tools 95 de Google Chrome.
Al igual que en Posts anteriores, para dar una mejor descripción de las Características nuevas, colocaré el título de la nueva característica, descripción y una o varias imágenes de dicha característica.
Nuevas Herramientas de Creación de Medidas CSS
En esta versión de Chrome DevTools se agrego una forma más práctica de actualizar medidas en CSS. En el panel Styles, busca cualquier propiedad CSS con medida (Por ejemplo: height, padding, width, etc.).
Haz clic en la unidad de medida y te aparecerán otras unidades de medidas, las cuales puedes seleccionar.
Asimismo puedes pasar el curso sobre el valor de la unidad y el puntero del mouse cambiará a cursor horizontal. Arrastra horizontalmente para aumentar o disminuir el valor. Para ajustar el valor en 10, mantén presionada la tecla Shift mientras arrastras.
También puedes editar el valor unitario como texto, simplemente haz clic en el valor y comienza a editarlo.
Ocultar Issues en la Pestaña Issues
En esta versión Nro 95 de Chrome DevTools, ahora podrás ocultar problemas específicos en la pestaña Issues para centrarte solo en problemas que sean mas relevante para ti.
En la pestaña Issues, coloca el cursor sobre un problema que te gustaría ocultar. Haz clic en More options 
Todos los problemas ocultos se agregarán al panel Hidden issues (Problemas ocultos). Expande este panel para ver todos los problemas ocultos.
Mejora en la Visualización de Propiedades
Ahora DevTools ordena las propiedades en los paneles Console, Sources y Properties, asimismo puedes acoplar la visualización de propiedades en el panel Properties. Por ejemplo, el siguiente fragmento de código crea un objeto URL con 2 propiedades propias: user y access, y actualiza el valor de una propiedad heredada search.
|
1 2 3 4 5 6 7 8 9 |
/* 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}`; |
Luego intenta iniciar sesión en la consola. Las propiedades ahora están en negrita y ordenadas primero. Estos cambios facilitan la detección de propiedades personalizadas, especialmente para API Web (por ejemplo URL) con muchas propiedades heredadas.
Aparte de esos cambios, las propiedades en el Panel Properties tambien se acoplan ahora para una mejor experiencia de depuración de propiedades DOM, especialmente para componentes web.
Versión 8.4 de Lighthouse en el Panel Lighthouse
Esta versión ahora detectará si el elemento de pintura más grande (LCP), fue una imagen de carga diferida y recomendará eliminar el atributo loading.
Consulta las Novedades de Lighthouse 8.4 para obtener más detalles sobre las actualizaciones.
Ordenar Fragmentos en el Panel Sources
Los fragmentos del panel Sources ahora están ordenados alfabéticamente. Anteriormente, no estaba ordenado. Utiliza la función de fragmentos para ejecutar comandos más rápido.
Mira este video para obtener una sugerencia.
Enlaces a Notas de la Versión Traducidas e Informar un error de Traducción
En Chrome DevTools 95 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 a través de la pestaña What’s new.
Desde Chrome DevTools 94 puedes configurar tu idioma preferido. Si encuentras algún problema con las traducciones, ayúdanos a mejorarlo notificando un problema de traducción a través de More options > Help > Report a translation bug.
UI Mejorada Para el Menú de Comandos en DevTools
Si te resultaba difícil buscar un archivo en el menú de comandos, pues hay buenas noticias, la interfaz del Command Menu ha sido mejorada. Abre el Command Menu para buscar un archivo con el atajo de teclado CTRL + P en Windows y Linux, o Command + P en MacOS.
Las mejoras de la interfaz de usuario del Command Menu aún están en curso, espera atento para más actualizaciones.
Bueno hasta aquí llegamos con todas las Novedades que trae esta nueva versión de Chrome DevTools Nro 95, nos vemos en la siguiente actualización.
Nota(s)
- Algunos de los pasos mencionados pueden variar en futuras versiones de Chrome Dev Tools, esto no depende de nosotros si no de los desarrolladores que dan soporte a las Dev Tools y cambian el orden de las opciones mencionadas.
- Algunos de los enlaces compartidos en este Post, pueden dejar de existir, esto no depende de nosotros, si no de los servicios que los almacenan.
- Si aún no tienes actualizado tu Dev Tools en Chrome, ten paciencia pronto se actualizará, a veces toma tiempo en llegar los updates.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.