Cómo ver el código fuente en Chrome, Firefox y Safari | We.Inc
Atajos de teclado para ver el código fuente HTML de una página en Chrome, Firefox y Safari, en qué se diferencia de Inspeccionar, qué puedes reutilizar y un visor que resume el HTML que pegues.
Cómo ver el código fuente de una página
Pulsa Ctrl+U en Windows o Linux con Chrome y Firefox. En un Mac, Chrome usa Command+Option+U y Firefox usa Command+U. También puedes hacer clic derecho en una zona vacía de la página y elegir Ver código fuente de la página. En Safari, primero tienes que activar sus funciones para desarrolladores en Ajustes, en Avanzado.
Atajos para ver el código fuente por navegador (páginas de ayuda oficiales)
Navegador
Windows o Linux
Mac
Chrome
Ctrl+U
Command+Option+U
Firefox
Ctrl+U
Command+U
Safari
No disponible
Activa primero Mostrar funciones para desarrolladores web (Ajustes, Avanzado)
Cualquiera de los anteriores
Clic derecho en la página y luego Ver código fuente de la página
Clic derecho (o Control + clic) en la página
El código fuente de una página es el archivo HTML que envió el servidor antes de que se ejecutara ningún script. Te dice qué título y descripción usa una página, qué etiquetas de seguimiento carga y dónde están sus imágenes. Por eso es la forma más rápida de revisar tu propia web después de un cambio, o de ver cómo está construida una página que te gusta.
Abre la página que quieres leer y pulsa el atajo de tu navegador.
Usa la búsqueda del navegador (Ctrl+F o Command+F) para saltar a lo que necesitas, como <title o og:image.
Para estudiarlo con más comodidad, cópialo todo y pégalo en el visor de arriba.
Para ver la página tal como queda después de ejecutarse los scripts, usa Inspeccionar.
Firefox te permite enlazar a una sola línea: añade #line100 al final de una dirección view-source:.
En Firefox, selecciona un texto, haz clic derecho y elige Ver código fuente de la selección para ver solo esa parte.
Las páginas creadas con un framework de JavaScript suelen mostrar un código fuente casi vacío. Inspeccionar muestra lo que construyeron los scripts.
Revisa tus propias páginas después de cada rediseño: un título o una descripción que falten se ven al instante en el código fuente.
Preguntas frecuentes
¿Qué diferencia hay entre Ver código fuente e Inspeccionar?
Ver código fuente muestra el archivo original del servidor. Inspeccionar abre las herramientas para desarrolladores del navegador, donde, según explica la documentación de Chrome, el árbol DOM muestra el estado actual de la página, que difiere del HTML en cuanto JavaScript añade, quita o edita partes.
¿Puedo copiar el código HTML de una web?
Puedes leerlo y aprender de él. Reutilizarlo es otra cosa: la Oficina de Derechos de Autor de EE. UU. dice que los textos, las ilustraciones y las fotografías originales de una web pueden estar protegidos. Los derechos de autor no cubren ideas, sistemas ni métodos, así que aprende la técnica y escribe tu propia versión. Esto es información general, no asesoramiento legal.
¿Por qué no aparece la opción de ver el código fuente?
En Safari permanece oculta hasta que marcas Mostrar funciones para desarrolladores web en Ajustes, Avanzado. En un ordenador gestionado del trabajo o del centro educativo, puede que un administrador haya desactivado las herramientas para desarrolladores; pregúntale.
¿Puedo ver el código del servidor de una web, como PHP o las consultas a la base de datos?
No. El servidor ejecuta ese código y solo envía el HTML, el CSS y el JavaScript resultantes. Nada en el código fuente de la página revela qué lo generó.
Qué buscar en el código fuente de tu propia página
Cerca del principio, dentro de <head>, encontrarás el <title> y la <meta name="description">, el texto que muestran los resultados de búsqueda. Más abajo están las etiquetas og:, que controlan la vista previa de los enlaces en redes sociales, y los scripts de analítica o de gestores de etiquetas.
Si un cambio que hiciste en el editor de tu web no aparece aquí, puede que la página esté en caché. Recarga una vez y vuelve a comprobarlo.
Reutilizar lo que encuentres
Los derechos de autor protegen la forma en que algo se expresa, no la idea que hay detrás. Una idea de diseño o una técnica común se pueden usar libremente; las fotos, los textos y las ilustraciones de otra persona no, salvo que su licencia lo permita.
Ver código fuente, Inspeccionar y view-source: comparados
Tres formas de leer el código de una página
Método
Muestra
Permite editar
Ideal para
Ver código fuente de la página
El HTML que envió el servidor
No
Revisar títulos, metaetiquetas y scripts de seguimiento
Inspeccionar (herramientas para desarrolladores)
La página en vivo después de ejecutarse los scripts
Sí, temporalmente
Encontrar qué código dibuja un botón o una imagen
view-source: en la barra de direcciones (Firefox)
Lo mismo que Ver código fuente
No
Enlazar a una línea, como #line100
Búsquedas útiles dentro del código fuente
Pulsa Ctrl+F (Command+F en Mac) en la pestaña del código fuente y busca esto para encontrar las partes más importantes.
Qué buscar
Cada línea es algo que escribir en la búsqueda, seguido de lo que localiza.
Visor de código fuente
Pega el HTML que copiaste de Ver código fuente. Se queda en tu navegador; no se sube ni se descarga nada.