Cómo ver el código fuente de una página web en cada navegador

La página web que está leyendo está compuesta, entre otras cosas, por código fuente. Esa es la información que descarga su navegador web y se traduce en lo que está leyendo en este momento.

La página web que está leyendo está compuesta, entre otras cosas, por código fuente. Esa es la información que descarga su navegador web y se traduce en lo que está leyendo en este momento.

La mayoría de los navegadores web ofrecen la capacidad de ver el código fuente de una página web sin necesidad de software adicional, sin importar el tipo de dispositivo en el que se encuentre.

Algunos incluso ofrecen una funcionalidad y estructura avanzadas, lo que facilita la lectura de HTML y otros códigos de programación en la página.

¿Por qué querrías ver el código fuente?

Hay varias razones por las que es posible que desee 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 cubiertas al estilo o implementación particular de otro programador. Tal vez esté en garantía de calidad y esté tratando de determinar por qué cierta parte de una página web se muestra o se comporta de la manera que es.

También podría ser un principiante que intenta aprender a codificar sus propias páginas y está buscando algunos ejemplos del mundo real. Por supuesto, es posible que no caigas en ninguna de estas categorías y solo quieras ver la fuente por pura curiosidad.

A continuación se enumeran instrucciones sobre cómo ver el código fuente en el navegador que elija.

Google Chrome

Ejecutando 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 simple mediante el siguiente método abreviado de teclado: CTRL + U ( COMANDO + OPCIÓN + U en macOS).

