Cómo ver la fuente de la página web en iPhone/iPad: 7 métodos

Suponga que está visitando un sitio web en el que trabajó y ve algunas fallas. Debe ver la fuente de la página en iPhone o iPad para encontrar el código de error y corregirlo. Abre Safari y se vuelve loco para encontrar el botón de vista de código fuente HTML en Safari sin éxito. ¿Qué haces ahora? ¡Es fácil, solo lee este artículo!

Todos los desarrolladores de sitios web, programadores, diseñadores de software, desarrolladores de aplicaciones de App Store, creadores de contenido y webmasters saben lo crucial que es el código fuente. En esta parte del trabajo, siempre debe mirar el código fuente de una página web para corregir problemas, depurar, diseñar y agregar valor al sitio web.

Si bien esta tarea es bastante fácil en dispositivos Android y Windows, es igualmente difícil en dispositivos Apple como iPhone, iPad, MacBook e iMac. Sin embargo, en macOS, la función está disponible pero oculta y puede encontrarla siguiendo este "Ver código fuente HTML en Safari" artículo. Sin embargo, para los dispositivos iOS, es una historia diferente.

Apple hizo absolutamente difícil ver las fuentes de la página en iPad/iPhone. No hay ningún método nativo, o debería decir, fácil que pueda tocar o tocar para obtener el código fuente HTML de las páginas web. Pero no te vuelvas demasiado loco todavía. En su lugar, lea este artículo hasta el final para encontrar las mejores formas de aprender a ver la fuente de la página en Safari en iPhone o iPad.

Razones por las que debe ver la fuente de la página en iPhone/iPad

Encuentre a continuación algunas situaciones y razones para ver las fuentes de la página en Safari en iPad/iPhone:

Debe ver la fuente de la página de una página web para un dispositivo específico como iPhone o iPad. Si accede al sitio web en Mac y ve el código fuente HTML, verá los elementos de la versión de escritorio, no las versiones de iPhone o iPad.
Estás de viaje y quieres invertir tu tiempo en buscar códigos de páginas web para obtener nuevas ideas o crear un plan de depuración.
Prefiere hacer el desarrollo de sitios web en su iPad, ya que viene con muchas funciones multitarea como Director de escena, Vista dividida, etc.

Por lo tanto, siga los métodos a continuación para estar preparado en caso de que la necesidad de ver la fuente de la página en iPhone o iPad aparezca en cualquier momento.

Los mejores métodos para ver la fuente de la página en iPhone/iPad

A continuación se muestran las formas populares de ver las fuentes de la página en códigos HTML en un iPhone o iPad sin aprovechar ninguna aplicación de terceros. Estos métodos son apropiados para codificadores y usuarios finales preocupados por la privacidad y la seguridad:

1. Obtenga el código fuente HTML usando la aplicación de accesos directos

Este método solo funcionará si está ejecutando iOS 12.0 (iPadOS 12.0) y versiones posteriores. Aquí se explica cómo crear un acceso directo a la fuente de la página de visualización en iPhone o iPad:

Abre el Atajos aplicación desde la pantalla de inicio o el cajón de aplicaciones.
Toque en el más (+) icono para crear un nuevo acceso directo vacío.
En el cuadro de búsqueda, escriba HTML y recoger Hacer HTML a partir de texto enriquecido.
De nuevo, busque el Vistazo rápido app en el cuadro de búsqueda y agréguelo al editor de accesos directos.
Ahora, toque el ícono de acceso directo en la parte superior y elija Rebautizar.

Acceso directo para ver el código fuente en las páginas web

Cambiarle el nombre a Ver código fuente y toca Listo.
Toque en el (i) y activa el botón Mostrar en Compartir hoja opción.
Ahora, abra el navegador Safari y visite una página web de su elección.

Ver acceso directo al código fuente en la hoja para compartir en Safari

Toca el Compartir en la aplicación Safari y desplácese hacia abajo para encontrar el Ver código fuente atajo.
Toque el acceso directo y obtendrá el código fuente HTML en Quick Look.

