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

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 파일을 파이어폭스에서 불러온다. (탐색기에서 파이어폭스로 드래그)

  • 파이어폭스 우측 하단에 벌레 아이콘을 클릭해서 파이어버그를 실행한다.
  • 콘솔 탭의 화살표를 눌러 Enable 상태로 바꾼다.
  • 새로고침을 하게 되면 콘솔 창에 Hello World!라고 출력된다.

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

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

See Also