Los navegadores incorporan una sección con una serie de herramientas para desarrolladores que nos muestran información sobre el sitio web que estamos visitando, la consola de desarrollo del navegador, aquí voy a explicar algunas de ellas. Utilizare Google Chrome y la página de ejemplo que utilizaré es https://developer.mozilla.org/en-US/. Para abrir la consola de desarrollo, abre tu navegador, visita la pagina web y pulsa la tecla F12.

Pestaña Elements

En la pestaña Elements vemos el esqueleto de la página, el código HTML, formado por una serie de etiquetas que cumplen una función, describir al navegador que contenido tiene la web y su estructura. Algunas de las etiquetas HTML tienen un significado semántico, esto quiere decir que los navegadores las usan para obtener información sobre su contenido, por ejemplo, una página web sencilla con un HTML pobre en etiquetas con determinados atributos no tendrá una buena valoración para el SEO; y también puede ser difícil de usar para personas con discapacidades, a esto se le llama accesibilidad, una pagina con buena accesibilidad tiene que adaptarse a diferentes tipos de usuarios, como personas con problemas visuales o completamente ciegas o personas con algún tipo de discapacidad. Una estructura HTML tiene que construirse teniendo en cuenta la accesibilidad.

Pestaña Network

La pestaña Network muestra todos los documentos que ha descargado la página web. Podemos ordenar los archivos según el Name, Status, Type, etc… En la columna Size podemos observar que muestra (disk cache), esto es porque ya visite la página y los archivos los esta sirviendo desde mi disco duro, desde la cache.

Si seleccionamos la opción disable cache y recargamos la página, el navegador volverá a descargar los archivos desde la página web y podremos ver su tamaño.

Podemos filtrar los documentos por tipo, en la siguiente imagen he filtrado para que muestre solo documentos CSS, he seleccionado uno y en la pestaña response, podemos ver su contenido, asegúrate de que la opción {} (Pretty Print) este activada para que el código sea legible.

Ahora fijémonos en los archivos JS, filtra por JS y observa como están nombrados, por ejemplo el archivo index y runtime, tienen una serie de números raros. Estos números se generan automáticamente y cambian cada vez que el desarrollador modifica el archivo, al cambiar el nombre, cuando visitamos la página, se obliga al navegador a descargarlo, de esta manera se actualiza en nuestra cache.

Te animo a que investigues por tu cuenta la consola de desarrollo.

Este artículo se ha creado a partir del video 15 del curso The JavaScript Bible.