Bonnes pratiques pour des clones parfaits

Pourquoi certaines pages web sont-elles difficiles à cloner ?

Les applications web modernes (SPA) dépendent fortement de JavaScript pour afficher le contenu. Cela signifie que lorsque la page se charge initialement, le HTML est souvent vide et le contenu est récupéré dynamiquement. De plus, de nombreuses pages web utilisent des mécanismes anti-scraping, des systèmes complexes de variables CSS et le Shadow DOM.

Pour obtenir des résultats de clonage précis au pixel près à 100 %, suivez ces bonnes pratiques.

Préparation avant le clonage

1. Assurez-vous que le contenu est entièrement chargé

Le chargement différé (Lazy Loading) est le principal responsable des clones incomplets. De nombreuses images, longues listes et contenus en bas de page ne se chargent que lorsque vous faites défiler jusqu'à leur position.

Approche correcte :

• Faites défiler lentement du haut vers le bas de la page pour vous assurer que tous les espaces réservés d'image sont remplacés par de vraies images.
• Cliquez sur les boutons « Charger plus » et déroulez tout le contenu que vous souhaitez capturer.
• Attendez que tous les fichiers de police soient chargés (pour éviter que le texte ne s'affiche dans les polices par défaut).

2. Déclenchez des états d'interface spécifiques

Si vous souhaitez capturer un état interactif spécifique :

• Déroulez les menus déroulants
• Ouvrez les modales / boîtes de dialogue
• Basculez vers des onglets spécifiques
• Déclenchez les états de survol (vous pouvez forcer l'état :hover d'un élément via Chrome DevTools)

Pendant que ces états sont actifs, cliquez sur le bouton « Démarrer le clonage » de l'extension.

3. Gestion du contenu multimédia

• Vidéo : Par défaut, l'extension tente de conserver la balise <video> et son attribut src, mais ne télécharge pas les fichiers vidéo volumineux. Assurez-vous que la vidéo possède un attribut poster (image de couverture) pour qu'elle affiche un espace réservé hors ligne.
• Canvas / WebGL : Les éléments rendus dynamiquement de cette façon ne peuvent pas être capturés par la sérialisation DOM traditionnelle. L'extension essaiera automatiquement de convertir le Canvas en images Base64 statiques, mais les scènes WebGL complexes peuvent ne pas être parfaitement restaurées.
• Iframe : Les iframes inter-origines (par exemple, vidéos YouTube intégrées, systèmes de commentaires tiers) ne peuvent pas être clonés en profondeur pour des raisons de sécurité. Ils conserveront leurs liens src originaux.

Conseils de configuration avancée

Dans le panneau des paramètres de l'extension, plusieurs options clés affectent la qualité du clonage :

Supprimer les scripts vs. conserver les scripts

• Sélectionnez « Supprimer tout JS » (recommandé pour l'affichage uniquement) : Cela génère une page complètement statique. L'avantage est une petite taille de fichier, une sécurité absolue, et aucune publicité pop-up ni code de suivi ne sera exécuté. L'inconvénient est que les fonctionnalités interactives comme les carrousels et les accordéons ne fonctionneront pas.
• Sélectionnez « Conserver les interactions principales » (fonctionnalité bêta) : L'extension essaiera de filtrer les scripts d'analyse (comme GA) tout en conservant les scripts qui contrôlent l'interface. Remarque : Les pages SPA complexes peuvent afficher un écran blanc si JS est conservé et ouvertes localement car elles ne trouvent pas les API backend.

Conversion des chemins de ressources

Assurez-vous que l'option « Convertir les chemins absolus en chemins relatifs » est activée. Cela permet au package ZIP généré d'être ouvert directement sur votre disque dur local (via le protocole file://) sans perdre de styles à cause de problèmes de chemin.

Gestion des cas extrêmes

Pages contenant le Shadow DOM

Certaines bibliothèques de composants modernes utilisent le Shadow DOM, rendant leur structure interne invisible par défaut. Solution : Le moteur central de CloneWebsite inclut un shadow-dom-flattener expérimental qui tente de traverser toutes les racines shadow et d'extraire leur contenu et leurs styles dans l'arbre DOM principal. Si vous constatez des composants manquants, activez « Forcer l'aplatissement du Shadow DOM » dans les paramètres.

Bloqué par CSP (Content Security Policy)

Sur certains sites web extrêmement stricts (comme les banques, les grands intranets d'entreprise), vous pourriez voir l'erreur suivante dans la Console : Refused to execute inline script because it violates the following Content Security Policy directive...

Solution : Actuellement, il s'agit d'une limite de sécurité stricte du navigateur. Vous pouvez essayer de rechercher des extensions auxiliaires « Disable CSP » dans le Chrome Store pour désactiver temporairement le CSP du site web cible pendant le clonage.

Liste de vérification finale

1. Avez-vous fait défiler jusqu'en bas de la page ? ✅
2. Modales et menus déroulés ? ✅
3. Les paramètres de l'extension correspondent-ils à vos besoins ? ✅
4. Cliquez sur cloner et attendez la fin ! 🚀