El código HTML de una página web corresponde al conjunto de instrucciones textuales que el navegador interpreta para mostrar contenido en la pantalla. Acceder a este código permite entender la estructura de un sitio, diagnosticar un error de visualización o analizar el marcado de un competidor. Existen dos métodos principales, y no muestran lo mismo.
Fuente bruta y DOM renderizado: dos visiones del código HTML
Cuando un navegador carga una página, primero recibe un archivo HTML bruto enviado por el servidor. Este archivo contiene las etiquetas tal como fueron escritas del lado del servidor, antes de cualquier modificación por JavaScript.
La fuente bruta se consulta a través del atajo Ctrl + U (o Cmd + U en Mac) en la mayoría de los navegadores. El contenido mostrado corresponde exactamente a la respuesta HTTP inicial. En un sitio estático clásico, esta fuente refleja fielmente lo que el visitante ve.
En las aplicaciones modernas de tipo SPA (Single Page Application), la situación difiere radicalmente. La fuente bruta puede parecer casi vacía, ya que el contenido visible es generado dinámicamente por JavaScript después de la carga inicial. Para ver el estado real de la página tal como aparece en el navegador, es necesario consultar el DOM renderizado a través de las herramientas de desarrollo. Entender el código html de una página web pasa, por lo tanto, por la distinción entre estas dos capas.
La pestaña Elements de DevTools muestra el DOM tal como existe después de la ejecución de todos los scripts. Los nodos añadidos, modificados o eliminados por JavaScript aparecen en tiempo real. Esta vista refleja lo que el navegador ha construido realmente en memoria, no lo que el servidor ha enviado.
Atajos de teclado para mostrar el código en cada navegador
Los tres navegadores de escritorio más comunes comparten atajos similares, con algunas variantes.
- Google Chrome: Ctrl + U para la fuente bruta, F12 o Ctrl + Shift + I para abrir DevTools en la pestaña Elements que muestra el DOM renderizado.
- Mozilla Firefox: mismo atajo Ctrl + U para la fuente. Las herramientas de desarrollo se abren con F12. Firefox ha corregido recientemente casos particulares de visualización de fuente para documentos de tipo blob: y srcdoc.
- Safari: el menú Desarrollo debe activarse manualmente en las preferencias. Una vez activo, el atajo Cmd + Option + U muestra la fuente, y Cmd + Option + I abre el inspector web.
Un punto a recordar: el atajo Ctrl + U siempre muestra la fuente del servidor, nunca el DOM modificado. Para depuración en un sitio dinámico, DevTools sigue siendo la única opción confiable.
Consultar el código HTML en móvil con el prefijo view-source
En un smartphone Android equipado con Chrome, no existe un atajo de teclado ni un menú integrado para mostrar la fuente. El método documentado consiste en escribir view-source: directamente delante de la URL en la barra de direcciones.
Por ejemplo, para examinar el HTML de example.com, solo hay que ingresar view-source:https://example.com en Chrome móvil. El navegador mostrará entonces el código bruto enviado por el servidor, en una vista de texto plano.
Esta técnica también funciona en desktop, pero cobra todo su sentido en móvil donde las herramientas de desarrollo no son accesibles de forma nativa. En iOS, Safari móvil no ofrece un equivalente integrado. Existen aplicaciones de terceros dedicadas a la inspección de fuente en la App Store para cubrir esta falta.
Inspeccionar y modificar temporalmente el DOM con DevTools
La pestaña Elements de las herramientas de desarrollo no se limita a la lectura del código. Permite modificar temporalmente cualquier elemento de la página directamente en el navegador.
Modificar texto o atributos HTML
Un doble clic en un nodo en la pestaña Elements hace que el contenido sea editable. El cambio se refleja inmediatamente en la página mostrada. Esta modificación permanece local: una actualización de la página restaura el contenido original.
Este mecanismo se utiliza para probar un título alternativo, verificar la representación de un texto más largo, o simular la eliminación de un bloque sin tocar el archivo fuente real. Los desarrolladores front-end lo utilizan diariamente para prototipar ajustes CSS o HTML antes de trasladarlos al código.
Observar los cambios de JavaScript en tiempo real
La pestaña Elements refleja cada mutación del DOM en directo. Si un script añade un elemento después de un clic del usuario, el nodo correspondiente aparece instantáneamente en la jerarquía. Los nodos modificados se distinguen por un breve destello violeta en Chrome.
Esta capacidad de observación en tiempo real distingue fundamentalmente al inspector de la simple vista fuente. Para diagnosticar un comportamiento inesperado en una página interactiva, solo el DOM renderizado en DevTools ofrece una imagen fiel de lo que está sucediendo.
Tres casos concretos donde la vista fuente no es suficiente
La vista fuente sigue siendo práctica para verificaciones rápidas de etiquetas meta, de estructura semántica o de presencia de un script de terceros. Sin embargo, alcanza sus límites en varias situaciones específicas.
- Los sitios construidos con frameworks de JavaScript (React, Vue, Angular) generan la mayoría del HTML del lado del cliente. La fuente bruta a menudo solo contiene una etiqueta div raíz vacía y enlaces a archivos JS.
- Las páginas que cargan contenido a través de solicitudes AJAX después de la visualización inicial. El HTML añadido dinámicamente nunca aparece en la fuente bruta.
- Los elementos shadow DOM, utilizados por algunos componentes web encapsulados, son invisibles en la vista fuente clásica pero accesibles a través del inspector con la opción “Show user agent shadow DOM” activada en los ajustes de DevTools.
Elegir entre Ctrl + U y F12 depende, por lo tanto, del tipo de sitio analizado. Para un sitio estático o un CMS clásico, la fuente bruta es suficiente. Para todo lo demás, DevTools se convierte en el punto de entrada obligatorio hacia el código realmente ejecutado por el navegador.
