HTML5 디버깅하기 - 크롬이용

HTML, CSS, JAVASCRIPT로 구성된 HTML5는 C나 JAVA같은 컴파일언어 개발자라면 누구나 쉽게 접근할 수 있다.

이참에 HTML5를 어떻게 디버깅하는지 포스팅해본다.

JAVA, C, C#같은 언어들은 개발툴에서 직접 디버깅과 수정이 가능하지만,

HTML5는 디버깅을 웹브라우저를 통해서 해야한다.

HTML은 컴파일되는 언어가 아니라 브라우저마다 각기 다르게 해석이 가능하기 때문에 반드시 해당 브라우저에서 디버깅을 해봐야 정확한 동작을 확인할 수 있다.

따라서 디버깅도구는 대발툴이 아닌 브라우저를 이용해야하고,

여기서는 HTML5지원이 가장 잘되는 크롬브라우저를 이용하기로 한다.

1. 디버깅할 페이지를 크롬에서 연다.

2. 메뉴를 열어 도구로 들어간다. 개발자도구가 있을것이다.

3. 개발자도구를 클릭한다.

4. 탭이 작으니, 좀 늘린다. 이제야 Sources탭이 보일 것이다.

5. Sources탭을 선택하고, 디버깅할 파일을 선택한다.

6. 브레이크 포인터를 지정한다.-라인번호를 클릭하면된다.

7. 디버깅을 한다.(수행은 f8, step은 f10)

참~ 쉽죠잉~

개발툴에서 바로 디버깅을 해볼 수 없을뿐, 별거 없다 ^^;;

test.html