Debugowanie HTML i JavaScript

Znajdź błędy selektorów, stylów i wykonania za pomocą małego przykładu.

HTML CSS JS Compiler · Metodologia · Kontakt

Kroki

Zacznij od szablonu startowego lub załaduj przykładowy projekt.
Edytuj strukturę HTML, style CSS i zachowanie JavaScript.
Naciśnij Uruchom (Ctrl/Cmd + Enter), aby odświeżyć podgląd w sandbox.
Otwórz panel Console, aby czytać log, warn i error.
Użyj kontrolek responsywnych, aby sprawdzić układ przy typowych szerokościach.
Formatuj, kopiuj lub pobierz pracę jako index.html.

Przykład

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";

Element o ID missing nie istnieje i powoduje błąd. Użyj demo, aby znaleźć przycisk; walidacja składni nie wykrywa tego błędu wykonania.

Wskazówka

Podstawowe wykonywanie HTML, CSS i JavaScript dla podglądu odbywa się lokalnie w przeglądarce.