Todo lo

que
puedes
hacer con
«inspeccio
nar
elemento»
en Google
Chrome,
Firefox y
Safari
Descubriendo el interior de cualquier página web.

por José María López

16 de julio de 2018
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.