There is so much power packed into this little FireFox plug-in. It is truly a revolutionary tool for web developers. Here is a quick and dirty set of its most powerful features.

이것은 너무도 강력한 파이어폭스 플러그인으로 포당되어 들어있는것이다. 이것은 진심으로 웹개발자들의 혁명적인 툴이다. 여기에 신속하고 더로운 강력한 기능들이 있다.

To get started, open up firebug using F12 or by clicking its icon in the lower right corner of FireFox. To jump straight to the console and start typing commands you can use the Ctrl+Shift+L keyboard shortcut.

시작하기위해 F12키나 파이어폭스 우측하단에 있는 녹색 아이콘을 클릭해서 파이어버그를 연다. 바로 콘솔로 점프하기위해서는 CTrl+Shift+L 키보드 단축키를 이용해서 시작할수 있다.

From here you can type commands. Try entering document. This will bring up the document DOM object and you can click on that link to get to the DOM and inspect all of the properties of the document object. A shortcut is also available by typing inspect(document) etc. You can use $ and $$ as in Prototype, such as $(’firebug’) and inspect($$(’.firebug’)). Use the up and down arrows to cycle through command history.

여기에 당신이 할수있는 칠수있는 명령어들이있다. 문서로 들어가라. 이것은 문서으 DOM 오보젝트로 가져다주고 문서 객체의 속성의 모든것에 DOM 과 inspect를 클릭할수 있다. 단축키로 또한 inspect(document) 등도 칠수 있다. 당신은 프로토타입의 $와 $$를 $(`firebug`) 와 inspect($$(`.firebug`)) 와 같이 이용할수 있다. 화살표를 올리고 내리고 해서 명령어 기록을 볼수 있다.

• Use console.log and sprintf formatting commands for debugging.
• Use console.info, console.warn and console.error to set your debugging levels.
• Use console.time to log the time your functions take to run.
• Use the error console to view the stack trace of the errors.

console.log를 와 sprintf 포맷팅을 이용해 디버깅할수 있다.
console.info, console.warn, console.error를 이용해 당신의 디버깅 래벨을 설정할수 있다.
console.time을 이용해 함수를 실행하는데 얼마나 걸렸는지 알수 있다.
오류 콘솔을 이용해 에러들을 트레이스하여 볼수 있다.

You can download Firebug Lite to make these methods work in Internet Explorer. I recommend that you remove your console commands before you go live.

인터넷 익스플로어에서 이 메소드들이 동작할수 있도록 하기위해 Firebug lite를 다운로드 할수 있다 . 당신의 콘솔 명령들을 당신이 살아있는동안 삭제하기를 추천한다.

Try Console logging test using console.log You can use sprintf formatting here.

당신은 sprintf 포멧팅을 이용해 console.log를 이용해 Console logging을 테스트해볼수 있다.

function consoleIntro(){
 var x = "fubar";
 var y = 543;
 console.log("value of x is %s and value of y is %d", x, y);
}

Try Console Error Levels console.info|warn|error

function consoleLogLevels(){
 var a = "This is an info level message";
 var b = "This is a warn level message";
 var c = "This is an error level message";
 console.info(a);
 console.warn(b);
 console.error(c);
}

Try Timer logging console.time|timeEnd

function timeThisTask(){
 console.time("Sample Timer");
 for(x=100000;x>0;x--){}
 console.timeEnd("Sample Timer");
}

Try Error Stack Traces to see stack trace of the errors

function stack1(){
 var d = "fu";var e = "bar";var f = stack2(d,e)
 console.log(f);
}
function stack2(d,e){return stack3(d,e);}
function stack3(d,e){return UndefinedVariable;}

Use the debugger to add breakpoints, debug JavaScript code and step through your code.

자바스크립트 코드에 디버거 중단점을 추가하여 코드를 한스텝씩 실행해볼수 있다.

There are 3 ways to trigger the debugger:

1. Use the debugger command.
2. Add a breakpoint by clicking on the line number
3. Enable the “Break on All Errors” option for the Script tab.
   

