Bac à sable de Code
Bac à sable HTML, CSS et JavaScript en ligne avec aperçu en direct, éditeur à numéros de ligne et console capturée. Testez vos extraits instantanément et téléchargez le résultat en fichier HTML - entièrement dans votre navigateur.
Qu'est-ce qu'un bac à sable de code ?
Un bac à sable de code est un environnement isolé où vous écrivez HTML, CSS et JavaScript et voyez immédiatement le rendu. Celui-ci ajoute une console capturée, des éditeurs numérotés et la possibilité de télécharger votre travail en un seul fichier HTML.
Comment fonctionne l'aperçu en direct ?
Vos trois panneaux de code sont combinés en un document HTML complet et rendus dans une iframe en bac à sable. Avec l'exécution automatique activée, l'aperçu se rafraîchit une demi-seconde après l'arrêt de la saisie ; sinon, appuyez sur Exécuter.
Que montre le panneau de console ?
Tout ce que la page écrit via console.log, console.info, console.warn et console.error, plus les erreurs d'exécution et les rejets de promesses non gérés avec leurs numéros de ligne. Il est vidé à chaque exécution.
Mon code est-il sauvegardé si je recharge la page ?
Oui. Un brouillon des trois panneaux est stocké localement dans votre navigateur et restauré à la prochaine visite. Réinitialiser remet le code de démonstration, et l'effacement des données du site supprime le brouillon.
L'aperçu est-il isolé et sûr ?
L'aperçu s'exécute dans une iframe en bac à sable sans accès same-origin : les scripts testés ne peuvent pas lire cette page ni ses cookies. Ne testez toutefois que du code de confiance, car il s'exécute quand même dans votre navigateur.
Puis-je télécharger mon expérience ?
Oui. Télécharger .html enregistre le HTML, le CSS et le JavaScript actuels combinés en un seul fichier autonome, ouvrable dans n'importe quel navigateur ou partageable.
Que puis-je exécuter dans le panneau JavaScript ?
Du JavaScript de navigateur standard : manipulation du DOM, événements, canvas, fetch vers des API publiques (selon leurs règles CORS) et toute bibliothèque collée en ligne. Les modules et paquets npm ne sont pas résolus.
Le bac à sable nécessite-t-il une connexion ?
Uniquement pour charger la page elle-même. L'édition, l'aperçu et la capture de console fonctionnent ensuite localement, et votre code n'est jamais envoyé nulle part.
Comment utiliser Bac à sable de Code
Ce terrain de jeu réunit votre HTML, CSS et JavaScript dans un aperçu en direct isolé (sandbox), entièrement dans votre navigateur, avec un panneau console qui capture les journaux et les erreurs. Un brouillon est sauvegardé localement pour reprendre là où vous en étiez.
- Modifiez les panneaux HTML, CSS et JavaScript — chaque éditeur affiche les numéros de ligne et la coloration syntaxique.
- Avec l'Exécution auto activée, l'aperçu se rafraîchit pendant la frappe ; sinon cliquez sur Exécuter (ou désactivez l'Exécution auto et lancez manuellement).
- Surveillez le panneau Console sous l'aperçu : sorties console.log, avertissements, erreurs et exceptions non interceptées s'y affichent avec les numéros de ligne.
- Cliquez sur Réinitialiser pour revenir à la démo intégrée, ou Télécharger .html pour tout enregistrer dans un fichier autonome.
- Utilisez Ouvrir dans une nouvelle fenêtre pour voir le document en cours en taille réelle dans son propre onglet.
La console est vidée à chaque exécution : ajoutez librement des console.log en débogage, ils apparaissent instantanément sans ouvrir la vraie console du navigateur.
Outils associés
- Embellisseur JavaScript Embellisseur et formateur de code JavaScript gratuit en ligne. Convertissez instantanément le JS minifié en code propre, lisible et bien indenté avec des options personnalisables.
- Minificateur JS Minifiez le code JavaScript instantanément. Supprimez les espaces, commentaires et optimisez votre JS pour un chargement plus rapide.
- Testeur de Regex Testez et déboguez des expressions régulières avec correspondance en temps réel et capture de groupes.
- Aperçu Markdown Éditeur Markdown en ligne gratuit avec aperçu en direct. Écrivez, rendez et exportez Markdown avec support GFM complet.
- Vérificateur de Hash Calculez et vérifiez les hashes MD5, SHA-1, SHA-256, SHA-512 localement
- Calculatrice Chmod Calculatrice chmod gratuite en ligne pour visualiser et calculer les permissions de fichiers Linux avec des cases à cocher. Convertissez instantanément entre notation numérique (755, 644) et symbolique (rwxr-xr-x). Supporte les permissions spéciales comme setuid, setgid, sticky bit.
- Table ASCII Référence complète de codage de caractères ASCII avec codes décimaux, hexadécimaux, octaux, binaires, entités HTML et descriptions. Recherche et filtre instantanés.
- Visionneuse Hexadécimale Affichez le contenu des fichiers en format hexadécimal avec recherche, navigation par décalage et défilement virtuel