Mode d’emploi
- Passez d'un éditeur HTML, CSS ou JavaScript à l'autre avec les boutons du haut et écrivez votre code.
- L'aperçu se met à jour automatiquement après une pause dans la frappe, ou désactivez cela et cliquez sur Exécuter.
- Consultez la console pour les sorties et les erreurs, puis cliquez sur Télécharger le HTML pour enregistrer votre page.
Explication des options
- Bac à sable
- L'aperçu s'exécute dans un bac à sable isolé qui ne peut pas lire les cookies ou le stockage de ce site et ne peut pas ouvrir de boîtes de dialogue.
- Console
- Affiche les sorties de console.log, warn et error ainsi que les erreurs non interceptées avec leur numéro de ligne, en conservant les 200 dernières entrées.
- Téléchargement
- Combine les trois parties en un seul fichier HTML, avec les styles dans une balise style et le script à la fin du body.
Comment la page est assemblée
Les trois éditeurs sont combinés en un seul document, dans cet ordre. La même disposition est celle que vous obtenez en cliquant sur Télécharger le HTML, à ceci près que le petit script qui envoie la sortie de la console vers la page sous l’aperçu est omis du téléchargement.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>Comme le script vient après votre HTML, vous pouvez utiliser document.getElementById tout de suite, sans attendre le chargement de la page. Dans l’éditeur HTML, vous n’écrivez que ce qui va à l’intérieur du body, et non les balises html, head ou body elles-mêmes. L’aperçu est une iframe qui n’a que l’autorisation d’exécuter des scripts, ce qui explique que les boîtes de dialogue alert et l’accès aux cookies de ce site soient bloqués.
Questions fréquentes
Puis-je utiliser des bibliothèques externes ?
Oui. Ajoutez une balise script ou link pointant vers un CDN comme jsDelivr dans l'éditeur HTML.
Pourquoi alert ne s'affiche-t-il pas ?
Le bac à sable bloque les boîtes de dialogue, donc alert et confirm ne font rien. Utilisez console.log à la place.
Mon code est-il enregistré ?
Il n'est ni enregistré ni envoyé. Téléchargez le fichier HTML avant de fermer la page.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers et vos textes sont traités sur votre appareil et ne sont jamais envoyés à nos serveurs.