blog
discuss
contribute
documentation

JavaScript 디버깅

Firebug는 강력한 JavaScript 디버거를 포함하며 언제든지 실행을 중지하고 구문을 볼 수 있습니다. 당신의 코드가 느리다면 JavaScript 분석기를 사용하여 성능을 측정하고 재빨리 병목되는 부분을 찾을 수 있습니다.

스크립트 쉽게 찾기

많은 웹 어플리케이션은 많은 수의 파일을 포함합니다, 그리고 이들중에서 디버깅하기 원하는 파일을 찾는 것은 자질구레한 일입니다. Firebug의 스크립트 파일을 정리하고 정렬하여 당신이 파일을 한번에 찾는데 도움을 줍니다.

어떤 줄에서든 실행중지

Firebug는 breakpoint를 만들수 있습니다, 이것은 디버거가 특정한 줄에 도달했을때 실행을 중지하라고 말해줍니다. 실행이 중지되어있는 동안에, 변수의 값과 객체들을 볼 수 있습니다.

breakpoint를 설정하기 위해서, 줄의 번호를 클릭하면 됩니다, 그러면 breakpoint를 나타내기 위해 빨간색 점이 표시된다. 그 빨간점을 다시 클릭하면 breakpoint는 제거됩니다.

실행 중지, 뿐만 아니라

실행중지되는 부분이 잦을 때는 Breakpoint는 매우성가시게 됩니다. 때론 특정 조건에서만 중지가 되길 원할때가 있습니다. Firebug는 표현식을 체크해서 참일경우에 breakpoint부분에서 중지되는 조건부 breakpoint를 설정할수 있습니다.

조건이 있는 breakpoint를 설정하기 위해서는, 줄번호에서 우측클릭을 하면됩니다. 그러면 풍선창이 나타나고 이 프롬프트창에 JavaScript 표현식을 입력하면 됩니다. 언제든지 우측클릭을 하면 표현식을 변경할수 있고, 또는 왼쪽클릭은 breakpoint를 제거합니다.

한번에 한단계씩

디버거가 한번 중지되면, 한번에 한줄씩 계속해서 실행시킬수 있습니다. 실행된 줄에서 변수와 객체에 어떠한 영향을 주는지 확인할 수 있습니다.

한줄이상의 단계별 실행을 선택할 수도 있습니다. 콘텍스트메뉴에서, "Run to this Line"을 선택하면 당신이 클릭한 줄까지 계속해서 실행됩니다.

에러를 막기

당신이 항상 디버거의 사용을 선택할수는 없습니다. 때로는 디버거가 당신을 선택합니다. Firebug는 에러가 발생해서 당신이 문제를 일으킨 조건문을 검토하려고 할때 디버거가 자동적으로 실행되는것을 막는 옵션을 제공한다.

쌓여있지 않는 Stack traces

디버거가 중지됐을때, Firebug는 현재 실행되고 있고 리턴값을 기다리는 중첩된 함수들의 세트의 call stack을 보여줍니다.

call stack은 각각의 함수 이름으로 툴바에 간결한 버튼으로 나타납니다. 버튼을 클릭하면 중지된 함수에서 해당하는 줄로 이동하며 그 함수안의 지역변수들을 볼 수 있습니다.

표현식 보기

디버깅 하는 동안에, 복합적인 표현식의 값 또는 DOM 속의 객체에 대한 값을 알고 싶을 때가 있습니다. Firebug는 디버거에서 단계별로 업데이트가 된 값을 가지고 있는 임의의 JavaScript 표현식을 입력할수 있도록 허용합니다.

이러한 표현식을 타이핑 할 때, 객체의 속성은 탭키를 사용하여 자동완성할 수 있다는 것을 잊지마세요.

다양한 툴팁

디버거가 중지되어있는 동안에, 현재 실행되는 함수에서 마우스를 어떤 변수 위에든지 가져다 대면 변수의 값이 툴팁으로 나타나는 것을 볼 수 있습니다. 이것은 코드에서 눈을 떼고 답을 찾는 좋은 방법입니다.

JavaScript 성능 분석

당신의 웹어플리케이션은 대부분 완벽합니다. 모든 버그도 제거했습니다, 당신의 웹어플리케이션은 사용자에게 의해 보여지고, 사용자들은 그것을 좋아합니다. 단한가지 문제 - 확실한 이유를 알수 없는 약간 느린점만 빼고.

Firebug를 사용하면, 당신의 코드가 왜 느린지 궁금해할 필요가 전혀 없습니다. Firebug 분석기를 사용하여, 빠른 것들 중에서 느린것을 분리할 수 있습니다.

분석기를 사용하기 위해서는, Console 탭의 "Profile" 버튼을 클릭하면 됩니다. 그리고 당신의 어플리케이션을 사용하거나 페이지를 리로딩한후 "Profile" 버튼을 다시 클릭하면 됩니다. 그러면 무슨 함수가 호출되었고 각각 얼마나 많은 시간이 걸리는지에 대한 자세한 보고서를 볼수 있을 것입니다.

함수 호출 로깅

때때로 문제가 있는 함수가 매번 호출될 때 매번 디버거를 실행할수는 없습니다. 단지 언제 함수가 호출되었고 어떤 파라메터들이 전송되었는지 알고 싶습니다.

함수가 호출된 것을 추적하기 위해서, Script 탭안에서 우측클릭을 해서 "Log calls to '함수명'"에 체크를 하면 됩니다. 그러면 호출시에 입력되어진 값을 콘솔에서 볼 수 있습니다.

지나가지 않고, 108줄로 곧바로 가기

종종 당신의 스크립트에서 특정 줄로 한번에 가고 싶을 때가 있습니다. 이렇게 쉬울수가 없군요, 왼쪽에서 스크린샷에서 보이는것과 같이 #기호를 앞에 적고 줄번호를 검색창에 타이핑하세요.