Javascipt 디버깅하기

debugger with terminal

function reverse(str) {
  debugger;
  return str.split('').reduce((rev, char) => char + rev, '');
}

reverse('apple');

1. debugger 키워드를 멈추고 싶은 곳에 입력한 후, function을 셀프로 불러준다.

2. 터미널에 해당 폴더로 간다음 node.inspect 파일명.js

3. cont (혹은 continue, 혹은 c) 를 친다.

4. repl 를 친다.

5. 그 후 디버깅 하고 싶은 코드를 치면 된다.
   예를들어, str.split('').reduce((rev, char) => char + rev, ''); 이걸 터미널에 입력하면 'elppa'를 보여준다.

debugger in google crome

1. 개발자도구에서 Sources 탭으로 간다음 script.js를 클릭
2. 해당 라인의 숫자 왼쪽을 클릭하면 마크가 생기면서 break point가 설정된다.-> 이 라인까지만 코드가 실행된다는 뜻 (다 사용한 후에는 break point는 항상 지워준다)

3. 오른쪽에 step 버튼을 클릭하면 break point가 다음 라인을 디버깅 할수있다.

4. 혹은 코드에 debugger;을 입력하면 crome창에서 바로 Sources 탭을 켜준다.

console

console.log
console.warn
console.error
console.table : 큰 object를 console log할때는 테이블 형식으로 데이터를 보여줘서 유용하다.