Ver fuente HTML, CSS y JavaSCript en una página web en Google Chrome - Mundo2030

Aprender es divertido y aprender tus páginas web favoritas debería ser aún más divertido. ¿Alguna vez te llamó la atención un elemento en una página web y te interesó saber cómo se creó? ¡No necesita buscar libros HTML o CSS para esto! !! !! Los navegadores modernos como Chrome ofrecen herramientas de análisis web muy simples y potencialmente poderosas. Esta es una habilidad práctica que es muy necesaria cuando se analiza la estructura de las páginas web.

Si bien el objetivo principal de estas herramientas es resolver sus propios problemas, su diseño también se puede utilizar para comprender cómo los expertos diseñan su contenido para que pueda comprender los conceptos. En este artículo, analicemos las instrucciones paso a paso para ver el código fuente HTML de una página web utilizando el navegador web Google Chrome.

Analicemos cada tema en detalle en las siguientes secciones.

1. Componentes de la página web

La página web suele constar de las siguientes partes:

• Contenido de la página: texto, imágenes, videos, etc., marcados en HTML.
• Alineación y apariencia visual, generalmente controlada por CSS.
• Scripts: activa acciones por parte del cliente o del servidor.

CSS se puede utilizar en páginas web de tres maneras diferentes:

• Estilos incorporados: afectan la apariencia visual de los elementos individuales.
• Estilos interiores: afecta a todos los elementos de la página.
• Hojas de estilo externas: afecta a todos los elementos del sitio web.

Puede ver cómo el orden de los estilos CSS afecta la apariencia de una página web. Los scripts también se pueden usar de varias maneras, de forma similar a CSS. El código fuente de la página web contiene todos estos componentes y puedes verlos de diferentes formas.

2. Ver HTML, estilos CSS incrustados e internos

Para ver el contenido HTML de la página, los estilos incorporados y los estilos internos, abra la página en el navegador Chrome. Haga clic con el botón derecho en cualquier parte de la página y seleccione "Ver fuente de la página" Las opciones se muestran a continuación:

notas: Si hace clic derecho en el marco incorporado, se mostrará el navegador "Descripción general de la fuente del marco" opción en lugar de "Ver el código fuente de la página".

Esto abrirá una nueva ventana que mostrará el contenido y los estilos HTML para resaltar cada elemento utilizado en la página. Algunos sitios le mostrarán una vista muy clara del código fuente, pero los sitios más recientes mostrarán el código fuente sin saltos de línea. Esta es una versión reducida y comprimida del código fuente y casi todos los sitios web ahora usan este formato para reducir el tamaño y mejorar la velocidad de carga de la página.

Como puede ver en la captura de pantalla a continuación, Chrome muestra el código fuente completo en una línea sin interrupciones ni espacios.

3. Ver hojas de estilo externas

La forma más popular y recomendada de usar CSS es vincular hojas de estilo externas al contenido HTML. Para averiguar qué hojas de estilo externas se utilizan en una página, busque la etiqueta "enlace" en el código fuente. Haga clic en el enlace que termina en ".css" para ver todos los elementos de estilo definidos en la hoja de estilo.

Los sitios web pueden usar hojas de estilo externas en una variedad de formatos. En la mayoría de los casos, los archivos CSS terminan con un número de versión o texto adicional, como ".css? Ver1.3". A veces, las versiones minimizadas de los archivos CSS que terminan en ".min.css" también se pueden usar para cargar páginas rápidamente.

Aunque el enlace aparece como un enlace relativo en el código fuente, al hacer clic en él se abrirá la hoja de estilo fuente con una URL absoluta (URL completa con un nombre de dominio).

4. Acceso directo de Chrome para ver el código fuente de la página

Puede ver el código fuente de cada página directamente desde la barra de direcciones de Chrome agregando un prefijo "Ver código fuente:" a la URL de cada página. De esta manera, incluso puede ver el código fuente protegido haciendo clic con el botón derecho página.

view-source:webpage URL

Si la página tiene una redirección 301 correcta, la URL que ingreses será redirigida automáticamente para recibir el contenido. Por ejemplo, ingrese "ver-fuente: susitio.com" para redirigir automáticamente a "ver-fuente: https: //www.susitio.com".

5. Ver el código fuente usando las herramientas de desarrollo

El método anterior servirá el código fuente HTML/CSS sin vincular a elementos individuales presentes en la página web. Usar la vista de código fuente de CSS para averiguar qué estilos usar para cada elemento puede ser una tarea abrumadora.

Al igual que otros navegadores, Google Chrome proporciona herramientas de desarrollo para acceder al código CSS asociado con cada elemento específico de una página web. Haga clic derecho en cualquier elemento de la página web y seleccione "inspeccionar el artículo"o"revisión"opción para abrir la consola del desarrollador en la parte inferior de la página web, como se muestra en la imagen a continuación. También puede abrir la consola del desarrollador desde la ruta del menú"Ajustes > Más herramientas > Herramientas para desarrolladores".

