자바스크립트 크롬으로 디버깅하기

디버깅(debugging)

스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다.

 

Sources 패널

크롬에서 F12, 컨트롤+쉬프트+I를 눌러 개발자 도구를 연다.

 

• 토글 버튼을 누르면 네비게이터가 열리면서 현재 사이트와 관련된 파일들이 나열된다.

 

• 1. 파일탐색영역 : 페이지를 구성하는데 쓰인 모든 리소스를 트리 형태로 보여준다.
  크롬 익스텐션이 여기에 나타날 때도 있다.
• 2. 코드에디터영역 : 선택한 파일의 소스 코드를 보여준다. 여기서 코드 편집도 할 수 있다.
• 3. 디버깅영역 : 디버깅에 관련된 기능을 제공한다.

 

콘솔(Console)

개발자 도구에서 ESC를 누르면 하단에 콘솔 창이 열린다.

여기에 명령어를 입력하고 엔터를 누르면 입력한 명령어가 실행된다.

 

중단점(Breakpoints)

자바스크립트의 실행이 중단되는 코드 내 지점을 의미한다.

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다.

또한 실행이 중지된 시점을 기준으로 명령어를 실행하여 디버깅할 수 있다.

 

 

조건부 중단점

줄번호에 마우스 오른쪽 버튼을 클릭하면 조건부 중단점(conditional breakpoint)을 설정할 수 있다.

Add conditional breakpoint 를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행 중지

변수와 함수의 매개변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있다.

 

debugger 명령어

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 여기서 실행이 멈춥니다.

  say(phrase);
}

• 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 본다.
• 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리하다.

 

디버깅영역의 하위패널

 

• 1. Watch : 표현식을 평가하고 결과를 보여준다.
  + 버튼을 클릭해 원하는 표현식을 입력한 후 엔터를 누르면 중단 시점의 값을 보여준다.
  입력한 표현식은 실행 과정 중에 계속해서 재평가된다.
• 2. Call Stack : 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.
• 3. Scope : 현재 정의된 모든 변수를 출력한다
  • Local : 지역변수
  • Global : 전역변수
  • Local : 하위 항목으로 this에 대한 정보도 출력된다.

 

실행 추적하기

는 봐도 잘 모르겠어서 디버깅해볼때 하면서 다시 써보겠읍니당,,