본문 바로가기
Programming/jQuery

javascript를 console 명령어 팁...

by 신규하 2013. 7. 3.

javascrip에서 디버그를 하면서 console 명령을 쓰면 참~ 편하게 개발 할 수 있습니다.

하지만, ie 낮은 버전에서는 에러를 뱉고 멈춰 버리죠... 참.. 난감하죠.. ^ ^;;

그래서 IE 낮은 버전에서 오류를 발생하지 않고 사용하는 방법을 찾다가 찾은 방법입니다.


/**

 * console을 지원하지 않는 경우 처리

 */

if (!window.console) console = {};

console.log = console.log || function () { };

console.warn = console.warn || function () { };

console.error = console.error || function () { };

console.info = console.info || function () { };

console.assert = console.assert || function () { };

console.trace = console.trace || function () { };

console.count = console.count || function () { };

console.time = console.time || function () { };

console.timeEnd = console.timeEnd || function () { };


/**

 * 각 출력 정의

 */

var CLOG = console.log.bind(console);

var CWARN = console.warn.bind(console);

var CERROR = console.error.bind(console);

var CINFO = console.info.bind(console);

var CASSERT = console.assert.bind(console);

var CTRACE = console.trace.bind(console);

var CCOUNT = console.count.bind(console);

var CTIME = console.time.bind(console);

var CTIME_END = console.timeEnd.bind(console);


/**

 * 실행 테스트

 */

CLOG("LOG TEST");

CWARN("WARN TEST");

CERROR("ERROR TEST");

CINFO("INFO TEST");

CASSERT(!"INFO TEST");

CCOUNT("COUNT TEST");

CTRACE();

CTIME("TIME TEST");

var array = new Array(1000000);

for (var i = array.length - 1; i >= 0; i--) {

    array[i] = new Object();

};

CTIME_END("TIME TEST");


우선, 좀 무식해 보이지만 -_-;;

처음에 코드 블럭에서는 console 명령어가 지원하지 않을 경우 빈 함수를 호출 하도록 합니다.

그리고, 각 출력 정의에서 출력 명령어를 간소화 했습니다.

두번째 블럭 이후 사용은 각자의 취향입니다.

전 디버그용 함수를 간단하게 줄여서 사용하는걸 좋아해서 만들었습니다.

그냥.. console.log()로 찍으셔도 됩니다.


그런데, 이 전에는 각 찍는 console을 함수로 만들어서 아래 처럼 썼더니..


var CLOG = function(o){console.log(o)};


출력하는 곳이 찍는 곳의 위치가 나오지 않고, var LOG의 위치가 나오더군요 ^^;;

그래서 이 방법 저 방법을 찾다가 찾은 방법이 bind입니다.


var CLOG = console.log.bind(console);


이렇게 사용하는 거죠...


출력 결과는 아래와 같습니다.





브라우저 마다 좀 다르게 나올겁니다. 위 결과는 파이어폭스에서 출력한 겁니다.


그럼 잘 사용하세요~ ^^*


참고 : https://developers.google.com/chrome-developer-tools/docs/console-api

댓글