말할 필요도 없이 설치는 매우 간단합니다. FireFox의 플러그인 라이브러리에서 FireBug를 찾으면 됩니다. 아래 그림은 FireBug Debug 창입니다.
FireBug는 아티스트들이 매우 일반적으로 사용하며, 회사의 아티스트 자매는 이 분야에 매우 능숙합니다. 우리 개발자들은 주로 JS를 디버깅하는 데 사용합니다. 디버그 기능에 대한 공식 소개를 살펴보세요.Firebug에는 언제든지 실행을 일시 중지하고 그 순간에 각 변수가 어떻게 보이는지 확인할 수 있는 강력한 JavaScript 디버거가 포함되어 있습니다. 코드가 약간 느린 경우 JavaScript 프로파일러를 사용하여 성능을 측정하고 병목 현상을 빠르게 찾을 수 있습니다.
즉, FireBug를 사용하면 언제든지 JS를 디버깅하고 변수를 볼 수 있으며 동시에 JS의 성능 병목 현상을 찾을 수 있습니다.
아래 그림은 웹 애플리케이션의 JS를 찾아 Firebug를 활성화하고 Script를 클릭한 후 All 옆에서 디버깅하려는 JS를 선택하는 방법을 보여줍니다.
아래 그림은 브레이크 포인트를 설정하는 방법을 보여주고 있는데 기본적으로 이클립스에서와 동일하게 라인 번호를 클릭하면 OK가 됩니다.
아래 그림은 조건이 충족되면 중단점에 조건을 설정하는 방법을 보여줍니다. 이 기능은 특히 복잡한 기능을 디버깅할 때 매우 유용합니다. 아래 그림은 Eclipse와 마찬가지로 F11 단일 단계로 단일 단계 디버깅을 수행하는 방법을 보여줍니다. 아래 그림은 호출된 Stack을 보는 것으로, 복잡한 JS 디버깅에 매우 도움이 됩니다. 아래 그림은 변수 보기가 기본적으로 EclipseDebug와 동일함을 보여줍니다.아래 그림은 중단점의 변수를 보여줍니다.
코드 줄 사이를 빠르게 전환할 수 있는 매우 유용한 기능이 있어 수천 줄의 JS를 쉽게 디버깅할 수 있습니다.
아래 사진은 성능 테스트 결과입니다. 프로필을 클릭하면 매우 간단합니다.좀 더 실용적인 Log 기능도 있습니다. 매번 중단점을 입력하고 싶지 않다면 이 기능을 사용하는 것이 가장 좋습니다.
기본적인 사용법은 여기까지입니다. 모든 분들께 도움이 되었으면 좋겠습니다.