[디버깅] 크롬을 활용한 디버깅하는 법

크롬을 활용한 디버깅하는 법을 알아보자.

1. console.log()를 이용한 방법

2. Breakpoint를 이용한 방법

우선 1번 사항은  시간이 2번 사항에 비해서 코드구조, 로직 흐름을 이해해야하기때문에 느리다.

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

따라서, 2번사항을 통해서 알아보자. 내가 설명하는 것보다 밑에 문서보는 게 빠를 것임.

참고문서 : https://developers.google.com/web/tools/chrome-devtools/javascript/

참고문서 다 봤으면 핵심만 추리자.

1. breakpoint 방법이 1번보다 빠름.

2. 사용하고있는 프롬의 확장프로그램이 많이 설치된 경우 차라리 시크릿모드로 디버깅할 것.

3. breakpoint 유형을 외우면 좋겠지. 반응속도가 빨라 질테니깐.. 억지로 외우지마 그냥 검색하던가 개발자모드 들어가서 보는게 정신건강에 좋음.

4. 잘못된 곳 찾았다. 

   더블클릭하면 우측에 scope 나 watch를 이용해서 오류를 찾고, ESC 누르면 콘솔창 뜬다. 그리고 코드수정.