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.
