En esta guía te voy a explicar cuáles son los pasos que debes seguir en tu ordenador y en el móvil para ver el código fuente de una web. Te explico qué aplicaciones necesitas instalar y qué pasos debes seguir en cada caso para visualizar tanto el HTML como el CSS, los scripts y muchos otros datos de cualquier sitio de Internet.
Por supuesto, si crees que hay un error en el texto o piensas que existe un método más efectivo, te invito a pasarte por la zona de comentarios. Toda la comunidad de Profesional Review espera tu aportación. Después de este breve recordatorio, veamos las mejores formas de ver el código fuente de una web en todos los dispositivos.
Índice de contenidos
Ver el código fuente de una web desde un PC
Si estás en un ordenador, sin importar el sistema operativo que utilices, tu navegador será el aliado para ver el código fuente de una web. Todos los navegadores incluyen un paquete de herramientas de desarrollo ideadas para aquellos que están creando una página web. Sin embargo, están ahí a disposición de todos los s y, además de permitir visualizar el código del sitio que has abierto, también incluyen un montón de funciones más.
En los navegadores Chromium (Chrome, Brave, Vivaldi, Edge) solo tienes que presionar la tecla F12 para acceder a las opciones de desarrollo web. Entonces, se abrirá un lateral donde vas a poder ver el código fuente de la web que tienes en pantalla.
En Firefox también puedes hacer lo mismo, ya que la tecla F12 está habilitada para lo mismo. Finalmente, si utilizas Safari en macOS, solo tienes que acudir al menú superior y presionar en Desarrollo > Mostrar inspector web. El atajo de teclado en este caso es Opción + Comando + I. Tanto en los navegadores Chromium como en Firefox y Safari, el aspecto de este inspector web es muy similar. En todos los casos su misión es mostrar el código fuente, pero también incluye otras funciones útiles.
Por ejemplo, si seleccionas una línea del código fuente, el elemento correspondiente se va a marcar en la pantalla. En la siguiente imagen se aprecia cómo se selecciona el logotipo de este sitio web cuando sitúo el cursor sobre la línea correspondiente.
Otra cosa que deberías saber es que puedes aplicar cambios sobre el sitio sitio web y previsualizarlos en tiempo real. No te pienses que los cambios se aplican en el servidor. Más bien, solo son visibles para ti. Esta es una herramienta para desarrolladores que les facilita aplicar cambios y previsualizarlos antes de aplicarlos de manera definitiva en el sitio web. Como ves en la siguiente imagen, he decidido renombrar Profesional Review.
Finalmente, también puedes visualizar una parte específica del código. Solo tienes que seleccionarla con el cursor y hacer clic derecho para abrir el menú contextual. Luego, elige Inspeccionar elemento.
Adicionalmente, el inspector web de la mayoría de los navegadores incluye estas herramientas:
- Visualizar la web en diferentes tamaños de pantalla. Te permite probar la web en la pantalla de un móvil o una tablet.
- Ver todos los recursos multimedia del sitio web, como imágenes o audios.
- Cambiar el agente del navegador. Esto te permite abrir el sitio como si el navegador fuera otro. Por ejemplo, puedes enmascarar Chrome y hacerlo pasar por Firefox.
- Editar el CSS. No solo puedes cambiar el código HTML, sino modificar los valores CSS para ver el aspecto que tendría la web.
Ver el código fuente de una web en el móvil
La forma más cómoda de ver el código fuente de una web es desde un navegador de escritorio. Sin embargo, en el móvil también vas a poder hacer algo parecido, aunque no con tantas opciones adicionales.
Android
En Android puedes utilizar una aplicación como Element Inspector. Incluye algunas opciones interesantes, como hacer que todos los elementos sean editables o cambiar el CSS del sitio. La aplicación funciona como un navegador más, solo que en este caso incluye opciones para inspeccionar el sitio web.
Lo malo de esta aplicación es que no es tan completa como los inspectores web de los navegadores de escritorio. Le faltan bastantes opciones, aunque si lo único que buscas es ver el código fuente de una web, entonces te va a servir.
iOS
En el iPhone también dispones de aplicaciones que actúan como el inspector web de Chrome y el resto de sus alternativas. En este caso, como Safari permite la instalación de extensiones, Web Inspector actúa como tal. Es decir, en vez de ser una aplicación independiente, lo que hace es habilitar un inspector web dentro de Safari.
Lo cierto es que funciona realmente bien y, aunque no dispone de todas las opciones, el aspecto de este inspector es muy parecido al que se puede encontrar en Safari para macOS.
Y tú, ¿qué herramienta sueles utilizar para ver el código fuente de una web? ¿Conoces alguna más? Déjame tu opinión más abajo. ¡Nos leemos!