2. Ver código fuente de la página mediante un script de marcador

En este método, creará un marcador y la URL será una secuencia de comandos de fuente de vista. Cuando navega por cualquier página web y necesita ver la fuente de la página en Safari, simplemente toque el marcador. Obtendrá un código fuente HTML para la página. Así es como se hace:

Visite un sitio web aleatorio y márquelo como favorito en su navegador Safari para iPad o iPhone.
Toque en el menú safari en la esquina superior izquierda y vaya a Marcadores.
Tocar Favoritos para encontrar el marcador que acaba de agregar.
Mantenga presionado el marcador y luego seleccione Editar en el menú contextual.

Cómo editar el título y la dirección del marcador

Borre el título del marcador existente y cámbiele el nombre a código fuente HTML o cualquier otra cosa solo para recordar el marcador.
Toque en el DIRECCIÓN y borre la URL existente.
Copie y pegue el siguiente código como URL (creador del código: Rob Flaherty):

javascript:(function(){var a=window.open('about: blank').document; a.write('');a.close();var b=a.body.appendChild (a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace=' pre-wrap';b.appendChild (a.createTextNode (document.documentElement.innerHTML))})();

Grifo Hecho en el teclado para guardar los cambios realizados hasta el momento.
Ahora, vaya a la página web para la que necesita inspeccionar el código fuente.

Cómo ver la fuente de la página en Safari usando un script de marcadores

Ve a la Marcadores menú y toca el código fuente HTML marcador que acaba de crear.
Debería ver el código HTML de la página que está visitando en una nueva pestaña de Safari.

Lea también:Cómo administrar marcadores en Safari en iOS y Mac

3. Ver el código fuente de la página con macOS Tethering

La aplicación Safari en iPhone y iPad viene con una herramienta Web Inspector integrada. Desafortunadamente, la función no funciona directamente en dispositivos iPhone o iPad. Debe conectar los dispositivos a una MacBook o iMac. Luego, puede usar los controles en Mac Safari para visualizar el código fuente HTML. El proceso funciona en dos fases como se describe a continuación:

Activar inspector web

Siga estos pasos para encender inspector web funcionalidad en Safari para iPad y iPhone:

En su iPhone o iPad, abra el Ajustes aplicación
Ir a Configuración de Safari.
Desplácese hacia abajo hasta la parte inferior de la ventana Configuración de Safari para encontrar el Avanzado menú. Tócalo.

Cómo obtener Web Inspector en Safari iPad

Activar el inspector web tocando el botón de alternancia.

Ver código fuente de la página en Mac Safari

Ve a tu Mac y sigue estos pasos:

Conecte el iPhone o iPad con una MacBook o iMac usando el cable USB.
Si el dispositivo no se ha autenticado antes, Mac le pedirá que lo autentique con el ID de Apple.
Ahora abra la aplicación Safari en Mac y visite cualquier sitio web.
En la barra de herramientas de Mac, haga clic en Desarrollar.
Busque su iPad o iPhone en el menú contextual que se abre.
Haga clic en su iPad o iPhone para abrir una nueva ventana en su Mac que muestra la pantalla de Safari de estos dispositivos.
Ahora, abra el sitio web de destino en su iPhone o iPad y vea el código fuente en el navegador Mac Safari.

Si está de acuerdo con las aplicaciones y herramientas de terceros, es posible que también desee ver estos métodos adicionales para ver los códigos fuente HTML de las páginas web:

4. Extensión de Safari: inspector web

Puede instalar la extensión Web Inspector para el navegador Apple Safari en iPad y iPhone. Luego, llame a la extensión cuando navegue por una página web para ver su código fuente HTML. Estos son los pasos que debe intentar:

Abre el Ajustes aplicación e ir a la Configuración de Safari sección.
Desplázate hacia abajo hasta que encuentres el Extensiones opción. Tócalo.

Vaya a Más extensiones en la configuración de Safari

Extensiones internas, toque Más extensiones.
Aparecerá la página de la tienda de aplicaciones para las extensiones de Safari.
Toca el Buscar caja y tipo inspector web y toca Buscar en el teclado.
Busque e instale la aplicación Web Inspector.
De nuevo ve a Ajustes > Safari > Extensiones > y toca inspector web.
Use el botón de alternar para activar esta extensión para Safari.
Abre Safari y visita cualquier sitio web.

Active Web Inspector desde el menú Extensiones de Safari

Toque en el Extensiones icono en la esquina derecha de la barra de direcciones.
Selecciona el inspector web extensión.
Elegir el Permitir un día opción en la ventana emergente que aparece.
De nuevo, toca el Extensiones y luego toque Web Inspector.
El código fuente HTML debería aparecer en la parte inferior de la página web que está viendo.

Aprenda a ver la fuente de la página en iPhone o iPad usando Web Inspector

Puede cambiar entre pestañas como DOM, Elementos, Consola, Red y Recursos.
Para volver a la vista normal, simplemente toque la extensión Web Inspector en la sección Extensiones de Safari.

5. Aplicación iOS – Ver código fuente

Puedes conseguirlo gratis en la App Store. En el cuadro de búsqueda, escriba Ver código fuente y toque Buscar. Verás múltiples resultados en la App Store. Instale el que dice Ver código fuente. El proveedor de la aplicación es Roman Tomjak.

Abra la aplicación desde la pantalla de inicio o el cajón de aplicaciones. Luego, escriba la URL del sitio web en su barra de direcciones para revelar el código fuente HTML.

Cómo usar la aplicación Ver código fuente

La herramienta ofrece una vista del código fuente del tamaño de un iPhone. Sin embargo, puede cambiar la orientación o hacer zoom usando los botones correspondientes en la esquina inferior derecha de la pantalla.

6. Ver el código fuente de forma gratuita con Google Web Cache

Puede realizar el siguiente truco limpio y genial en los sitios web visitados para ver su código fuente subyacente en Safari o Chrome:

Visite la página web para la que necesita encontrar el código fuente HTML.
Toque la dirección en la barra de direcciones de Safari o Chrome.

Tome el cursor de escritura al comienzo de la dirección como se muestra en la imagen de arriba.

Ahora, escriba el siguiente código antes https://

cache:

Golpea el Ir botón en el teclado de iOS.

Cómo ver la fuente de la página en Safari usando Google Web Cache

En la parte superior de la página, debe ver el Ver fuente opción. Tócalo.
Ahora obtienes el código fuente de la página web que acabas de visitar.

Lea también:Cómo importar sus marcadores, contraseñas y más

7. Ver código fuente en aplicaciones web

Hay muchos sitios web que le permiten revelar los códigos fuente subyacentes de los sitios web y las páginas web de forma gratuita o por una pequeña tarifa. De todas esas aplicaciones web, elegí el visor de código fuente de CodeBeautify. Así es como funciona:

En iPhone o iPad, vaya a este enlace: Visor de código fuente utilizando el navegador Safari.

Cómo ver el código fuente en las aplicaciones web

En el Introducir URL cuadro, escriba o copie y pegue la URL de la página web para la que desea revelar el código fuente HTML.
Toque en el Vista botón para ver la fuente de la página en el navegador Safari de iPhone/iPad.

Conclusión

Entonces, ahora conoce todos los trucos para ver la fuente de la página en dispositivos iPhone y iPad. Descubrió algunos métodos nativos y no nativos en este artículo. Simplemente puede apegarse a los trucos nativos en iPad o iPhone para ver el código fuente HTML de las páginas web o usar aplicaciones que facilitan mucho la tarea.

Déjame saber qué método te gustó dejando un comentario a continuación. Además, comparta el artículo en las redes sociales y WhatsApp para ayudar a sus amigos que están aprendiendo desarrollo de sitios web y codificación de aplicaciones.

A continuación, Cómo aprender Swift en Mac y iPad.