Firebug

Firebug는 Firefox의 add-on으로서 Mozilla error console + executable command line, html/css/DOM 구조 분석, page 요소가 전달되는 network상태 모니터링 등의 기능을 제공한다.

Firebug는 XUL/HTML로 구성된 view, javascript로 작성한 control, Firefox DOM을 model로 하는 MVC모델로도 설명된다.

(XUL interpreter인 XULRunner가 없는 여타 브라우저에서 작동하는 Firebug lite가 있는데, 이는 UI를 구성하는 XUL을 HTML 요소로 재구성한 것이다.)

# installation

xul을 기반으로 하는 Firefox를 확장하는 방법은 Firefox의 browser.xul에 있는 확장점을 뒤집어 씌우는(overray) 것이다.

[INSTALLDIR_Mozilla Firefox]/chrome/browser.jar를 열어보면 browser.xul이 있다. 

Firefox의 기본 ui이다. Firefox 주소창에 chrome://browser/content/browser.xul 을 붙여넣고 실행하면 Firefox UI가 보이는 것을 확인할 수 있다.

Firebug를 설치하면, 사용자 계정/Application Data/Mozilla/Firefox/Profiles/[xxxx-xxxx-xxxx...]/extentions/firebug@software.joehewitt.com/  폴더가 생기면서 관련 파일들이 위치한다.

주요 파일들을 보자.

- firebug@software.joehewitt.com/chrome.manifest

manifest 파일은 xul extention의 확장정보를 제공한다. 내부에 

overlay chrome://browser/content/browser.xul         chrome://firebug/content/browserOverlay.xul

와 같은 구분이 있는데 확장점인 chrome://browser/content/browser.xul 위에 chrome://firebug/content/browserOverlay.xul을 뒤집어 씌우라는 것이다.

- firebug@software.joehewitt.com/content/firebug

대부분의 firebug xul, javascript 파일들이 위치한다.

- firebug@software.joehewitt.com/content/firebug/browserOverlay.xul

내부에 아래와 같은 코드가 있다.

<script type="application/x-javascript" src="chrome://firebug/content/trace.js"/>

<script type="application/x-javascript" src="chrome://firebug/content/xpcom.js"/>

<script type="application/x-javascript" src="chrome://firebug/content/chrome.js"/>

<script type="application/x-javascript" src="chrome://firebug/content/lib.js"/>

<script type="application/x-javascript" src="chrome://firebug/content/domplate.js"/>

<script type="application/x-javascript" src="chrome://firebug/content/insideOutBox.js"/>

<script type="application/x-javascript" src="chrome://firebug/content/firebug.js"/>

...

명시된 javascript 파일들을 읽어들인다. Firebug object는 firebug.js 파일에 들어 있다.

또한 하단에 아래와 같은 확장점이 있다.

<statusbar id="status-bar">

        <statusbarpanel id="fbStatusBar" context="fbStatusContextMenu" role="button"

                        aria-labelledby="fbStatusPrefix fbStatusText" aria-describedby="fbStatusIcon"

                        onmouseup="Firebug.onClickStatusIcon(Firebug.currentContext, event);"

                        tooltiptext="Firebug">

...

browser.xul의 status-bar를 확장점으로 하여 firebug를 띄울 수 있는 버튼을 보여주는 코드이다.

- firebug@software.joehewitt.com/content/firebug/console.js

html 소스에서 디버깅을 위해 사용하는 console.log 함수가 정의되어 있다.