자바스크립트 디버깅 - 개체 속성 보기

몇 년 전부터 자바스크립트 디버깅이 참 쉬워졌다. 이미 FireFox, Chrome 등 다른 브라우저는 물론이고 MS의 인터넷 익스플로러까지도 개발자 도구를 포함하고 있기 때문에 웹페이지 디버그 모드로 들어가서 한 단계, 한 단계 실행하면서 개체의 정보를 보고 뭐가 문제인지 찾을 수 있게 되었기 때문이다.

그런데 가끔 이러한 브라우저 개발자 도구를 사용하지 못한다든가 개발자 도구에서 들여다보기에는 답답한 경우가 있다. 직접 개체의 속성 정보를 원하는 대로 출력해보는 건 어떨까?

기본적으로 JavaScript 개체의 모든 속성을 구하려면 for (var key in obj) 반복문을 사용하면 된다. obj의 모든 속성의 키를 key 변수에 담아 반복하는 것이다. 그리고 속성 값을 구하려면 obj[key]와 같이 하면 된다. 따라서 다음과 같이 하면 어떤 변수의 속성 키와 값을 모두 문자열에 담을 수 있다.

var obj = ...; // obj는 디버깅 대상 개체
var s = ''; // 결과를 담을 문자열
for (var key in obj)
    s += key + ' = ' + obj[key] + '\n';

웹브라우저 주소창에 javascript:로 시작하는 문자열을 입력하거나 또는 개발자 도구로 들어가서 콘솔에서 입력하면 JavaScript를 실행할 수 있으므로 위 내용을 활용해서 임의의 웹페이지 개체 정보를 새 창으로 출력할 수 있다. 다음은 웹브라우저 정보를 가지고있는 개체인 navigator를 디버깅하는 예시다. 지금 바로 웹브라우저 주소란이나 콘솔에 입력해보시길~

javascript: var obj = navigator; var s = ''; for (var key in obj) s += key + ' = ' + obj[key] + '<br>'; var w = window.open(); w.document.open(); w.document.write(s); w.document.close();

인터넷익스플로러의 경우 위에서 팝업창을 열 때 팝업창 차단 기능으로 인해 오류가 발생할 수 있다. 이런 경우는 팝업창 차단 메시지에서 차단을 허용하든가, 아니면 뒤의 팝업창 여는 부분을 수정해서 다음과 같이 현재 웹페이지 내에다 출력해도 될 것이다.

javascript: var obj = navigator; var s = ''; for (var key in obj) s += key + ' = ' + obj[key] + '<br>'; var div = document.createElement('div'); div.innerHTML = s; document.body.insertBefore(div, document.body.firstChild);

마지막으로 내가 원하는 임의의 개체를 그때그때 지정하여 디버깅할 수 있게 한다면 다음과 같이 개체명을 입력받으면 된다. 그리고 즐겨찾기로 등록하면 아무 때나 디버깅이 가능하므로 편리할 것이다(Chrome에서는 주소란에 입력한 문자열을 선택한 후 즐겨찾기로 끌어다 놓으면 되고 IE에서는 아무 웹페이지나 즐겨찾기로 등록한 후 수정으로 들어가 주소 정보를 수정하면 된다).

javascript: var obj = eval(prompt('개체명을 입력하세요', '')); if (obj) { var s = ''; for (var key in obj) s += key + ' = ' + obj[key] + '<br>'; var w = window.open(); w.document.open(); w.document.write(s); w.document.close(); }