¿Ya conoces el inspector web? Acá te contamos como utilizar esta Herramienta

Como desarrolladores web pasaremos bastante tiempo usando el inspector de nuestro navegador, esta herramienta es un recurso muy útil para analizar los contenidos de un sitio web. Con él podremos ver el código fuente de la página, así como analizar los diferentes elementos que la conforman.

Si estas comenzando en el mundo de la programación, y aun no conoces esta herramienta, ¡No te preocupes! En este post te vamos hablar de que trata esta herramienta y sus ventajas.

Antes que nada, tienes que saber que cada navegador incluye su propio inspector de elementos. Que, si existen diferencias menores entre cada navegador, pero esencialmente las acciones que podemos realizar son las mismas.

En este caso, usaremos la herramienta en Google Chrome, conocida también como DevTools. Para abrirla, solo basta con hacer clic derecho sobre cualquier zona de una página web y seleccionar la opción inspeccionar.

Luego de abrir el inspector web se puede ver como hay varios apartados, entre los que se encuentran elements, console, source, network, preferences, memory y application. La más importante de todas ellas o la más usada, además es la que se abre por defecto es “Elements”, aunque, como veremos a continuación, existen otras pestañas que proporcionan información de interés.

A continuación, te daremos una breve explicación de cada pestaña del inspector

Pestaña elements

Esta es la más utilizada de todas. En ella se puede ver todo el código fuente de la web. Además, cuando selecciones un determinado fragmento o bloque de código, se mostrará en pantalla. Por ejemplo, en el caso de la página principal de MGPanel, al seleccionar el contenedor que se muestra en la imagen, queda reflejado el fragmento de la web que es creado por dicho código.

Pestaña console

En esta pestaña tiene los registros de los avisos del frontend de un sitio, y es un lugar donde también se pueden introducir fragmentos de código para realizar una prueba rápida de una idea. También se encuentra la información sobre la referencia de cualquier error, recuerda ¡cada error es un mundo diferente!

Pestaña network

Dentro de esta pestaña verás las peticiones realizadas hacia y desde un servidor, como todas las peticiones POST y GET. En caso de que abras esta pestaña cuando la página ya está cargada, es muy probable que aparezca vacía. En ese caso, al recargar la página se listarán todas las peticiones HTTP que se llevan a cabo.

OTRAS PESTAÑAS

Además de las pestañas expuestas, el inspector de elementos de Google Chrome cuenta también con otras pestañas cuyo uso es menos habitual, pero que conviene conocer:

Sources: nos muestra los dominios desde los que la web está obteniendo contenidos para construir la página.

Performance: muestra determinadas métricas para conocer el rendimiento de la página.

Memory: indica la memoria que consume la página al ser cargada.

Application: muestra información sobre los recursos que utiliza la web. Se utiliza habitualmente para ver las cookies que está cargando la página.

Security: indica si la página es segura, así como los diferentes sitios a los que se accede desde la misma.

Además, puede que nuestro inspector de elementos tenga algunas pestañas adicionales. Eso es debido a que algunas extensiones de Google Chrome añaden una pestaña al inspector de elementos.

Gracias a esta herramienta tienes una gran cantidad de funcionalidades para analizar, optimizar o desarrollar una web. Sin duda alguna es muy útil para trabajar con sitios web. Ahora que sabes cómo funciona el inspector web, ya puedes empezar a usarlo y utilizarlo para entender tus propios proyectos. Pero no te preocupes, que MGPanel también te acompaña en este proceso.

Es por eso, que te recomendamos nuestro curso de programación desde cero de  MGPanel, ahí Podrás dominar este y otros temas en programación web. Además de pertenecer a la gran comunidad de  MGPanel  donde los programadores nos apoyamos unos a otros. ¡Únete ahora!