Visualiseur de Code HTML

L'apercu dans le panneau de droite est une representation fidele de l'apparence de votre code dans un navigateur. Si quelque chose semble inattendu, verifiez que vos balises HTML sont correctement fermees.

Le code HTML que vous collez est place dans un iframe isole grace a l'attribut 'sandbox'. Cette isolation permet au code de s'executer tout en bloquant son acces au reste du site, aux cookies ou aux autres onglets — ce qui signifie que meme du code non fiable peut etre teste en toute securite.

• Vous collez votre HTML (qui peut aussi inclure du CSS/JavaScript) dans la zone de code.
• Lorsque vous cliquez sur 'Mettre a jour l'apercu', le code est transmis a un iframe isole.
• L'iframe affiche le code dans un environnement isole de la page principale, grace a l'attribut 'sandbox'.
• Le resultat est affiche visuellement dans la zone d'apercu a droite.
• Modifiez le code et cliquez a nouveau sur le bouton pour mettre a jour l'apercu.

Lorsque vous collez un extrait iframe d'integration ou une experience HTML/CSS simple, le resultat apparait instantanement dans le panneau de droite, vous permettant de verifier son apparence avant de l'ajouter a votre site en ligne.

• Testez comment un code d'integration (comme un widget iframe) apparaitra sur votre site avant de le publier ici.
• L'apercu ne se met pas a jour automatiquement a chaque modification — n'oubliez pas de cliquer sur 'Mettre a jour l'apercu' apres avoir edite votre code.
• Comme la zone d'apercu est isolee, tout script contenu dans votre code ne peut pas affecter ou lire le reste de votre page.

Pendant le developpement web, voir comment un morceau de HTML ou un code d'integration apparaitra sur le site reel necessite souvent d'ajouter d'abord le code a un environnement en ligne — ce qui peut faire perdre du temps et, en cas de code defectueux, casser l'apparence du site. Cet outil elimine ce risque en vous permettant de tester le code dans un environnement isole.

Au coeur de cet outil se trouve la fonctionnalite d'iframe 'sandbox' proposee par les navigateurs. Cette fonctionnalite isole entierement le contenu d'un iframe en dehors d'un ensemble specifique d'autorisations ; par defaut, aucune capacite n'est accordee au-dela de l'execution de scripts — pas d'acces a la page parente, pas d'envoi de formulaire, pas d'ouverture de nouvelles fenetres.

Ce choix de conception est deliberer : offrir un espace ou les utilisateurs peuvent tester meme du code auquel ils ne font pas confiance, tout en protegeant le site reel (et les cookies et donnees de session de l'utilisateur) pendant ce temps. De nombreuses plateformes professionnelles de partage de code (comme les outils de type CodePen) suivent le meme principe d'isolation.

L'apercu ne se rafraichit pas automatiquement a chaque modification du code ; il est plutot declenche manuellement avec le bouton 'Mettre a jour l'apercu'. Cela preserve les performances et donne a l'utilisateur le controle sur le moment ou le code s'execute reellement, plutot que de l'executer accidentellement avant qu'il ne soit termine.

Cet outil est utile pour tester des widgets d'integration, essayer rapidement une idee HTML/CSS, inspecter en toute securite du code partage dans un rapport de bug, ou simplement voir comment le HTML est rendu dans le cadre d'un apprentissage.