Déboguer HTML et JavaScript

Repérez les erreurs de sélecteurs, de styles et d’exécution avec un exemple réduit et la console.

HTML CSS JS Compiler · Méthodologie · Contact

Étapes

Partez du modèle de départ ou chargez un projet d'exemple.
Modifiez la structure HTML, les styles CSS et le comportement JavaScript.
Appuyez sur Exécuter (Ctrl/Cmd + Enter) pour actualiser l'aperçu sandbox.
Ouvrez le panneau console pour lire les logs, avertissements et erreurs.
Utilisez les contrôles responsifs pour vérifier la mise en page aux largeurs courantes.
Formatez, copiez ou téléchargez votre travail en index.html.

Exemple

HTML

<button id="demo">Hello</button>

CSS

#demo { padding: 12px; }

JavaScript

// Broken: document.getElementById("missing").textContent = "OK";
const button = document.getElementById("demo");
if (button) button.textContent = "OK";

L’identifiant missing n’existe pas et provoque une erreur. Utilisez demo pour trouver le bouton ; la validation syntaxique ne détecte pas cette erreur d’exécution.

Conseil

L'exécution de base de HTML, CSS et JavaScript pour l'aperçu se fait localement dans votre navigateur.