¿Qué es la fuente de la página de vista previa?

En los menús de Chrome y Chromium aparece «Ver código fuente de la página». Esto permite a los desarrolladores y usuarios saber qué sucede detrás de escena cuando se carga una página en el navegador. Es una ventana a las complejidades de HTML, CSS y JavaScript que componen los sitios web que navega todos los días.

Google Chrome: ¿Qué es la fuente de la página de vista previa?

Configuración del código fuente de la página de vista previa en Chrome

La opción Ver código fuente de la página ayuda a los desarrolladores a analizar y depurar una página web y brinda a los entusiastas una descripción general de los componentes básicos de los sitios web.

Ver el código fuente le permite ver cada ingrediente de la página web (HTML), cómo se representa (CSS) y las interacciones de codificación que lo unen todo (JavaScript). Esta vista detallada es invaluable para la resolución de problemas. ¿Hay algún problema de diseño? La inspección de la fuente de la página puede revelar que falta una etiqueta. ¿Un botón no responde? La sección de JavaScript puede contener la respuesta.

No puede cambiar el código, probarlo ni obtener una vista previa de los cambios como puede hacerlo cuando utiliza la opción Inspeccionar (DevTools). Sin embargo, ofrece una vista rápida para identificar todo lo que necesita, ya sea con fines educativos, de depuración o de investigación.

Cómo acceder al código fuente de una página web en Chrome

Existen dos métodos para acceder al código fuente de una página web en los navegadores Chrome y Chromium. Además, solo un método funciona para páginas protegidas al hacer clic derecho. Vamos a empezar.

Uso de la opción de menú 'Ver código fuente de la página'

Esta opción es la forma más sencilla de revisar el código fuente de una página web y funciona para cualquier página en línea.

  1. Abierto Google Chrome o navegador Chromium como Borde o Corajudo.
  2. Acceder al sitio web o página de interés.
  3. Haga clic derecho en un área abierta y seleccione Ver código fuenteo presione Ctrl + tú (Windows) o Comando + tu (Mac).
    Utilice la opción Ver código fuente de la página de Chrome para ver código HTML, CSS y Java.
  4. Luego, el código fuente se mostrará en una nueva pestaña, similar al diseño de un editor de texto.

Usando la opción de URL 'ver fuente'

  1. Tirar Google Chrome o un navegador Chromium como Borde o Corajudo.
  2. Acceder al sitio web o página de interés.
  3. En la barra de direcciones, escriba fuente de visualización: (URL de la página web aquí)como el siguiente:
    fuente de vista previa:
    Vea el código fuente de una página web agregando view-source: a la URL.
  4. Luego, el código fuente se mostrará en una nueva pestaña, similar al diseño de un editor de texto.

Vea cómo ver el código HTML en Chrome para obtener una visión más detallada de cómo acceder a la función en otros dispositivos.

No copie ni utilice el contenido fuente de la página directamente

Mirar el código fuente de un sitio web es una forma sencilla de obtener información sobre su estructura y contenido. Sin embargo, no proporciona información más avanzada como depuración o análisis de rendimiento. Además, es posible que el contenido dinámico generado por JavaScript no sea visible en el código fuente.

Es importante recordar que cada sitio web es único y lo que funciona para uno puede no funcionar para otro. Además, es posible que encuentres sitios web mal optimizados que sirvan de ejemplo de lo que no se debe hacer.

Preguntas frecuentes

P: ¿Es seguro cambiar el código HTML, CSS y Java en Inspect?

A: Puedes hacer lo que quieras en el modo de visualización en Chrome o en un navegador Chromium. No altera el sitio web de ninguna manera. Estás realizando ediciones en tiempo real solo para ver la página de la izquierda.

P: ¿No es la opción 'Ver código fuente' una pérdida de tiempo?

A: No, la vista del código fuente permite a los desarrolladores echar un vistazo a las instrucciones HTML, CSS y Java existentes para encontrar problemas simples o mala codificación, en lugar de buscar en una herramienta de desarrollo. Es una opción de vista rápida, así como una función de vista rápida para archivos de PC donde no abre otros programas. Además, las personas pueden copiar fragmentos de código y pegarlos en una herramienta de desarrollo de sitios web.

Botón volver arriba