Tecnología Electrónica

Cómo ver el código HTML, CSS y JavaScript de cualquier web (Navegadores y herramientas)

El código fuente de una web es público y accesible. Todos los navegadores modernos permiten verlo, inspeccionarlo en vivo y guardarlo.

1. Ver código fuente (Estático - HTML original del servidor)

  • Chrome / Edge / Brave / Opera: Clic derecho en área vacía > "Ver código fuente de la página" (o Ctrl+U).
  • Firefox: Clic derecho > "Ver código fuente de la página" (o Ctrl+U).
  • Safari (Mac): Menú Desarrollo > Mostrar código fuente (o Opt+Cmd+U). Activa menú Desarrollo en Safari > Configuración > Avanzado > Mostrar menú Desarrollo.

Se abre en nueva pestaña/ventana. Es el HTML inicial (antes de JavaScript).

2. Herramientas de desarrollador (Dinámico - DOM real, CSS, JS, Red, Consola)

  • Chrome / Edge / Brave / Opera: F12 o Ctrl+Shift+I o Clic derecho > "Inspeccionar".
  • Firefox: F12 o Ctrl+Shift+I o Clic derecho > "Inspeccionar".
  • Safari: Opt+Cmd+I (requiere menú Desarrollo activo).

Panel lateral/inferior con pestañas:

  • Elements / Inspector: Árbol DOM vivo. Clic en elemento = ver CSS aplicado, modificar en vivo, forzar estados (:hover, :focus).
  • Console: Errores JS, logs, ejecutar comandos.
  • Sources / Depurador: Archivos JS, CSS, mapas de origen. Puntos de interrupción.
  • Network / Red: Todas las peticiones (XHR, fetch, imágenes, fuentes, WS). Filtra por tipo. Ver headers, respuesta, timing.
  • Application / Almacenamiento: Cookies, LocalStorage, SessionStorage, IndexedDB, Cache, Service Workers.
  • Performance / Rendimiento: Grabación de perfil CPU, memoria, FPS.
  • Lighthouse: Auditoría SEO, Accesibilidad, Performance, PWA, Best Practices.

3. Guardar página completa (HTML + recursos)

  • Chrome/Edge/Firefox: Ctrl+S > "Página web, completa" (.html + carpeta _files con CSS, JS, imágenes).
  • Safari: Archivo > Exportar como PDF / Guardar como > "Archivo web" (.webarchive).

4. Herramientas externas para desarrolladores

  • VS Code + Live Server / Remote SSH: Edita local, ve cambios en navegador.
  • Wappalyzer (extensión): Detecta tecnologías (CMS, framework, analytics, hosting).
  • React DevTools / Vue DevTools / Angular DevTools: Inspección de componentes framework.
  • Postman / Insomnia / Hoppscotch: Prueba APIs (REST, GraphQL) vistas en pestaña Network.

5. Obstáculos comunes y soluciones

  • Bloqueo clic derecho (JS): Usa Ctrl+U (fuente) o F12 (DevTools). O desactiva JS temporalmente (DevTools > Configuración > Preferencias > Desactivar JavaScript).
  • Iframes / Frames: Clic derecho dentro del iframe > "Ver código fuente del marco" / "Inspeccionar". En DevTools, selector de contexto (arriba a la izquierda "top") > elige el iframe.
  • Contenido cargado dinámicamente (SPA, AJAX): El HTML inicial (Ctrl+U) está vacío. Usa DevTools > Elements (DOM real) o Network > XHR/Fetch > Response (JSON/HTML fragment).
  • Recursos en otro dominio (CDN, APIs): Copia URL del recurso (desde Network o Elements) y pégala en nueva pestaña.
  • Ofuscación / Minificación: Código JS/CSS comprimido. Usa "Pretty print" ({} en DevTools Sources) para formatear. Sourcemaps (.map) si el sitio los sirve.

>

<

Vida inteligente