디버거 드리거는 3가지 방법이 있다.

1. 디버그 명령을 사용하라
2. 라인번호를 클린하여 중단점을 추가하라
3. 스크립트 탭의 옵션에서 '모든 에러에서 중단'을 활성화하라

Try a Deubgger Demo using the debugger command
debugger 명령을 이용해 debugger 데모이다.

function debugMe(){
 debugger;
 var g = 1;
 var h = new Date().getMilliseconds();
 while(g < 100){
  g *= 10;
  h -= g;
 }
}

Use the profiler to record detailed statistics on your Script calls and DOM events. This works very much like macros. To manually start profiling click on the profile button in the Console tab. Then try performing some actions on the page. When you are done click on the profile button again. A report is returned which captures the funtions that were called within that time period.

프로파일러를 이용해 당신의 스크립트 호출과 DOM 이벤트의 상세한 정보를 녹화할수 있다. 이 일은 매우 매크로와 비슷하다. 손으로 콘솔 텝의 프로파일 버튼을 클릭하여 프로파일링을 시작하라. 그러면 페이지의 어떠한 액션에대해 퍼폼을 시도할것이다. 그러면 당신은 프로파일 버튼을 다시 눌러 끝낸다. 리포트는 시간동인 호출된 함수에 대해 기록하여 보여준다.

The report output data can be sorted. Own Time tells you how much time each function call took in milliseconds and as a percentage of the total time which can be useful in finding bottlenecks in your code.

이 리포트는 소팅할수 있다. 소유한 시간은 당신의 코드의 병목중 당신이 할수 있는것을 찾아낸 총시간의 퍼센테이지를 밀리세컨드 단위로 함수 호출을 보여준다.

Try Manual Profiler test using the manual profile feature

function profileMe(){
 timeThisTask();
 var timerlink = document.getElementById("tabs").
       getElementsByTagName('li')[2].firstChild;
 var typeNode = timerlink.nodeType;
 var nameNode = timerlink.nodeName;
 var valuNode = timerlink.nodeValue;
}

You can also add profilers to your code via the console.profile(”foo”) - console.profileEnd(”foo”) function calls. This can be great when you want to track down events that happen onload.

당신은 또한 console.profie("foo") - console.profileEnd("foo") 함수 호출로 당신의 코드에 프로파일을 추가할수 있다.

Try the Coded Profiler using console.profile|profileEnd command

function profiledFunction(){
 console.profile("Test Auto Profiler");
 timeThisTask();
 profileMe();
 console.profileEnd("Test Auto Profiler");
}

You can log calls to a specific function call and see what parameters are being passed to it and how many times it is being called. To do this open the script tab, find your function and right click within it. From the popup menu choose the “log calls to “function name”".

Now whenever that function is called you get a nice message in the console along with the parameter values sent to it.

Try the Logged Function test with logged functions

function callLoggedFunction(){
 for(x=0;x<2;x++){for(y=1;y>0;y--){loggedFuction(x,y);}}
}
function loggedFuction(x,y){
 if(y>x) console.info("y is greater than x");
}

In the HTML tab you can also log events for specific elements. This can be useful when you are creating elements on the fly via the DOM and want to track all the events happening behind the scenes.

The Net tab is quite useful for tracing HTTP request and responses. Network traffic can be filtered by type (HTML, CSS, JS, Images, XmlHttpRequest). The Params tab is very handy and shows you the request parameters in a table format. This is great for tracing your Ajax requests. The issue with this that I found is that once a request is made which leaves the current page you loose the previous pages net events. Maybe a feature for the next version of FireBug?

From the HTML tab you can use the Layout tab to view and edit any element’s offset, margin, border, padding and dimension values on the fly.

In the Style sub tab of the HTML tab you can choose an option to “Show Computed Style” which shows you the final style values of the selected HTML element. Another neat trick is that you can click on any CSS property and edit it inline in real time. You can use the up/down keys and page up/page down keys to change numeric values and see your changes in real time, for example padding etc.