HTML과 JavaScript 디버깅
작은 예제와 콘솔로 선택자, 스타일, 실행 오류를 확인합니다.
단계
- 시작 템플릿에서 시작하거나 예제 프로젝트를 로드합니다.
- HTML 구조, CSS 스타일, JavaScript 동작을 편집합니다.
- 실행(Ctrl/Cmd + Enter)으로 sandbox 미리보기를 새로고침합니다.
- Console 패널에서 log, warn, error를 확인합니다.
- 반응형 컨트롤로 일반적인 너비에서 레이아웃을 확인합니다.
- 포맷, 복사 또는 index.html로 다운로드합니다.
예제
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";missing ID를 가진 요소가 없어서 오류가 발생합니다. demo를 사용하세요. 구문 검사로는 이 실행 오류를 찾을 수 없습니다.
팁
미리보기용 HTML, CSS, JavaScript 기본 실행은 브라우저에서 로컬로 이루어집니다.