blog
discuss
contribute
documentation

JavaScript 로깅

JavaScript 디버거를 갖는 것은 좋습니다, 그러나 때때로 버그를 발견하는 가장 빠른 방법은 콘솔로 많은 정보를 보내는 것입니다. Firebug는 웹페이지에서 호출가능한 강력한 로깅함수들의 세트를 제공합니다.

당신의 새로운친구, console.log

Firebug의 콘솔에 쓰는 가장 빠른 방법은 다음과 같습니다: console.log("hello world")

당신이 원하는 많은 인자들을 포함해서 넘길 수 있습니다. 그것들은 한줄에 다음과 같이 묶여져 나타날 것입니다.console.log(2,4,6,8,"foo",bar).

객체 하이퍼링크 로깅

console.log와 이것과 관련된 함수들은 콘솔로 텍스트를 쓰는 것 이상의 많은 것을 할 수 있습니다. 어떠한 종류의 객체든지 console.log로 넘기면 하이퍼링크로 나타납니다. 엘리먼트, 함수, 배열, 당신이 만든 객체 이러한 링크들을 클릭하면 그 객체를 그들이 존재하는 탭에서 가리키게 될 것 입니다.

문자열 포맷

console.log는 printf의 전통적인 문자열 포맷을 사용할수 있습니다. 예를 들면, 다음과 같이 쓸수 있습니다. console.log("%s is %d years old.", "Bob", 42).

컬러 코딩

console.log 외에도, 컬러풀한 비주얼과 의미있는 구별이 되는 메세지를 출력하는 몇가지 함수가 있습니다. 이것들은 console.debug, console.info, console.warn, 그리고 console.error 입니다.

시간차와 분석

Firebug는 성능을 측정하는 두가지 쉬운방법이 있습니다. 낮은 수준의 방법으로는 console.time("timing foo")을 측정하고자하는 코드 전에 호출하고, console.timeEnd("timing foo")를 코드 후에 호출합니다. Firebug는 이 코드사이에서 소비된 시간기록을 보여줄 것입니다.

높은 수준의 방법으로는 JavaScript 분석기를 사용하는 것입니다. 단지 측정하길 원하는 코드 전에console.profile()를 호출하고, console.profileEnd()를 후에 호출하면 됩니다. Firebug는 이코드에서 모든 함수의 호출에 대해 얼마만큼의 시간이 소비되었는지에 대한 자세한 보고서를 기록합니다.

Stack traces

console.trace()를 호출하면 Firebug는 매우 정보성있는 stack trace를 콘솔에 나타냅니다. 스택에 어떠한 함수가 있는지 알려줄 뿐만 아니라, 각각의 함수로 넘겨진 각각의 변수에 대한 값도 포함합니다. 그 함수나 객체를 클릭하면 그들을 가리킬수 있습니다.

중첩된 그룹

때론 일렬로 나열된 메세지들이 읽기에 어려울 수 있습니다, 그래서 Firebug는 콘솔에서 들여쓰기를 통해 이를 해결해줍니다. console.group("a title")를 호출하면 하나의 들여쓰기된 새로운 블록이 시작됩니다, 그리고 console.groupEnd()은 그 블록을 닫습니다. 여러분들이 원하는 여러 단계의 들여쓰기 블록을 얼마든지 만들 수 있습니다.

객체 가리키기

객체의 모든 속성 또는 HTML에서 모든 엘리먼트에 대한 코드를 얼마나 많이 손으로 직접 타이핑하고 있나요? Firebug를 사용하면, 다신 그 코드를 적을 일이 없습니다.

console.dir(object)를 호출하면 DOM탭의 축소형같이, 객체의 속성에 대한 목록을 기록합니다. console.dirxml(element)를 호출하면 HTML 또는 XML 엘리먼트를 HTML탭의 축소형 같이 XML 형태로 출력해줍니다.

단호함

Assertions은 변경에 있어서 여러분의 코드가 안정적인지 확인하는 훌륭한 방법입니다. Firebug는 assertion함수 세트를 제공하며, 당신의 assertion이 실패했을 때는 매우 정보성있는 에러 메세지를 작성해줍니다.