El mercado de los smartphones no para de crecer. Incluso Google premia a todas las páginas «web friendly» dentro de los resultados de su buscador. Por ello, cada vez más webs están optimizadas para abrirse correctamente en todo tipo de dispositivos móviles, llegando incluso a dejar de lado las versiones de escritorio, o limitando algunas funciones o algún contenido dentro de estas. Los navegadores web, como Google Chrome, detectan desde dónde estamos cargando una web (un PC, un móvil, tablet, etc), y solicitan al servidor la versión que corresponda. Pero, por suerte, es muy fácil engañar al servidor.
Cuando usamos el navegador web, por lo general estamos acostumbrados a escribir una dirección URL en él, o realizar directamente una consulta en el buscador, y esperar a los resultados. Pero ¿sabemos realmente todo lo que ocurre por debajo cuando hacemos esto?
La consola de desarrollo de Chrome
Todos los navegadores web, en especial Chrome, cuentan con todo tipo de funciones y herramientas para todos los usuarios. Una de ellas es la consola de desarrollo. Como su nombre indica, esta es una consola pensada para que los diseñadores web puedan ver qué tal funciona su web, conocer al detalle todo lo que ocurre en el frontend, y probar «al vuelo» diferentes cambios y ajustes en la página.
Podemos abrir esta consola en cualquier momento pulsando simplemente la tecla F12 de nuestro teclado. También podemos abrir esta consola haciendo clic con el botón derecho en cualquier parte de una página y eligiendo la opción «Inspeccionar«, o con el atajo de teclado Control + Shift + I. Esta se abrirá (por defecto, aunque podemos cambiarlo) en la parte derecha de la ventana, y desde ella vamos a poder ver una gran cantidad de opciones.
Podremos ver el HTML completo de la página que tenemos abierta, todos los elementos que la forman, todas y cada una de las conexiones que se realizan con el servidor, el rendimiento de la página, la memoria que consume… Absolutamente todo lo que está relacionado con la web.
Podemos añadir elementos al código, modificar cualquier punto de la página, eliminar contenidos que no nos interesen, ver errores, detectar posibles cuellos de botella o problemas que puedan afectar negativamente al SEO de la web… las posibilidades son infinitas. Incluso, desde su consola, podemos inyectar código directamente en la página para ver cómo responde.
Eso sí, debemos tener en cuenta que los cambios que realizamos desde esta consola son locales. No estamos hackeando la web en cuestión, ni guardando ningún cambio. Para volver a cargar la página de nuevo, simplemente debemos pulsar F5 para actualizarla, y esta volverá a su estado original.
Para cerrar la consola podemos usar la tecla F12 de nuevo, o simplemente hacer clic sobre el botón de cierre que encontramos en la parte superior derecha de esta consola de desarrollo.
Cambiar el tipo de visualización de una web
Una de las herramientas más interesantes que podemos encontrar dentro de esta consola de desarrollo es la posibilidad de cambiar el tipo de dispositivo que simula la carga de la página. Por defecto, Chrome usará las propiedades de nuestro PC (es decir, indicar al servidor que somos un ordenador y, en función de la resolución y proporción de la pantalla mostrará la página que corresponda) para visualizar la página. Pero, si la web es responsiva, esto puede cambiar.
Para ello, lo que haremos será abrir las herramientas de desarrollo que acabamos de ver en el punto anterior, y nos fijaremos en un pequeño icono que aparece en la parte superior izquierda de dicho apartado.
Este icono nos va a permitir cambiar rápidamente el tipo de vista de la web del navegador. Nada más hacer clic sobre él podremos ver cómo cambia el tamaño de la página, y la forma en la que cargan los elementos. Si no lo hace, es posible que tengamos que pulsar F5 para recargar.
En la parte superior podemos ver una barra desde la que podemos cambiar varios aspectos de esta vista para móviles. Por ejemplo, podemos simular cómo se vería la web en un dispositivo concreto, o ajustar los niveles de zoom. También podemos especificarle manualmente las dimensiones de la pantalla, en píxeles, si ninguna de las opciones que vienen por defecto se adaptan a lo que buscamos.
Un botón muy interesante también que podemos encontrar es el que nos permite rotar la pantalla del ordenador. Así podremos ver qué tal quedaría la web cuando los usuarios la reproduzcan en modo horizontal.
Cuando ya hayamos realizado las pruebas que queramos, simplemente podemos salir de este modo cerrando la consola de desarrollador. Es posible, de nuevo, que tengamos que actualizar la página para que esta vuelva a mostrarse correctamente.
Extensiones para Chrome
Además de usar la consola de desarrollador, también vamos a poder hacer esto mismo usando algunas extensiones que podemos encontrar de forma totalmente gratuita en la Chrome Store. Algunas de las mejores son las siguientes:
Mobile View Switcher
Esta extensión nos permite cambiar entre la vista normal y la vista móvil con un clic. Al instalarla nos crea un icono en la barra de herramientas, el cual actúa como un interruptor en función de si queremos tenerla activada o desactivada. Por defecto simula un sistema iOS 14, pero podemos modificarlo y ajustar la extensión a nuestro antojo.
Responsive Viewer
Otra herramienta muy útil para que los desarrolladores puedan comprobar qué tal funcionan sus sitios web responsivos. Esta nos permite ver varias pantallas, de diferentes tamaños, al mismo tiempo. De esta manera podremos tener a la vista varias configuraciones y comprobar que todo se ve correctamente y no da problemas en ningún tipo de dispositivo.
Simulador móvil para Chrome
Esta herramienta nos permite simular una gran cantidad de dispositivos reales (5 modelos de Android, 15 de Apple, 4 tablets y 4 dispositivos especiales) para poder ver qué tal aparecen las páginas en función del CSS que se esté solicitando según el tamaño de la pantalla de cada uno.
Responsive Web Design Tester
Por último, esta extensión, aunque menos conocida, nos permite probar a fondo qué tal funcionan las vistas responsivas de una web en función de varios parámetros diferentes. Nos permite probar con varios móviles, incluyendo por defecto las resoluciones y proporciones más habituales. Además, esta extensión envía al servidor el User-Agent adecuado para que los resultados sean más precisos. Incluso funciona sin conexión, algo que no hacen todas las extensiones.
