El inspector de nuestro navegador es una zona en la que pasaremos bastante tiempo como desarrolladores web, pues es una herramienta fundamental para entender lo que sucede detrás de nuestras páginas y aplicaciones. En este post, te enseñaremos cómo funciona el inspector web para que lo uses a la par que escribes el código de tus proyectos.
¿Qué es el inspector web?
El inspector web es una herramienta que se encuentra en todos los navegadores. Esta nos permite inspeccionar lo que está sucediendo en el código detrás de una página web. A continuación, te explicaremos las zonas de esta herramienta en Google Chrome, conocida también como DevTools. Para abrirla, basta con hacer clic derecho sobre cualquier zona de una página web y pinchar en la opción inspeccionar.
En el inspector web hay varios apartados, entre los que se encuentran elements, console, source, network, preferences, memory y application.
En nuestro post sobre la diferencia entre JavaScript para servidor y para frontend, te hemos explicado de forma general cómo funciona la web. También te contamos que la web funciona a partir de peticiones de un cliente, que parten de un navegador y, después, las procesa un servidor. En este sentido, es el servidor el responsable de recibir la petición y enviar de vuelta una respuesta. Luego, el navegador recibe la respuesta y la interpreta, ejecutando diversas acciones con ella.
En el apartado de network de nuestro inspector web podemos analizar este proceso. Allí podemos filtrar por las distintas peticiones que hace nuestro cliente desde el navegador al servidor. Además, en esta sección podremos ver la respuesta recibida y sus códigos de estado.
¿Cómo funciona el inspector web?
Para ver cómo funciona el inspector web, analicémoslo paso a paso. Con la herramienta abierta, intentemos entrar en google.com en la barra de búsqueda. Una vez le des a enter en esta petición, verás una serie de elementos en la sección de network. Estos elementos están clasificados por nombre, estatus, tipo, iniciador y tamaño.
Si haces clic sobre la primera petición, llamada google.com, podrás ver sus detalles, especificados con las categorías de headers, preview, response, initiator, timing y cookies. Bajo la categoría headers, encontrarás una sección general, en la que podemos ver el método de petición (GET), la URL pedida y el código de estado (301).
En headers, además, encontramos los dos tipos de cabeceras que tiene cada petición HTTP de un servidor.
- Por un lado, están las cabeceras de la petición (request headers). Estas son las que viajan del navegador hasta el servidor.
- Por otro lado, están las cabeceras de respuesta (response headers), que son las que viajan desde el servidor hasta el navegador.
Un ejemplo de cabecera de petición es user agent, que es una especie de matrícula del navegador. Un ejemplo de cabecera de respuesta es content length, que nos habla un poco del tamaño de la respuesta que está dándonos el servidor. Otra cabecera muy común que nos encontramos es content type: json, presente en muchas peticiones HTTP de la API que hemos implementado.
Para conocer más sobre los distintos tipos de cabeceras y la información adicional que nos podemos encontrar al explorar cómo funciona el inspector web, te recomendamos leer el post HTTP headers en la página oficial de la MDN.
Luego, en la categoría response, podemos ver el estado de la respuesta. Allí podrás ver si la respuesta ha fallado o, en caso de que la respuesta haya sido exitosa, su trozo de código. La categoría preview de una petición es lo que el navegador va a interpretar sobre el código en bruto de la categoría response. Es decir, toda la preview es una previsualización de cómo el navegador transforma la respuesta recibida. Este proceso sucede rápidamente hasta renderizar todas las peticiones en lo que el usuario ve finalmente.
En preview podemos encontrar todo tipo de interpretaciones, desde un texto hasta un archivo svg o img. Para conocer más sobre cómo funciona el inspector web, te invitamos a explorar las distintas peticiones que te aparecen y explorar sus distintas categorías.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo funciona el inspector web, ¡es momento de utilizarlo para entender tus propios proyectos! Que aprendas a inspeccionar en safari, inspeccionar en safari mac, o lo que es similar, aprender cómo funciona un inspector web safari. Pero no te preocupes, que KeepCoding también te acompaña en este proceso. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar todo tipo de proyectos web con distintas herramientas y lenguajes de programación, como JavaScript, HTML, CSS y JSX. ¡Anímate a seguir aprendiendo con nosotros y pídenos más información!
