Navegar por la web puede resultar hoy en día una experiencia muy atractiva gracias a las **virguerías y a los diseños de ciertos sitios web** que, además de funcionales, quieren ir un poco más allá.

Dejando a un lado el abuso de banners y publicidad que pueda entorpecer la navegación, en general las páginas actuales distan mucho de las que padecimos décadas atrás. En primer lugar, **se adaptan al tamaño de la pantalla**, procuran cargar lo más rápido posible y muchas permiten **ejecutar aplicaciones** directamente desde el navegador.

De ahí que hoy en día tenga más interés **ver el interior de un sitio web** que hace años. Por ello quiero recuperar una herramienta incluida en la mayoría de navegadores y a la que apenas hacemos caso a no ser que te dediques a la **programación web**.

La herramienta Inspeccionar o Inspeccionar elemento está disponible en Firefox y Chrome pero también en otros navegadores. Su propósito es **ver los entresijos** de una página web, realizar **cambios locales** (que solo veremos nosotros) y conocer secretos como las **fuentes de letra** que emplean.

Veamos qué podemos hacer con esta herramienta.

## Inspeccionar elemento

Mozilla Firefox tiene distintas maneras de ver los entresijos de una página web. Al hacer clic derecho en una página web abierta, veremos opciones como **Ver código fuente de esta página** o **Ver información de esta página**.

La primera es obvia, muestra el código fuente de la página que tengamos abierta, mientras que con la segunda opción veremos **metadatos**, las **imágenes** que contiene esa página, los **permisos** de esa página para controlar el navegador (cookies, cargar imágenes, preguntar la posición en el mapa) e información sobre su **certificado de seguridad**, si lo tiene.

Pero donde realmente encontraremos información interesante es en Inspeccionar elemento, también accesible desde el menú contextual de Firefox, desde el menú de Firefox (**Desarrollador Web > Inspector**) y con la combinación de teclas **CTRL+Mayúsculas+C**. En macOS, **Opción+Comando+C**.

Por su parte, Google Chrome permite activar esta opción desde el menú contextual e **Inspeccionar** o con el atajo de teclado **CTRL+Mayúsculas+I** (en macOS es **Opción+Comando+I**). También lo encontraremos en el menú de Chrome, en **Más herramientas > Herramientas para desarrolladores**.

Dividido en pestañas, con la función Inspeccionar elemento sabremos más de la página web que estamos visitando.

Desde **Inspector** (**Elements** en Chrome) veremos el código fuente. Ayudados del buscador integrado, encontraremos partes concretas, como por ejemplo **extensiones de imágenes** o vídeos. Chrome, por desgracia, no integra buscador.

## Colores y fuentes de letra

Dos datos interesantes para diseño que encontraremos en Firefox son los **colores empleados** en la página web (para ello debemos usar el icono a la derecha de Buscar HTML y que muestra una lupa con el **código de color** según dónde coloquemos el ratón.

En segundo lugar, desde la pestaña **Tipografía** veremos qué **fuentes de letra** emplea.

En el caso de Chrome, la búsqueda deberemos hacerla en el código, ya que no incluye estas opciones.

## Diseño adaptable

En Firefox, si pulsamos en el **icono de la derecha** de la barra de Inspeccionar elemento activaremos el visor de diseño adaptable. En Chrome lo encontraremos a mano izqueirda. Con él veremos el sitio web que estamos visitando **según diferentes tamaños de pantalla y dispositivos**.

Esta función está muy bien porque simular diferentes pantallas. Pulsando en “No hay dispositivo seleccionado” encontraremos **distintos modelos** de Nexus, Samsung, iPhone y iPad. Incluso puedes indicar una resolución específica.

En el caso de Chrome, deberemos pulsar en **Responsive**, y para personalizar una resolución, en **Edit…**

Y desde el botón de la derecha, en Firefox, es posible “girar el dispositivo” de vertical a horizontal. Además, desde la barra flotante de opciones, con el icono en forma de cámara, podremos **realizar una captura**.

## Editor de estilo

Si tienes conocimientos de HTML y CSS, la pestaña **Editor de estilo** te permitirá jugar con la disposición de una página web, ya que podrás realizar cambios en su código que sólo verás tú.

Estos cambios se pueden **guardar e importar**, de manera que podrás ver una página web a tu manera desde tu propio navegador.

En Chrome, podemos crear reglas de estilo desde **Elements > Styles** o cambiar los estilos directamente. En este sentido, se nos facilitan botones para cambiar elementos concretos, como sombreados o **colores de letra y fondos**.

## Rendimiento y memoria

Como curiosidad, o para analizar cuán rápida es tu página web, las pestañas **Rendimiento** y **Memoria** nos ayudan a analizar la velocidad de carga de cada elemento y el uso que hacen de la memoria. En Chrome reciben el nombre de **Performance** y **Memory**.

Obviamente, cuantos más elementos y funciones incluya una página más tardará en cargar y más memoria empleará, pero siempre podemos **optimizar la carga**.

## Seguridad

Chrome cuenta con una **pestaña adicional** para comprobar la seguridad de una página web.

En concreto, nos indica si la página carga por defecto como HTTPS y si el certificado está al día y es fiable. Además, podemos echarle un vistazo, al igual que podemos hacer en cualquier momento desde el **icono en forma de candado** de la barra de direcciones.

## Audits

Otra función propia de Chrome en Inspeccionar elemento es la pestaña **Audits**, que sirve para realizar un análisis a fondo de la página web que tenemos abierta.

Su propósito es realizar **distintos análisis** relacionados con la velocidad de carga, si es compatible con dispositivos móviles, si es accesible y si cumple con los estándares SEO.

El proceso es relativamente rápido y obtendremos **información amplia** que nos servirá para mejorar nuestra propia página o para conocer mejor las páginas que solemos visitar.