1. Haga clic derecho en un elemento y seleccione "examen" ajustes.
2. Ver HTML y estilos incrustados a continuación "elemento" Etiqueta.
3. Vea los estilos exteriores a continuación "estilo" parte.
4. hacer clic "Móvil" Iconos para ver el sitio web móvil y verificar la fuente HTML/CSS relevante para el contenido móvil.

La consola está dividida en dos secciones con diferentes secciones debajo de cada sección, la parte izquierda muestra el contenido HTML de la página "elemento" CSS en secciones y visualización a la derecha "estilo" Etiqueta. Al hacer clic en cualquier enlace CSS, se abrirá la hoja de estilo a la izquierda. "fuente" Etiqueta.

Para ver el código CSS de cada elemento, seleccione el "cuadro de flecha" en la esquina superior izquierda de la consola (encuentre la lente en la parte inferior de las plataformas de Windows) y haga clic en cada elemento que se resaltará cuando mantenga presionado el mouse. Esto mostrará automáticamente el código CSS asociado con el elemento seleccionado.

6. Ver CSS móvil

Debido a que los estilos de dispositivos móviles y de escritorio pueden diferir, Developer Console ofrece una opción para cambiar la visualización a los dispositivos más populares, como iPhone, iPad, Samsung Galaxy y Google Nexus. Después de seleccionar el dispositivo deseado de la lista desplegable, se mostrará el código CSS correspondiente disponible en la página para ese dispositivo.

1. Haga clic en el botón Cambiar dispositivos en la barra de herramientas.
2. Seleccione un dispositivo de la lista desplegable o haga clic enedición”La opción de agregar su propio dispositivo no está disponible en la lista predeterminada. Puede comprobar el tamaño del dispositivo del dispositivo seleccionado.
3. Aumente o disminuya el porcentaje para ajustar la visualización del navegador.
4. haga clic en "turno”Para cambiar entre las vistas vertical y horizontal.
5. Consulte la vista previa de su elección. Haga clic con el botón derecho en el elemento para el que desea ver la fuente de movimiento y luego haga clic enrevisión"opción.
6. Modifique el elemento para ver el código fuente. Al pasar el mouse sobre el código HTML, se resaltará el elemento correspondiente en la ventana de vista previa del navegador.
7. Encuentre el código fuente CSS del elemento seleccionado. El CSS móvil debe comenzar con "@medios de comunicación"Regla. Si no".@medios de comunicación”, Entonces el CSS común también se aplicará a los dispositivos móviles.

7. Minimice la hermosa vista para imprimir archivos CSS y JavaScript

Hoy en día, es común utilizar versiones minimizadas de archivos CSS y JavaScript en los sitios web. Esto eliminará comentarios innecesarios, espacios, líneas nuevas y hará que el archivo sea .min.css o .min.js. Dicha eliminación de espacio se realiza mediante el mecanismo de almacenamiento en caché utilizado en el sitio web. Aunque todo esto se hace para mejorar la velocidad de la página, hace que el CSS y los scripts sean ilegibles para quienes buscan el código fuente de la página. Chrome proporciona "hermosa impresiónHaga clic en el botón "Hacer clic"hermosa impresión”Para restaurar el archivo minimizado a una versión legible para que pueda verlo fácilmente.

El siguiente es un ejemplo de cómo se ve una secuencia de comandos de minimización de consola de desarrollador. Existo "fuenteHaga clic en el paréntesis de brazalete doble {}.

Verá un aspecto bastante impreso del script como este:

notas: Algunas páginas web impiden hacer clic con el botón derecho para evitar copiar contenido, en cuyo caso puede usar la opción de menú de Chrome Developer Console para acceder a la fuente de la página.

8. Modificación online del contenido de la página web en tiempo real

La mayor ventaja de Chrome Developer Console es la capacidad de reproducir páginas en vivo y ver los cambios directamente en el navegador. Puede cambiar o agregar estilos CSS directamente en Developer Console para ver el efecto de la página en vivo. Por ejemplo, puede cambiar el "tamaño de fuente" del elemento "cuerpo" y ver si los cambios de tamaño de fuente están alineados correctamente. Esta es una opción muy útil y ahorra mucho tiempo sin afectar la experiencia real del usuario; de lo contrario, es posible que deba realizar cambios en el sitio en vivo de forma iterativa para encontrar el estilo correcto.

El selector de color también es uno de los favoritos de los desarrolladores web. Puede cambiar el color de un artículo en línea y verlo al instante. Puede copiar códigos de color RGB o HEX y utilizarlos en sus diseños como un profesional.

Haga clic con el botón derecho en un elemento HTML y use la opción Editar a HTML directamente para agregar o eliminar contenido en línea.

Obtén más información sobre cómo revisar la estructura de las respuestas HTTP en Chrome Developer Console.