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

유럽에서는 파이어폭스(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 로 다시 찾아오겠습니다.

즐프하세요.

  1. Favicon of http://gimakhin.tistory.com BlogIcon 알레쥐 2011.03.18 17:41 신고

    firebug.. 스크립트나 html 디버깅 할때 유용하더군요..
    지금도 firefox로 보고 있다는.. ㅎㅎㅎ

    ie도 있긴 하지만 왠지 ff가 더 사용이 편한듯 합니다.

    • Favicon of http://findfun.tistory.com BlogIcon jyhyun 2011.03.19 12:50 신고

      네.. 무지 유용하더군요.
      자바스크립트 더이상 alert 창으로 디버깅 할 필요 없어요.
      console.log 함수는 이제 IE에서도 지원되는거 같아요.

  2. 무종 2011.05.16 15:35 신고

    IE용 디버깅 툴도 있습니다, 저도 파폭의 디버깅툴 사용하다가 어떤경우는 부득이하게 IE로만 메뉴 클릭이 가능한
    그런 사이트들이 있다보니 하위메뉴의 디버깅이 불간으해서 IE용 디버깅 툴을 찾아 봤는데

    DebugBar 라는게 있네요 파폭의 디버깅 툴만은 못하지만 그런대로 일단 오류가 나는 위치는 찾아지네요
    이것 외에도 몇가지 더 있다는 동료의 말이 있던데 스크립트가 느려지는 원인을 찾아주는 툴도 있다네요

    • Favicon of http://findfun.tistory.com BlogIcon jyhyun 2011.05.17 08:54 신고

      네 저도 이 글을 올리고 난후에 IE의 구성을 봤더니 있더군요.
      더 살펴보지 않고 성급하게 글 쓴것 같습니다.
      저는 개인적으로 크롬으로 보고 있습니다.
      크롬으로 열심히 작업한 후 IE로 확인하면 UI가 깨져버리는 부작용이 좀 있긴 하지만요

  3. 장재원 2011.08.05 11:40 신고

    구글크롬에도 firebug 크롬용으로 있던데 괜찮은가요? 파이어버그 한번도 안써봐서 그냥 궁금하네요 ㅋㅋ

    • Favicon of http://findfun.tistory.com BlogIcon jyhyun 2011.08.17 12:47 신고

      크롬에도 강력한 개발자 도구가 있습니다. 물론 저도 그 도구를 더 많이 쓰고요.

      IE에도 있는데 UI가 조금 불편해서 크롬을 씁니다. 물론 파이어폭스도 쓰긴 하죠. 크로스브라우징 할때만이지만요.

      어쨌든 예전에 비하면 놀라울 정도의 발전이죠. alert으로 디버깅 하지 않는 것만 해도 정말 좋습니다.

      감사합니다.

+ Recent posts