본문 바로가기
프로그래밍/jQuery

jQuery 쉽게하기 - 파이어폭스의 파어어버그 사용하여 디버깅하기

by zoo10 2011. 1. 14.

유럽에서는 파이어폭스(FireFox)가 브라우져 점유율로 1위이네요. 2009년 하반기 기준으로 40% 정도였다고 하니 대단합니다. 우리나라는 익스플로러 천지인데 말이죠. 정말 먼 나라 얘기인 듯 합니다.

이번 포스팅이 브라우져에 대한 얘기는 아닙니다. jQuery 쉽게하기 다음 포스팅이 Variables Types 인데요. 이 챕터에서 파이어폭스의 파이어버그를 사용하는 예제들로 구성되어 있어서 이렇게 포스팅을 하게 되었습니다.

사용을 해보지 않으신 분들이나 이미 사용하시는 분들도 계시겠죠. 일단은 사용을 하지 않는 분들을 기준으로 하여 글을 적을까 합니다.

아마 처음 사용하시는 분들은 우리나라 웹사이트가 잘 열리지 않거나 Active-X 가 잘 지원되지 않아 당황스러울 수도 있습니다. 그래서 일단은 jQuery 디버깅 용으로만 사용을 하겠습니다.

아래 링크에서 파이어폭스를 다운로드 할 수 있습니다.
Firefox 다운로드 받기 http://www.mozilla.or.kr/ko/

다운로드 후 설치를 하시면 됩니다. 설치는 뭐 따로 설명드리지 않아도 워낙 간단해서 직접 해보시면 됩니다.

첫 실행화면입니다. 위와 같이 실행됩니다. 자 이제는 FireBug를 설치할 차례입니다. 파이어폭스는 확장성이 좋은데요. 정말 많은 에드온들을 지원합니다. 아마 웹 개발 또는 웹 퍼블리싱 작업을 하시는 분들은 필수 브라우져가 아닌가 합니다. 파이어버그를 설치하기 위해 아래와 같이 진행합니다.

도구부가기능 메뉴를 클릭합니다.

 

부가 기능 화면에서 전체 검색 탭으로 이동하여 검색란에 firebug 라고 입력하고 엔터 또는 돋보기 이미지를 클릭합니다. 파이어버그가 검색되면 오른쪽에 있는 "Firefox에 추가" 버튼을 눌러 파이어폭스에 파이어버그를 추가합니다.

 

소프트웨어 설치창이 나오면 모두설치를 선택합니다.

 

설치가 되면 아래와 같이 부가기능창에 알림줄이 생깁니다. 오른쪽에 있는 FireFox 다시 시작 버튼을 클릭해서 파이어폭스를 재시작합니다.

 

파이어폭스가 재시작되면 다시 도구 메뉴를 열어 Firebug 메뉴가 생성되었는지 확인 합니다.

 

키보드의 F12를 클릭하시거나 도구 > Firebug > Firebug 열기를 선택하시면 브라우져 하단에 디버깅 창이 열립니다.

 

짜쟌~ 여기까지가 아주 간단한 파이어폭스의 파이어버그 설치하기 였습니다. 뭔가 좀 허전하네요. Firebug를 설치하긴 했는데 어떻게 사용하는지 알아봐야 하지 않을까요? 자~ 함 사용해 보겠습니다.

문서를 하나 만듭니다. firebug.html 이라고 만들죠. 그 안에 다음과 같이 코드를 작성합니다.

<html>
 <head>
  <title>firebug 사용해보기</title>
  <meta name="generator" content="editplus" />  <meta name="author" content="" />
  <meta name="keywords" content="" />  <meta name="description" content="" />
  <script>
   var x = "firebug"
 if ( x == "firebug" )
   console.log("x 가 firebug 라는건 true입니다.");
 else
   console.log("x 가 firebug 라는건 false입니다.");
  </script>
 </head>
 <body>
 </body>
</html>

이 파일을 Firefox에서 불러봅니다. 파일 > 파일 열기 메뉴를 이용하시거나 firebug.html 을 파이어폭스에 드래그해서 집어넣어도 됩니다.

이제 firebug 창이 열린 상태에서 새로고침이나 F5를 클릭합니다. 짜쟌. 아래와 같이 결과가 나오신다면 성공입니다.

 

파이어폭스 괜찮은 브라우져입니다. 사용해 보시면 어~ 좋은데 하실겁니다. 속도나 확장성이나 뭐하나 IE에 비해 나쁜게 없으니까요. 웹표준을 지원하는 브라우져라 우리나라 환경하고는 좀 안 맞지만 그런 부분도 다 커버하면서 사용할 수 있습니다. 파이어폭스에 IE를 플러그인처럼 끼워넣어 사용할 수 있으니까요.

jQuery Variables Types 로 다시 찾아오겠습니다.

즐프하세요.