한동안 X-Internet 프로젝트를 하다 보니 순수 웹 개발에 대해서 잘 몰랐었는데

올해 순수 웹 개발을 하다 보니 말로만 듣던 Firefox + Firebug의 기능을 확인하게 되었다.

진작 이런 게 있었으면 웹개발 진짜 쉽게 할 수 있었는데, 왜 이제야 나온 거니? 왜 그런 거니?

1. Firebug 설치

Firefox만으로는 안 되고, Firebug라는 플러그인을 추가해야 강력한 무기를 완성하게 되는 것이다.

Firefox의 메뉴에서 "도구 > 부가기능"으로 들어간다.

이 다이얼로그는 이미 설치되어 있는 것이고, 없다면 아래의 "유용한 확장 기능 찾기"로 들어가 Firebug를 찾아 설치해야 한다.

설치되면 위와 같은 다이얼로그를 볼 수 있다.

설치된 후에 Firebug와 관련된 설정은 "도구 > Firebug"에서 조정할 수 있는데, Firefox를 오직 개발용으로 사용한다면 문제가 없지만 웹서핑용으로도 사용한다면 자신이 디버그를 원하는 주소를 등록하는 것이 좋다. 아무래도 디버깅툴이다 보니 Firebug가 동작하면 사이트가 뜨고 동작하는데 시간이 좀 걸린다.

2. Inspect Element

나를 반하게 한 기능 중의 하나가 Inspect Element이다. 이건 특정 element의 현재 속성을 HTML로 표현해 준다. 중요한 건 자바스크립트 등으로 변경되거나 추가된 각종 속성을 모두 보여 준다는 것이다. 그러니까, 서버에서 받은 코드가 아닌 현재 웹브라우저가 갖고 있는 실제 내용을 직접 확인할 수 있다는 얘기다.

이것은 화면상의 특정 부분에 오른쪽 클릭을 하고 메뉴에서 "Inspect Element"를 선택한다.

여기서는 맨 위의 플러스 이미지에서 오른쪽 클릭을 했다.

그러면, Firefox 하단에 아래와 같은 내용이 나타난다.

왼쪽 부분에는 현재 메모리상의 HTML 코드가 나오고, 오른쪽에는 이 element에 적용된 스타일이 표시된다.

HTML 코드에 마우스를 올려 놓으면 그 코드가 화면에서 어떤 부분인지 화면에 하늘색으로 표시가 되니 코드가 실제 화면에서 어떻게 나타나는지 확인하는 데도 유용하다.

3. 자바스크립트 디버그

이리저리 Firebug를 사용해 보다가 가장 놀란 기능이다. 자바스크립트를 디버그하다니...

먼저 위의 그림에서 Script 탭을 선택하고, 바로 위에서 디버그할 js나 자바스크립트를 포함한 html을 선택하면 아래에 코드가 나타난다.

코드에서 실행을 멈출 설정할 라인을 골라 클릭하면 breakpoint가 표시된다.

여기서 화면의 버튼을 클릭해서 자바스크립트를 실행시키거나, 화면을 다시 로딩하거나 하면 설정해 놓은 breakpoint에서 멈춰서 다음과 같은 화면이 나타난다.

여기부터는 이클립스에서 디버그를 해 본 사람이라면 편하게 사용할 수 있다.

오른쪽에 변수의 값들을 확인할 수 있고, New watch expression...에서 표현식을 입력하고 중간중간 확인해 볼 수도 있다.

프로그램 진행은 오른쪽 위의 각종 화살표를 누르면서 진행해 볼 수 있다. 단, 이클립스와 모양은 같지만 기능이 다르니 잘 확인해서 눌러야 한다.

이 포스트에선 내가 가장 유용하다고 생각되는 기능만을 다뤘는데 그 외의 버튼을 눌러보다 보면 정말 강력한 플러그인이라는 걸 느끼게 될 것이다.

단, Firefox는 IE에서 사용하는 비표준 태그나 자바스크립트 함수, ActiveX 등이 동작하지 않으므로 제한이 있다고 할 수도 있는데, 요즘 세상의 흐름이 표준을 준수하는 모든 브라우저를 사용할 수 있도록 사이트를 구성하는 것이기 때문에 이 기회에 이런 흐름을 따르는 것도 좋을 것 같다.