Saltar al contenido

¿Cómo ver el código fuente de una página en Chrome Android?

El código fuente de Chrome

A lo largo de los años, muchos nuevos diseñadores web se han preguntado si es aceptable ver el código fuente de un sitio y utilizarlo para su educación y, en última instancia, para el trabajo que realizan. Mientras que copiar el código de un sitio al por mayor y hacerlo pasar como propio en un sitio web no es ciertamente aceptable, el uso de ese código como un trampolín para aprender es en realidad la forma en que muchos avances se hacen en esta industria.

Una cosa que hay que recordar es que los archivos fuente pueden ser muy complicados (y cuanto más complejo sea el sitio web que estás viendo, más complejo será el código de ese sitio). Además de la estructura HTML que compone la página, también habrá CSS (hojas de estilo en cascada) que dictan la apariencia visual de ese sitio. Además, muchos sitios web de hoy en día incluirán archivos de script junto con el HTML.

Es probable que se incluyan varios archivos de script; de hecho, cada uno de ellos impulsa diferentes aspectos del sitio. Francamente, el código fuente de un sitio puede parecer abrumador, especialmente si eres nuevo en esto. No te sientas frustrado si no puedes averiguar lo que está pasando con ese sitio inmediatamente. Ver el código fuente HTML es sólo el primer paso en este proceso. Con un poco de experiencia, empezarás a entender mejor cómo encajan todas estas piezas para crear el sitio web que ves en tu navegador. A medida que te familiarices con el código, podrás aprender más de él y no te parecerá tan desalentador.

Ver código fuente chrome ios

El truco de ver el prefijo de la url de origen no me ha funcionado usando chrome en un iphone. Hay aplicaciones que podría haber instalado para hacer esto, supongo, pero por la razón que sea, he preferido hacerlo yo mismo en lugar de instalar «otra aplicación».

Encontré este bonito y rápido tutorial sobre cómo configurar un marcador en safari móvil que abrirá automáticamente la fuente de visualización de una página: https://appletoolbox.com/2014/03/how-to-view-webpage-html-source-codes-on-ipad-iphone-no-app-required/

Este es un post antiguo pero sigue siendo un problema dentro de las herramientas de desarrollo de Chrome. Me parece que la mejor manera de comprobar la fuente móvil localmente es abrir el sitio localmente en el simulador de iOS de Xcode. A continuación, a partir de ahí se abre el navegador Safari y habilitar las herramientas de desarrollo, si usted no ha hecho esto (ir a las preferencias -> avanzada -> mostrar el menú de desarrollo en la barra de menú). Ahora verás la opción de desarrollo en el menú principal y podrás ir a desarrollar -> Simulador iOS -> y la página que tienes abierta en el Simulador iOS de Xcode estará ahí. Una vez que hagas clic en ella, se abrirá el inspector web y podrás editar como lo harías normalmente en las herramientas de desarrollo del navegador.

Ver fuente en línea

Si esto es para depurar (por tu comentario parece que sí) algo aún mejor es instalar una extensión de cambio de agente de usuario para Firefox o Chrome en tu escritorio. Cambia el agente de usuario a Android y obtendrás la versión móvil del sitio, pero con todas las herramientas de código fuente y depuración a las que estás acostumbrado.

Puedes capturar el código fuente en tu shell o en un archivo de texto si utilizas un emulador, lo que resulta muy útil para el desarrollo. Para ello tendrás que instalar Android Developer Tools, que viene con adb. Enciende tu emulador y luego, desde el shell de tu sistema operativo, ejecuta el comando:

Si quieres coger un trozo específico de la página en lugar de todo, puedes especificar esa parte de la página en lugar de la etiqueta html en tu JQuery, así que si necesitas mirar un solo div que tiene una clase/id asociada (para este ejemplo, tiene una clase llamada ‘inspect-me’), puedes cambiar tu JQuery a:

Kiwi Browser a partir de enero de 2022 ofrece la función «Developer tools» a través de la cual se puede acceder al HTML renderizado entre otras cosas. Vea la captura de pantalla para saber dónde encontrarla. Las herramientas de desarrollo para una página web determinada se cargan en una nueva pestaña.

Chrome ipad view source

Aunque los navegadores web interpretan los archivos de Lenguaje de Marcado de Hipertexto y las Hojas de Estilo en Cascada que hacen que la web aparezca como lo hace, una tecla de acceso directo o un ajuste de la URL obliga a los navegadores a mostrar el código fuente de esa página en una nueva pestaña o ventana. Aunque la mayoría de la gente rara vez necesita examinar el código fuente, los desarrolladores utilizan esta perspectiva para solucionar incoherencias de diseño o para corregir errores en un sitio web.

¿Prefiere el ratón o necesita modificar el HTML sobre la marcha? Todos los principales navegadores cuentan con un comando de ver el código fuente en algún lugar de su estructura de menús, y también admiten un modo de desarrollador (que se llama de varias maneras y se inicia de varias formas) que permite ajustar en tiempo real la forma en que se ejecuta una página en función de los cambios que se realicen en la interfaz de desarrollador.

El navegador original de Android permite el ajuste view-source: URL. En iOS, sin embargo, la aplicación Safari de serie no admite esta función. En la plataforma de Apple, tendrás que lanzar un navegador diferente o una aplicación de visualización de código fuente de la App Store.

Escanee activamente las características del dispositivo para identificarlo. Utilizar datos de geolocalización precisos. Almacenar y/o acceder a la información de un dispositivo. Seleccionar contenidos personalizados. Crear un perfil de contenido personalizado. Medir el rendimiento de los anuncios. Seleccionar anuncios básicos. Crear un perfil de anuncios personalizados. Seleccionar anuncios personalizados. Aplicar la investigación de mercado para generar información sobre la audiencia. Medir el rendimiento de los contenidos. Desarrollar y mejorar los productos.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad