[js] 자바스크립트 debugger 활용

[js] 자바스크립트 debugger 활용

 

자바스크립트에서 디버깅시 

debugger 기능을 활용할 수 있습니다.

 

debugger

• debugger문을 삽입한 시점이 breakpoint가 되어 디버깅을 할 수 있음
• Call Stack 내역을 통해 호출 스택의 진행 순서를 알 수 있음
• 실행 흐름을 따라가면서 코드를 체크하여 검증할 수 있음

 

debugger 코드 사용

debugger; 라고 코드 중간에 삽입하여 사용하면 debugger 실행 시점일때 개발자 도구가 source로 바뀌면서 화면이 멈춥니다. 

debugger;

 

사용 화면

디버깅 버튼을 누르며 한줄씩 코드를 실행드가 실행해보면 각 변수에 할당되는 값이 우측에 표시되기 때문에 디버깅을 위해 console이나 alert로 값을 일일이 찍어서 확인할 필요가 없습니다. 

• 오른쪽에 도돌이표처럼 생긴 버튼을 누르면 줄 단위로 실행, 디버깅 할때 주로 활용
• 왼쪽 플레이 버튼은 현재 프로시저를 중단없이 실행

 

사용 영상

 

사용예제

const c = () => {
  const y = 'y';
  console.log('c');
  debugger; //debugger 설정
}

const a = () => {
  const x = 'x';
  console.log('a');
  const b = () => {
    const z = 'z';
    console.log('b');
    c();
  }
  b();
}
a();
c();