¿Cómo medir el código que no ocupamos?

Como dato extra: En Coverage aparece en rojo las clases que tienen la pseudoclase hover, para que pase a verde solo deben hacer hover sobre los elementos y así visualizan mejor el código que si ocupan

📌Aclaración:
Puede que hayas escrito lineas de código que no se ejecutan hasta cumplir cierta condición, cómo el css responsive de la página, y aparecerán de color rojo hasta que se cumplan las condiciones y el código pueda ejecutarse.

La pestaña Coverage en Chrome DevTools puede ayudarlo a encontrar código JavaScript y CSS no utilizado.

¿En el minuto 3:15 alguien más ve la linea en azul y no en verde?

¿Podrías hacer un ejemplo más claro con un framework y librerias más utilizadas como bootstrap o webpack? Ya que tiene pinta de que lo usas, borras código que “no se utiliza” y finalmente se utilizaba en otro “use case”.
Ya que por ejemplo webpack muestra mucho código en rojo

¿Cuando deberíamos de eliminar código? o que deberíamos hacer en el mejor de los casos?

En el minuto 2:55 hay un pequeño error. Lo que sale en esa columna no es el peso de los archivos, sino el porcentaje de código no utilizado, también expresado en bytes, de cada uno de los archivos, respecto del peso total de los mismos que está justamente en la columna que está a la izquierda cuyo nombre es Total Bytes.

Osea puedo jalar el codigo que esta en verde de boostrap por ejemplo, crear un css local y ponerlo y asi hacer mas liviana mi carga?

Genial, afortunadamente hoy en día hay algunas librerías que mediante empaquetadores como WebPack te permiten decidir qué tanto de esa librería usar, o incluso te permiten cargar solo cierta parte del código cuando lo necesites, optimizando así el peso de la página.

Adicionalmente hay una sección den DevTools llamada “lighthouse” que, aunque está pensada en SEO, también te puede dar un reporte del rendimiento de tu página y puedes ver en qué estás fallando y te da recomendaciones para optimizarla

Me surgió una duda: Si tengo una web que tiene un menú con mas de una página, las secciones que se muestran en rojo es porque no están siendo utilizadas en la página que estoy actualmente o en la web entera?

Lol si no hubiera sabido de ésto no hubiera optimizado mi primer proyecto con lo aprendido del curso básico de JavaScript, me dio mucha felicidad aprender ésto.

genial herramienta!

No sabía que coverage servía para esto!

En mi caso el archivo normalize.css estaba prácticamente inutilizado. En los otros archivos el código no usado se corresponde a varias fuentes y a la pseudoclase hover

Okay ya se que el codigo verde me sirve y el rojo no me sirve pero que hago despues? simplemente lo borro? como se que debo borrar? wut¿¿

Hay código como los hover, botones desplegables, etc. Que no marca, es importante mirar eso antes de tomar acciones con el código que salga en rojo como no utilizado.

Verifique en mi página y si jaja la mayoría de Bootstrap no se utiliza jaja (Osea que yo no he implementado ese código)

Qué interesante clase 😮

Esta clase esta chida… 😃

No sé si soy daltónico y ahora recién me entero, pero esas barras no son verdes!

A seguir aprendiendo. A MEDIR

¿La inspección que hace abarca todo nuestro proyecto o solo la vista actual donde se está corriendo el análisis para ver que código no se está usando?

¿¿Como puedo dar solucion a esto de manera facil y sencilla, que me recomiendan?

cuando dice “código vanilla” se refiere a código puro sin preprocesadores !!

Hay que tener un poco de cuidado, ya que algunos Media Queries y las clases que tienen la pseudo-clase :hover también aparecen de color rojo.

¿Existe algo así en los devtools de Firefox?

Excelente, buena herramienta para optimizar.

Herramienta, muy útil ✔👏

Si hay mucho código que no se usa, Se vuelven más lentos los renderizados del sitio o solo se ignoran?

Código que no es utilizado, en framewor de Bootstrap

Es curioso como los comentarios dentro de las clases de css no los marca como código sin usar

muy util, no tenia ni idea que existía esta herramienta.

Excelente saber esto, gracias!

Coverage .- para visualizar código que no se está utilizando.

que pasa si elimino lo que el navegador arroja que no uso, pero otra parte de la app web lo usaba?

ese analisis de coverage tiene en cuenta toda la pagina o solo la vista actual?

woow increible las herramientas devtools

Increibles estas utilidades

Excelente clase, parecido a la utilidad de coverage para cubrir las lineas al momento de ejecutar las pruebas unitarias de un proyecto en Eclipse.

Interesante

Excelente herramienta.

Manya que buen dato sabia que iba aprender algo de este curso ❤️

genial este conocimiento adquirido

Se puede usar PurgeCSS para frameworks como Tailwind, Bootstrap, Materialize y PostCSS que va a eliminar todo el codigo css no utilizado.

2:08 ¿Cómo podemos verificar cuál es la cantidad de código que no ocupamos?. Accediendo a: Menú > More tools > Coverage

2:34 Comenzando a grabar: Lo Rojo es código que no usamos. Lo verde es código que si ocupamos.

Enlaces complementarios:
Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
Comentarios valiosos de la comunidad: 1, 2, 3

Para poder visualizar coverage de tu código y observar cómo mide el performance de tu proyecto, presiona:

⌘ + ⌥ + I (Mac)
Ctrl + Mayús + I (Windows, Linux)

Después de esto, selecciona coverage desde el menú de comandos:

⌘ + ⇧ + P (Mac)
Ctrl + Mayús + P (Windows, Linux)

Finalmente selecciona show coverage :

Muy util todo este curso!!

Gracias a este curso, le pude hacerun debug al proyecto de la página de Google!!!

Genial! el uso de coverage