El código fuente de una página web es el conjunto de instrucciones escritas en lenguaje HTML, CSS y JavaScript que hacen posible que la página se muestre en un navegador web. Debes saber cómo hacerlo en diferentes navegadores web y cómo buscar el código fuente de una página web específica.
Acceder al código fuente de una página web
Hay varias maneras de acceder al código fuente y poder inspeccionar una página web, dependiendo del navegador que estés utilizando.
Google Chrome
Para ver el código fuente de una página web en Google Chrome, abre la página que quieres examinar y haz clic derecho en cualquier lugar de la página. En el menú que aparece, selecciona «Ver código fuente» o presiona la combinación de teclas «Ctrl + U» (en Windows) o «Command + Option + U» (en Mac).
Safari
En Safari, ve a la página que deseas analizar y haz clic derecho en cualquier lugar de la página. En el menú que aparece, selecciona «Mostrar código fuente de la página» o presiona la combinación de teclas «Option + Command + U».
Mozilla Firefox
Para ver el código fuente de una página web en Firefox, abre la página que deseas examinar y haz clic derecho en cualquier lugar de la página. En el menú que aparece, selecciona «Ver código fuente de la página» o presiona la combinación de teclas «Ctrl + U» (en Windows) o «Command + U» (en Mac).
Buscar el código fuente de una página web
Si tienes problemas para encontrar el código fuente de una página web específica, puedes usar la función de búsqueda de tu navegador para encontrarlo. A continuación, te mostramos cómo hacerlo en Google Chrome:
- Abre la página que deseas analizar en Google Chrome.
- Presiona la combinación de teclas «Ctrl + F» (en Windows) o «Command + F» (en Mac) para abrir la función de búsqueda.
- Escribe «<html>» en la barra de búsqueda y presiona Enter.
- El navegador resaltará la primera aparición de «<html>» en el código fuente de la página.
También puedes usar esta función de búsqueda para encontrar otras etiquetas HTML, clases de CSS o scripts de JavaScript en el código fuente de la página.
Ver el código fuente en Chrome
Google Chrome es uno de los navegadores web más populares y es fácil de usar para ver el código fuente de una página web. Si quieres profundizar en la herramienta de inspección de Chrome, que te permite analizar el código fuente de una página web de forma más detallada, sigue estos pasos:
- Abre la página que deseas analizar en Google Chrome.
- Haz clic derecho en cualquier lugar de la página y selecciona «Inspeccionar» o presiona la combinación de teclas «Ctrl + Shift + I» (en Windows) o «Command + Option + I» (en Mac).
- La herramienta de inspección de Chrome aparecerá en el lado derecho de la pantalla.
- Haz clic en la pestaña «Elements» para ver el código fuente de la página en una vista de árbol
En la pestaña «Elements» también puedes seleccionar cualquier elemento en la página para ver su código fuente correspondiente en la sección «Elements». Si haces clic derecho en cualquier elemento y seleccionas «Edit as HTML», podrás modificar el código fuente de la página en tiempo real.
Comando para ver el código fuente en Chrome
Si prefieres usar la línea de comandos en lugar de hacer clic con el ratón, también puedes ver el código fuente de una página web en Chrome utilizando el comando «curl». Sigue estos pasos:
- Abre la página que deseas analizar en Google Chrome.
- Haz clic derecho en cualquier lugar de la página y selecciona «Inspeccionar» o presiona la combinación de teclas «Ctrl + Shift + I» (en Windows) o «Command + Option + I» (en Mac).
- La herramienta de inspección de Chrome aparecerá en el lado derecho de la pantalla.
- Haz clic en la pestaña «Console».
- En la línea de comandos en la parte inferior de la pantalla, escribe «document.documentElement.outerHTML» y presiona Enter.
- Chrome mostrará el código fuente de la página web en la consola.
Ver el código fuente en Safari
Si utilizas Safari como tu navegador web principal, también puedes ver el código fuente de una página web fácilmente:
- Abre la página que deseas analizar en Safari.
- Haz clic derecho en cualquier lugar de la página y selecciona «Mostrar código fuente de la página» o presiona la combinación de teclas «Option + Command + U».
- Safari abrirá el código fuente de la página en una nueva ventana.
En la ventana de código fuente de Safari, puedes usar la función de búsqueda de tu navegador para encontrar cualquier elemento en el código fuente de la página. También puedes hacer clic derecho en cualquier elemento en la página y seleccionar «Inspeccionar elemento» para ver su código fuente correspondiente en la ventana de código fuente.
Firefox ver código fuente
Finalmente, si utilizas Mozilla Firefox como tu navegador web principal, también puedes ver el código fuente así:
- Abre la página que deseas analizar en Firefox.
- Haz clic derecho en cualquier lugar de la página y selecciona «Ver código fuente de la página» o presiona la combinación de teclas «Ctrl + U» (en Windows) o «Command + U» (en Mac).
- Firefox abrirá el código fuente de la página en una nueva pestaña.
Al igual que en los casos anteriores, en la pestaña de código fuente de Firefox, puedes usar la función de búsqueda de tu navegador y hacer clic derecho en cualquier elemento en la página y seleccionar «Inspeccionar elemento» para ver su código fuente correspondiente.
El código fuente es una herramienta muy útil para poder crear, consultar y modificar la estructura y diseño de una página web. En el posicionamiento SEO es utilizado casi a diario, por lo que nunca está de más conocer cómo utilizarlo.