자바스크립트 개발환경 구축과 디버깅

Aug 5, 2013

준비물

파이어폭스, 파이어버그 설치하기

Hello World!

이제 텍스트 에디터를 이용해서 helloworld.html 파일을 생성하고, 아래 코드를 입력하고 저장한다.

<html>
<head>
<title>Hello World</title>
</head>
<body>
<script type="text/javascript">
console.log("Hello World!");
</script>

helloworld.html 파일을 파이어폭스에서 불러온다. (탐색기에서 파이어폭스로 드래그)

지금까지 파이어버그의 콘솔 창을 이용해서 Hello World를 출력했다. 여기서 중요한 것은 console.log를 이용한 디버깅인데, 위의 예제는 String 값을 출력하는 것이지만 Object나 Array를 넣게 되면 안에 들어가는 내용이 무엇인지 보기 좋게 나오게 된다.

이러한 디버깅 방법은 Opera의 기본 디버거인 잠자리나 크롬의 개발자도구에서 별도의 플러그인 없이 지원하며, IE8 개발자도구에서도 String까지는 지원한다. 게다가 모바일 사파리에서도 디버그 설정을 활성화하면 console.log를 사용해서 디버깅할 수 있다.