jQuery 디버그 방법 설명
jQuery Debug 방법에 대해서 정리 합니다.
여러가지 방법이 있으므로 우선 정리후 어떤것이 효율적이고 좋을지 결론을 내려보도록 하겠습니다.
디버그할 웹페이지에 아래와 같이 console.log() 작성해 줍니다.
<script type="text/javascript">
console.log('디버그할 내용을 넣어줍니다.');
</script>
console.log('디버그할 내용을 넣어줍니다.');
</script>
해당 로그를 확인하는 방법은 아래와 같이 여러가지가 있습니다.
- Mozilla Firefox 브라우져에서 Firebug를 사용하는 방법
기본적으로 Firefox의 부가기능인 Firebug를 설치후 실행해 줍니다.
해당페이지를 열어보면 Firebug에 아래와 같이 디버그 내용이 표시됩니다.
엄청 간단하죠? ㅎㅎ - Fiddler 프로그램 이용하기 (http://www.fiddler2.com)
Fiddler라는 프로그램을 다운받아 설치후 실행만 해주시면 브라우져에서 오고가는 대부분의 내용들이 상세하게 표시됩니다.
그런데 정작 중요한 jQuery 자체의 디버깅 보다, 브라우저와 서버쪽 호출 정보 위주라서 ajax처리 할때만 유용할 것 같습니다. - Internet Explorer 개발자 도구 이용하기
디버그할 웹페이지에서 F12를 누른후 스크립트 항목으로 이동하면 아래와 같은 화면을 보실 수 있습니다.
IE에서 object 값(배열 등등)을 표시하기 위해서는 아래와 같이 변경해서 사용하면 됩니다.
console.log(JSON.stringify('디버그할 내용을 넣어줍니다.'));
console.dir('디버그할 내용을 넣어줍니다.');