Mejores prácticas para clones perfectos

¿Por qué algunas páginas web son difíciles de clonar?

Las aplicaciones web modernas (SPA) dependen en gran medida de JavaScript para renderizar el contenido. Esto significa que cuando la página se carga inicialmente, el HTML suele estar vacío y el contenido se obtiene de forma dinámica. Además, muchas páginas web usan mecanismos anti-scraping, sistemas complejos de variables CSS y Shadow DOM.

Para obtener resultados de clonación 100 % precisos al píxel, sigue estas mejores prácticas.

Preparación antes de clonar

1. Asegúrate de que el contenido esté totalmente cargado

La carga diferida (Lazy Loading) es la principal causa de clones incompletos. Muchas imágenes, listas largas y el contenido inferior solo se cargan cuando te desplazas a su posición.

Enfoque correcto:

• Desplázate lentamente de arriba a abajo de la página para asegurarte de que todos los marcadores de imagen se reemplazan por imágenes reales.
• Haz clic en los botones "Cargar más" y expande todo el contenido que deseas capturar.
• Espera a que todos los archivos de fuentes terminen de cargarse (para evitar que el texto se muestre con fuentes predeterminadas).

2. Activa estados específicos de la interfaz

Si deseas capturar un estado interactivo específico:

• Expande menús desplegables
• Abre modales / cuadros de diálogo
• Cambia a pestañas específicas
• Activa estados Hover (puedes forzar el estado :hover de un elemento a través de Chrome DevTools)

Mientras estos estados están activos, haz clic en el botón "Iniciar clonación" de la extensión.

3. Manejo de contenido multimedia

• Vídeo: De forma predeterminada, la extensión intenta conservar la etiqueta <video> y su atributo src, pero no descargará archivos de vídeo enormes. Asegúrate de que el vídeo tenga un atributo poster (imagen de portada) para que muestre un marcador de posición sin conexión.
• Canvas / WebGL: Los elementos renderizados dinámicamente de este modo no pueden ser capturados por la serialización DOM tradicional. La extensión intentará automáticamente convertir Canvas en imágenes Base64 estáticas, pero las escenas WebGL complejas pueden no restaurarse perfectamente.
• Iframe: Los iframes entre orígenes (por ejemplo, vídeos de YouTube incrustados, sistemas de comentarios de terceros) no se pueden clonar en profundidad por razones de seguridad. Conservarán sus enlaces src originales.

Consejos de configuración avanzada

En el panel de ajustes de la extensión hay varias opciones clave que afectan a la calidad de la clonación:

Eliminar scripts vs. conservar scripts

• Selecciona "Eliminar todo el JS" (recomendado solo para visualización): Esto genera una página completamente estática. La ventaja es un tamaño de archivo pequeño, seguridad absoluta y no se ejecutarán anuncios emergentes ni códigos de seguimiento. El inconveniente es que las funciones interactivas como carruseles y acordeones no funcionarán.
• Selecciona "Conservar interacciones centrales" (función beta): La extensión intentará filtrar los scripts de analítica (como GA) mientras conserva los scripts que controlan la interfaz. Nota: Las páginas SPA complejas podrían mostrar una pantalla en blanco si se conserva el JS y se abren localmente porque no encuentran las API del backend.

Conversión de rutas de recursos

Asegúrate de que la opción "Convertir rutas absolutas en rutas relativas" esté activada. Esto permite que el paquete ZIP generado se abra directamente en tu disco duro local (a través del protocolo file://) sin perder estilos por problemas de ruta.

Manejo de casos extremos

Páginas que contienen Shadow DOM

Algunas bibliotecas de componentes modernas usan Shadow DOM, lo que hace que su estructura interna sea invisible de forma predeterminada. Solución: El motor central de CloneWebsite incluye un shadow-dom-flattener experimental que intenta recorrer todas las shadow roots y extraer su contenido y estilos al árbol DOM principal. Si encuentras componentes faltantes, activa "Forzar aplanado de Shadow DOM" en los ajustes.

Bloqueado por CSP (Content Security Policy)

En algunos sitios web extremadamente estrictos (como bancos, intranets corporativas grandes), es posible que veas el siguiente error en la Consola: Refused to execute inline script because it violates the following Content Security Policy directive...

Solución: Actualmente, este es un límite de seguridad estricto del navegador. Puedes intentar buscar complementos auxiliares "Disable CSP" en la Chrome Store para desactivar temporalmente el CSP del sitio web de destino durante la clonación.

Lista de verificación final

1. ¿Te has desplazado hasta la parte inferior de la página? ✅
2. ¿Modales y menús expandidos? ✅
3. ¿Los ajustes de la extensión coinciden con tus necesidades? ✅
4. ¡Haz clic en clonar y espera a que termine! 🚀