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 la forma en que es.

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

Continuando: 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 a la izquierda de la URL de la página web, y seleccionando la tecla Enter : fuente de vista: (es decir, view-source:https://www.lifewire.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 de desarrollador se puede abrir y cerrar utilizando este método abreviado de teclado: CTRL + SHIFT + I ( COMANDO + OPCIÓN + I en macOS). También puede lanzarlos siguiendo la siguiente ruta.

1. Seleccione el botón del menú principal de Chrome, situado en la esquina superior derecha y representado por tres puntos alineados verticalmente.

2. Cuando aparezca el menú desplegable, pase el cursor del ratón por encima de la opción Más herramientas .

3. 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 sencillo como añadir el siguiente texto en el anverso de su dirección (o URL) y enviarla: fuente de vista: . Un ejemplo de esto sería view-source:https://www.lifewire.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 tu 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 los activos de las páginas individuales, el modelo de objeto de documento (DOM), así como el tamaño de la página, las cookies y otros detalles interesantes.

Borde de Microsoft

Continuando: Ventanas

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 el ratón, haga clic en el botón del menú de Edge (tres puntos situados en la esquina superior derecha) y elija la opción F12 Developer Tools 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 con el botón derecho del ratón en cualquier parte de una página web): Inspeccionar elemento y Ver fuente , esta última que abre la porción Debugger de la interfaz de dev tools poblada con código fuente.

Mozilla Firefox

Continuando: 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 ( COMMAND + U en macOS) en tu teclado, lo que abrirá una nueva pestaña que contiene código HTML y otros códigos para la página web activa.

Si escribes el siguiente texto en la barra de direcciones de Firefox, directamente a la izquierda de la URL de la página, la misma fuente aparecerá en la pestaña actual: fuente de vista: ( , es decir, view-source:https://www.dotdash.com).

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.

1. 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.

2. Cuando aparezca el menú emergente, haga clic en el icono Desarrollador «llave inglesa».

3. 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 con el botón 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 siguiente texto al prefijo de la URL de la página web: fuente de vista: . Por ejemplo, para ver el código fuente HTML para Dotdash, debe enviar el siguiente texto en la barra de direcciones del navegador: fuente de vista: https://www.dotdash.com.

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 Ver código fuente, 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

Ejecución 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 Ver código fuente, disponible en el App Store por 0,99 dólares.

Después de instalar esta aplicación de terceros, vuelve al navegador Safari y toca 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 tu 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ú Develop . 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.

1. Seleccione Safari en el menú del navegador, situado en la parte superior de la pantalla.

2. Cuando aparezca el menú desplegable, seleccione la opción Preferencias .

3. Las Preferencias de Safari deberían estar visibles ahora. Haga clic en el icono Avanzado , situado en el extremo derecho de la fila superior.

4. Hacia la parte inferior de la sección Avanzado hay una opción denominada Mostrar menú 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.

5. Seleccione el menú Develop , situado en la parte superior de la pantalla.

6. 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 .

Opera

Continuando: 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 el código 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 haga clic en Enter: view-source: ( , es decir, view-source:https://www.lifewire.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.

1. Seleccione el logotipo de Opera, situado en la esquina superior izquierda de la ventana de su navegador.

2. Cuando aparezca el menú desplegable, pase el cursor del ratón por encima de la opción Más herramientas .

3. Haga clic en Mostrar menú de desarrollador .

4. Seleccione de nuevo el logotipo de Opera.

5. Cuando aparezca el menú desplegable, pase el cursor por encima de Desarrollador .

6. Cuando aparezca el submenú, seleccione Herramientas para desarrolladores .

Vivaldi

Hay múltiples maneras de ver el código fuente de la página dentro del navegador Vivaldi. La más simple es a través del atajo de teclado CTRL + U , que presenta el código de la página activa en una nueva pestaña.

También puede añadir el siguiente texto al frente de la URL de la página, que muestra el código fuente en la pestaña actual: fuente de vista: . Un ejemplo de esto sería view-source:http://www.dotdash.com.

Otro método es a través de las herramientas de desarrollo integradas del navegador, accesibles pulsando la combinación CTRL + SHIFT + I o a través de la opción Developer Tools en el menú del navegador Tools – que se encuentra seleccionando el logotipo V en la esquina superior izquierda. El uso de las herramientas de desarrollo permite un análisis mucho más profundo de la fuente de la página.