La página web que está leyendo está compuesta, entre otras cosas, por código fuente. Esa es la información que su navegador descarga y traduce a lo que usted está leyendo ahora mismo.
La mayoría de los navegadores web ofrecen la posibilidad de ver el código fuente de una página web sin necesidad de software adicional, independientemente del tipo de dispositivo en el que se encuentre.
Algunos incluso ofrecen funcionalidad y estructura avanzadas, lo que facilita la lectura de código HTML y otros códigos de programación en la página.
¿Por qué querría ver el código fuente?
Hay varias razones por las que puede querer ver el código fuente de una página. Si usted es un desarrollador web, tal vez le gustaría echar un vistazo bajo las portadas para ver el estilo o la implementación particular de otro programador. Tal vez usted está en control de calidad y está tratando de averiguar por qué una determinada parte de una página web está renderizando o comportándose de cierta forma.
También podrías ser un principiante tratando de aprender a codificar tus propias páginas y estás buscando algunos ejemplos del mundo real. Por supuesto, es posible que no caigas en ninguna de estas categorías y sólo quieras ver la fuente por pura curiosidad.
A continuación se enumeran las instrucciones sobre cómo ver el código fuente en el navegador de su elección.
Google Chrome
Ejecutado en: Chrome OS, Linux, macOS, Windows
La versión de escritorio de Chrome ofrece tres métodos diferentes para ver el código fuente de una página, el primero y el más sencillo utilizando el siguiente atajo de teclado: CTRL + U (COMANDO + OPCIÓN + U en macOS).
Cuando se pulsa, este acceso directo abre una nueva pestaña del navegador que muestra código HTML y otros códigos para la página activa. Esta fuente está codificada por colores y estructurada de tal manera que es más fácil compartimentar y encontrar lo que está buscando. También puedes llegar allí introduciendo el siguiente texto en la barra de direcciones de Chrome, que se encuentra en el lado izquierdo de la URL de la página web, y seleccionando la tecla Enter: view-source:
view-source:https://www.comofriki.com
El tercer método es a través de las herramientas para desarrolladores de Chrome, que te permiten profundizar en el código de la página, así como modificarlo sobre la marcha con fines de prueba y desarrollo. La interfaz de herramientas para desarrolladores se puede abrir y cerrar utilizando este método abreviado de teclado: CTRL + SHIFT+ I (COMANDO + OPCIÓN + I en macOS). También puede ejecutarlo siguiendo la siguiente ruta.
- Seleccione el botón del menú principal de Chrome, situado en la esquina superior derecha y representado por tres puntos alineados verticalmente.
- Cuando aparezca el menú desplegable, pase el cursor del ratón por encima de la opción Más herramientas.
- Cuando aparezca el submenú, seleccione Herramientas para desarrolladores.
Android
Ver el código fuente de una página web en Chrome para Android es tan simple como añadir el siguiente texto en el anverso de su dirección (o URL) y enviarlo: view-source:. Un ejemplo de esto sería:
view-source:https://www.comofriki.com
El código HTML y otros códigos de la página en cuestión se mostrarán instantáneamente en la ventana activa.
iOS
Aunque no hay métodos nativos para ver el código fuente usando Chrome en su iPad, iPhone o iPod touch, lo más simple y efectivo es utilizar una solución de terceros como la aplicación View Source.
Disponible por $0.99 en el App Store, View Source te pide que introduzcas la URL de la página (o la copies/pegues desde la barra de direcciones de Chrome, que a veces es la ruta más sencilla de seguir) y ya está. Además de mostrar HTML y otro código fuente, la aplicación también tiene pestañas que muestran página individuales activas, el modelo de objeto de documento (DOM), así como el tamaño de la página, las cookies y otros detalles interesantes.
Microsoft Edge
Ejecutado en: Windows
El navegador Edge le permite ver, analizar e incluso manipular el código fuente de la página actual a través de su interfaz Herramientas de desarrollo. Para acceder a este práctico conjunto de herramientas puede utilizar uno de estos métodos abreviados de teclado: F12 o CTRL + U. Si prefiere usar el ratón, haga clic en el menú de Edge (tres puntos situados en la esquina superior derecha) y seleccione la opción Herramientas para desarrolladores F12 de la lista.
Después de que las herramientas de desarrollo se ejecutan por primera vez, Edge añade dos opciones adicionales al menú contextual del navegador (accesible haciendo clic derecho en cualquier parte de una página web): Inspeccionar el elemento y Ver el código fuente, este último que abre la porción del Depurador de la interfaz de herramientas de desarrollo poblada de código fuente.
Mozilla Firefox
Ejecutado en: Linux, macOS, Windows
Para ver el código fuente de una página en la versión de escritorio de Firefox puedes presionar CTRL + U (COMANDO + U en macOS) en su teclado, que abrirá una nueva pestaña que contiene código HTML y otros códigos para la página web activa.
Escriba el siguiente texto en la barra de direcciones de Firefox, directamente a la izquierda de la URL de la página, hará que aparezca la misma fuente en la pestaña actual: view-source:
view-source:https://www.mozilla.org/es-ES/about/
Otra forma de acceder al código fuente de una página es a través de las herramientas para desarrolladores de Firefox, accesibles siguiendo los siguientes pasos.
- Seleccione el botón del menú principal, situado en la esquina superior derecha de la ventana de su navegador y representado por tres líneas horizontales.
- Cuando aparezca el menú desplegable, haga clic en el icono de la llave inglesa del desarrollador.
- El menú contextual del Desarrollador Web debería estar ahora visible. Seleccione la opción Fuente de página.
Firefox también te permite ver el código fuente de una parte concreta de una página, lo que facilita el aislamiento de problemas. Para ello, primero, resalte con el ratón el área que le interesa. A continuación, haga clic derecho y seleccione Ver fuente de selección en el menú contextual del navegador.
Android
La visualización del código fuente en la versión Android de Firefox se puede conseguir añadiendo el prefijo URL de la página web con el siguiente texto: view-source:. Por ejemplo, para ver el código fuente HTML para www.mozilla.org, debe enviar el siguiente texto en la barra de direcciones del navegador:
view-source:https://www.mozilla.org
iOS
Nuestro método recomendado para ver el código fuente de la página web en tu iPad, iPhone o iPod touch es a través de la aplicación View source code, disponible en el App Store por $0.99. Aunque no está integrado directamente con Firefox, puede copiar y pegar fácilmente una URL del navegador en la aplicación para revelar el código HTML y otros códigos asociados con la página en cuestión.
Apple Safari
Ejecutado en iOS y macOS
iOS
Aunque Safari para iOS no incluye la posibilidad de ver el código fuente de la página de forma predeterminada, el navegador se integra perfectamente con la aplicación View source code, disponible en el App Store por 0,99 dólares.
Después de instalar esta aplicación de terceros, vuelva al navegador Safari y toque el botón Compartir, situado en la parte inferior de la pantalla y representado por un cuadrado y una flecha hacia arriba. La Hoja Compartida de iOS debería estar visible, superponiéndose a la mitad inferior de su ventana de Safari. Desplácese hacia la derecha y seleccione el botón Ver fuente.
Ahora se debe mostrar una representación estructurada y codificada por colores del código fuente de la página activa, junto con otras pestañas que le permiten ver los activos de la página, los scripts y mucho más.
macOS
Para ver el código fuente de una página en la versión de escritorio de Safari, primero necesitas habilitar su menú Desarrollo. Los siguientes pasos le guiarán a través de la activación de este menú oculto y la visualización del código fuente HTML de una página.
- Selecciona Safari en el menú del navegador, situado en la parte superior de la pantalla.
- Cuando aparezca el menú desplegable, seleccione la opción Preferencias.
- Las Preferencias de Safari deberían estar visibles ahora. Haga clic en el icono Avanzado, situado en el extremo derecho de la fila superior.
- Hacia la parte inferior de la sección Avanzado hay una opción llamada Mostrar menú de desarrollo en la barra de menú, acompañada de una casilla de verificación vacía. Seleccione esta casilla una vez para marcarla y cierre la ventana de Preferencias haciendo clic en la x roja que se encuentra en la esquina superior izquierda.
- Seleccione el menú Desarrollo, situado en la parte superior de la pantalla.
- Cuando aparezca el menú desplegable, seleccione Mostrar fuente de página. También puede utilizar el siguiente método abreviado de teclado: COMANDO + OPCIÓN + U.
Ópera
Ejecutado en: Linux, macOS, Windows
Para ver el código fuente desde la página web activa en el navegador Opera utilice el siguiente atajo de teclado: CTRL + U (COMANDO + OPCIÓN + U en macOS). Si prefiere cargar la fuente en la pestaña actual, escriba el siguiente texto a la izquierda de la URL de la página dentro de la barra de direcciones y pulse Enter: ver fuente:
view-source:https://www.comofriki.com
La versión de escritorio de Opera también le permite ver el código fuente HTML, CSS y otros elementos utilizando sus herramientas de desarrollo integradas. Para iniciar esta interfaz, que por defecto aparecerá en la parte derecha de la ventana principal de su navegador, pulse el siguiente atajo de teclado: CTRL + SHIFT + I (COMANDO + OPCIÓN + I en macOS).
El conjunto de herramientas para desarrolladores de Opera también es accesible siguiendo los siguientes pasos.
- Seleccione el logotipo de Opera, situado en la esquina superior izquierda de la ventana de su navegador.
- Cuando aparezca el menú desplegable, pase el cursor del ratón por encima de la opción Más herramientas.
- Haga clic en Mostrar el menú desarrollador.
- Seleccione de nuevo el logotipo de Opera.
- Cuando aparezca el menú desplegable, coloque el cursor sobre Desarrollador.
- Cuando aparezca el submenú, seleccione Herramientas para desarrolladores.
Cuéntenos cual es su navegador, y si le pareció interesante, déjenoslo saber en los comentarios, Gracias.
