[JS 초보자]#5 테스트 & 디버그편 JavaScript 배우기

JavaScript에서 디버깅하는 방법

JavaScript로 지금까지는 console.log() 밖에 debug로 사용하고 있었습니다만, 그 밖에도 여러가지 debug 방법이 있었으므로 소개합니다.


메소드 이름
기능


assert()
테스트 결과가 다른 경우 메시지 (오류) 출력

count()
통과한 횟수를 출력

debug()
메시지 출력

dir()
객체의 속성과 값 출력

dirxml()
HTML/XML 요소의 XML 트리 출력

error()
메시지(오류) 출력

group()
메시지 그룹화 시작

groupCollapsed()
메시지 그룹화 시작(접기)

groupEnd()
메시지 그룹화 종료

info()
메시지 (info) 출력

log()
메시지 (포맷 지정 가능) 출력

profile()
프로파일링 시작

profileEnd()
프로파일링 종료

time()
타이머 시작

timeEnd()
타이머 종료·표시

trace()
Stack Trace 출력

warn()
메시지 (warn) 출력

<div class='hoge1'>hoge1</div>
<div class='hoge2'>hoge2</div>
<div class='hoge3'>hoge3</div>
<script>
window.onload = function() {
  var a = 'hoge';
  var b = 'fuga';
  var c = 1;
  var d = 2;
  var e = 1;

  console.assert(c == e);
  console.assert(c == d);

  console.debug('Debug Message');

  console.error('Error Message');

  console.info('Info Message');

  console.log('Log Message');
  console.log("%s Message %s Message", a, b);
  console.log(a + " Message " + b +" Message");

  console.warn('Warn Message');

  console.trace();

  console.dirxml(document.body);
  for (var i = 0; i < 3; i++) {
    console.count();
  }

  console.group('Group Message');
  console.log('Log Message in Group Message');
  console.warn('Warn Message in Group Message');
  console.groupEnd();

  console.groupCollapsed('Group Message Collapsed');
  console.log('Log Message in Group Message');
  console.warn('Warn Message in Group Message');
  console.groupEnd();

  console.time('timer');
  console.timeEnd('timer');

  console.profile();
  var div = document.querySelectorAll('div.hoge1, div.hoge2');
  for (var i = 0; i < div.length; i++) {
    window.alert(div[i].innerHTML);
  }
  console.profileEnd();

}
</script>

이전 페이지

[JS 초보자]#1 이벤트편 JavaScript 배우기

[JS 초보자] #2 DOM편 JavaScript 배우기

[JS 초보자]#3 윈도우 객체편 JavaScript 배우기

[JS 초보자]#4 셀렉터 API편 JavaScript 배우기

[JS 초보자]#5 테스트 & 디버그편 JavaScript 배우기