Cuando se presiona, este acceso directo abre una nueva pestaña del navegador que muestra HTML y otro código para la página activa. Esta fuente está codificada por colores y estructurada de una manera que simplifica la compartimentación y la búsqueda de lo que está buscando. También puede llegar ingresando el siguiente texto en la barra de direcciones de Chrome, adjunto al lado izquierdo de la URL de la página web, y seleccionando la tecla Enter : ver-fuente: (es decir, ver fuente: https: //www.lifewire.com).

El tercer método es a través de las herramientas de desarrollador de Chrome, que le permiten profundizar en el código de la página, así como modificarlo sobre la marcha para fines de prueba y desarrollo. La interfaz de las herramientas de desarrollador se puede abrir y cerrar utilizando este método abreviado de teclado: CTRL + MAYÚS + I ( COMANDO + OPCIÓN + I en macOS). También puede iniciarlos tomando la siguiente ruta.

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

  2. Cuando aparezca el menú desplegable, desplace el cursor del mouse sobre la opción Más herramientas .

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

Android

Ver la fuente de una página web en Chrome para Android es tan simple como agregar el siguiente texto al frente de su dirección (o URL) y enviarlo: view-source: . Un ejemplo de esto sería view-source: https: //www.lifewire.com . HTML y otros códigos de la página en cuestión se mostrarán instantáneamente en la ventana activa.

iOS

Si bien no hay métodos nativos para ver el código fuente usando Chrome en su iPad, iPhone o iPod touch, el más simple y efectivo es utilizar una solución de terceros, como la aplicación View Source.

Disponible por $ 0.99 en la App Store, View Source le solicita que ingrese la URL de la página (o que la copie/pegue desde la barra de direcciones de Chrome, que a veces es la ruta más simple) y eso es todo. Además de mostrar HTML y otro código fuente, la aplicación también tiene pestañas que muestran activos de página individuales, el Modelo de Objeto de Documento (DOM), así como el tamaño de página, las cookies y otros detalles interesantes.

Microsoft Edge

Ejecutando 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 de Herramientas para desarrolladores. Para acceder a este útil conjunto de herramientas, puede usar uno de estos métodos abreviados de teclado: F12 o CTRL + U . Si prefiere el mouse, haga clic en el botón de menú de Edge (tres puntos ubicados 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 agrega dos opciones adicionales al menú contextual del navegador (accesible haciendo clic derecho en cualquier lugar dentro de una página web): Inspeccionar elemento y Ver fuente , este último que abre la parte Depurador de la interfaz de herramientas de desarrollo llena de código fuente.

Mozilla Firefox

Ejecutando en: Linux, macOS, Windows

Para ver el código fuente de una página en la versión de escritorio de Firefox, puede presionar CTRL + U ( COMANDO + U en macOS) en su teclado, que abrirá una nueva pestaña que contiene HTML y otro código para la página web activa.

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

Otra forma de acceder al código fuente de una página es a través de las herramientas de desarrollador de Firefox, a las que se accede siguiendo los siguientes pasos.

  1. Seleccione el botón del menú principal, ubicado 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 «llave inglesa» Desarrollador .

  3. El menú contextual del desarrollador web ahora debería estar visible. Seleccione la opción Fuente de la página .

Firefox también le permite ver el código fuente de una parte particular de una página, lo que facilita el aislamiento de problemas. Para hacerlo, primero, resalte el área que le interesa con el mouse. A continuación, haga clic con el botón derecho y elija Ver fuente de selección en el menú contextual del navegador.

Android

La visualización del código fuente en la versión de Android de Firefox se puede lograr con el prefijo de la URL de la página web con el siguiente texto: view-source: . Por ejemplo, para ver la fuente HTML de Dotdash, debe enviar el siguiente texto en la barra de direcciones del navegador: view-source: https: //www.dotdash.com .

iOS

Nuestro método recomendado para ver el código fuente de la página web en su iPad, iPhone o iPod touch es a través de la aplicación View Source, disponible en la App Store por $ 0.99. Si bien no está integrado directamente con Firefox, puede copiar y pegar fácilmente una URL del navegador en la aplicación para descubrir el código HTML y otros códigos asociados con la página en cuestión.

Safari de manzana

Ejecutando en iOS y macOS

iOS

Aunque Safari para iOS no incluye la capacidad de ver el origen de la página de manera predeterminada, el navegador se integra de manera bastante fluida con la aplicación Ver código fuente, disponible en la App Store por $ 0.99.

Después de instalar esta aplicación de terceros, regrese al navegador Safari y toque el botón Compartir, ubicado en la parte inferior de la pantalla y representado por un cuadrado y una flecha hacia arriba. La hoja Compartir de iOS ahora debería estar visible, superponiendo la mitad inferior de la ventana de Safari. Desplácese hacia la derecha y seleccione el botón Ver código fuente .

Ahora debe mostrarse 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 más.

macOS

Para ver el código fuente de una página en la versión de escritorio de Safari, primero debe habilitar su menú Desarrollar . Los pasos a continuación lo guían para activar este menú oculto y mostrar la fuente HTML de una página.

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

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

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

  4. Hacia la parte inferior de la sección Avanzada hay una opción etiquetada 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 colocar una marca de verificación y cierre la ventana de Preferencias haciendo clic en la ‘x’ roja que se encuentra en la esquina superior izquierda.

  5. Seleccione el menú Desarrollar , ubicado en la parte superior de la pantalla.

  6. Cuando aparezca el menú desplegable, seleccione Mostrar fuente de la página . También puede utilizar el siguiente método abreviado de teclado: COMANDO + OPCIÓN + U .

Ópera

Ejecutando en: Linux, macOS, Windows

Para ver el código fuente de la página web activa en el navegador Opera, use el siguiente método abreviado 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 presione Enter: view-source: ( es decir, view-source: https: //www.lifewire.com ).

La versión de escritorio de Opera también le permite ver la fuente HTML, CSS y otros elementos mediante el uso de sus herramientas de desarrollo integradas.Para iniciar esta interfaz, que aparecerá de forma predeterminada en el lado derecho de la ventana principal del navegador, presione el siguiente método abreviado de teclado: CTRL + MAYÚS + I ( COMANDO + OPCIÓN + I en macOS).

También se puede acceder al conjunto de herramientas para desarrolladores de Opera siguiendo los siguientes pasos.

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

  2. Cuando aparezca el menú desplegable, desplace el cursor del mouse sobre la opción Más herramientas .

  3. Haga clic en Mostrar menú de desarrollador .

  4. Seleccione el logotipo de Opera nuevamente.

  5. Cuando aparezca el menú desplegable, desplace el cursor sobre Desarrollador .

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

Vivaldi

Hay varias formas de ver la 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 agregar el siguiente texto al frente de la URL de la página, que muestra el código fuente en la pestaña actual: view-source: Un ejemplo de esto sería view-source: http: //www.dotdash. com .

Otro método es a través de las herramientas de desarrollador integradas del navegador, accesibles presionando la combinación CTRL + MAYÚS + I o mediante la opción Herramientas de desarrollador en las Herramientas menú: 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.

Rate article
labsfabs.com
Add a comment