Javascript로 개발하다보면 값을 확인하기 위해 alert을 가끔씩 찍습니다-_- 요즘은 FireBug와 같은 Javascript 디버그 툴들이 참 많이 있긴하죠.
FireBug는 console.log를 통해서 메세지를 찍을 수 있죠.
하지만, FireBug를 켜지 않으면 에러를 뿜어버리는 단점이 존재를 하죠-_- 그래서 가장 간단히 값을 확인하는 것은 역시나 alert이죠. 하지만, alert의 단점은 마우스동작으로 인한 값을 추출하기 위해서는 확인하기 힘든 단점이 있어요.
마우스로 드래그앤드랍을 하는 사이에 값을 확인하고 싶은데, 거기서 얼럿이 떠버리면 확인하기 힘들죠-_-

그 단점을 극복해주는 Blackbird라는 놈이 있는데요. 이름 참 잘 지은 것 같네요. 웹사이트에서 검은창으로 떠다니는 디버그메세지창을 보여주거든요-_-

아래는 다운받고 데모를 볼 수 있는 사이트입니다.
http://www.gscottolson.com/blackbirdjs/

사용자 삽입 이미지
사이트 방문하시면 사용법은 그냥 알 수 있구요.
추가도 그냥 해당 사이트에 js와 css파일을 추가만 하시면 바로 쓸 수 있습니다^^
그리고 웹사이트 한쪽 구석에 나오게 되는데 저것에 의해서 화면이 가려질까봐를 염려한-_- 창 이동 단축키가 존재합니다-_-
단축키로 창을 보이고 안보이게 할 수 있습니다. 클리어로 창 내용을 지울 수도 있구요^^

로그찍는 것도 로그레벨에 따라 찍을 수 있어서 좋네요. 그리고, 프로파일링 기능(이라고 하기에 좀 뭐한-_-)이 있는데, 성능을 개선을 위한 수행시간 측정을 해주는 기능도 제공합니다^^

다만 아쉬운 점이 있다면 객체나 배열을 한번에 로그로 찍을 수 있는 기능이 없네요.
Arthropod이라는 Adobe AIR로 개발된 Flash디버그메세지창이 있는데요(이것과 매우 비슷하죠^^). 이것은 그냥 Debug.object(object명); 이라고 치면 그 객체정보가 다 나오는 기능이 있죠.
배열도 Debug.array(array명);하면 배열내용을 확인할 수 있구요.

그래도 크로스브라우징으로 로그를 찍을 수 있어서 참 좋은 듯^^ FireBug는 FireFox에서 밖에 안되서-_-

PS. 이 프로그램은 http://twitter.com/xguru님으 트위터를 빨로우 하다가 발견했습니다. 역시 트위터의 힘은 대단한 것 같아요^^ 감사해요~
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 성주 2009.12.29 13:30  댓글주소  수정/삭제  댓글쓰기

    저는 RSS 구독을 통해서 발견했습니다.
    역시 인터넷의 힘은 대단해요

  2. BlogIcon 드렁크수달 2010.05.06 22:53  댓글주소  수정/삭제  댓글쓰기

    이런게 있을줄 알았습니다.. 낼 한번 테스트 해보고 좋으면 만든사이트마다 다 적용을 시켜봐야겠네요 ^^ 좋은글 감사합니다. 퍼갈게요

  3. BlogIcon Kata Pro 2010.06.19 00:33  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 엮인글(트랙백)을 추가하였습니다.

  4. 2011.05.04 18:42  댓글주소  수정/삭제  댓글쓰기

    감사합니다.