Study/JavaScript

JavaScript [Chrome 으로 디버깅 하기]

maino77 2021. 8. 26. 21:35

이번 시간에는 디버깅에 대해 이야기해보겠습니다.

 디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다.

우리는 Chrome 브라우저에서 제공하는 디버깅 툴을 사용하도록 하겠습니다.

 

 

Sources 패널

크롬 버전에 따라 보이는 화면이 다를 수 있습니다. 그러나 구성이 크게 바뀌지 않기 때문에 캡쳐본과 함께 설명하겠습니다.

  1. Chrome의 창을 띄워놓습니다.
  2. F12 를 눌러 개발자 도구를 엽니다.
  3. Sources 탭을 클릭해 Sources 패널을 엽니다.

Sources 패널

그리고 옆의 파일 목록에서 파일 하나를 클릭하면 다음과 같이 화면이 바뀝니다.

  • 왼쪽 파일들이 있는 영역은 파일 탐색 영역은 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여줍니다.
  • 중앙은 코드 에디터 영역이라 합니다. 리소스 영역에서 선택한 파일의 소스 코드를 보여줍니다. 여기서 소스 코드를 편집할 수 있습니다.
  • 오른쪽은 자바스크립트 디버깅 영역입니다. 디버깅에 관련된 기능을 제공합니다. 

 

 

콘솔

Esc 를 누르면 개발자 도구 하단부에 콘솔 창이 열립니다. 여기에 명령어를 입력하고 Enter 를 누르면 입력한 명령어가 실행됩니다. 또는 개발자 도구 상단 Source 옆에 있습니다.

콘솔 창에 구문을 입력하고 실행하면 아랫줄에 실행 결과가 출력됩니다.

1 + 2 입력하면 3이 출력되고, hello("debugger") 를 입력하면 undefined 가 출력됩니다. undefined 가 출력되는 이유는 hello('debugger') 가 아무것도 반환하지 않기 때문입니다.

 

 

중단점

예시 페이지 내부에서 무슨 일이 일어나는지 자세히 살펴보겠습니다.

hello.js를 소스 코드 영역에 띄우고 네 번째 줄 코드 좌측의 줄번호 4를 클릭합시다. 코드가 아닌 줄번호 4에 클릭해야 합니다.

그러면 배경이 파란색으로 바뀌면서 중단점으로 설정됩니다. 그리고 8도 클릭해줍니다.

중단점을 설정한 모습

중단점은 말 그대로 자바스크립트의 실행이 중단되는 코드 내 지점을 의미합니다.

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있습니다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수 있습니다. 디버깅이 가능해지는 겁니다.

Sources 패널 우측 디버깅 영역을 보면 중단점 목록을 확인할 수 있습니다. 파일 여러 개에 다수의 중단점을 설정해 놓은 경우, 디버깅 영역을 이용하면 아래와 같은 작업을 할 수 있습니다.

  • 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동할 수 있습니다.
  • 체크 박스 선택을 해제해 해당 중단점을 비활성화 할 수 있습니다.
  • 마우스 오른쪽 버튼을 클릭했을 때 나오는 ‘Remove breakpoint’ 옵션을 통해 중단점을 삭제할 수도 있습니다.
  • 이 외에도 다양한 기능이 있습니다.
❗ 조건부 중단점
줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 조건부 중단점을 설정할 수 있습니다. Add conditional breakpoint를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면 표현식이 참인 경우에만 실행을 중지시킬 수 있습니다.

조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있습니다.

 


debugger 명령어

스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 봅니다.

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

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

  say(phrase);
}

debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 하지 않아도 됩니다. 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리합니다.

 

 

멈추면 보이는 것들

중단점을 설정했으면 새로고침 단축키 F5를 눌러 중단점을 작동시킵니다.

그러면 아래 그림과 같이 네 번째 줄에서 실행이 중단되는 것을 확인할 수 있습니다.

오른쪽의 각 패널은 아래와 같은 기능을 제공합니다.

  1. watch : 표현식을 평가하고 결과를 보여줍니다.
      Add Expression 버튼 + 를 클릭해 원하는 표현식을 입력한 후 엔터를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다.
  2. Call Stack : 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다.
      실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄습니다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치합니다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력됩니다.

      콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 휙 움직이고, 변수 역시 재평가됩니다.
  3. Scope : 현재 정의된 모든 변수를 출력합니다.
      Local은 함수의 지역변수를 보여줍니다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있습니다.
      Global은 함수 바깥에 정의된 전역 변수를 보여줍니다.
      Local 하위 항목으로 this에 대한 정보도 출력하는데 이는 추후에 다시 학습하겠습니다.

 

 

실행 추적하기

디버깅 영역 상단에 있는 버튼들이 무슨 역할을 하는지 알 필요가 있습니다.

이 내용은 설명서와 같은 느낌이기에 참고할 페이지를 올려둘테니 들어가셔서 확인하시면 될 것 같습니다.

https://ko.javascript.info/debugging-chrome

 

Chrome으로 디버깅하기

 

ko.javascript.info

 

 

console.log

console.log 함수를 이용하면 원하는 것을 콘솔에 출력할 수 있습니다.

// 콘솔창을 열어 결과를 확인해 보세요.
for (let i = 0; i < 5; i++) {
  console.log("숫자", i);
}

 

결과는 콘솔창에만 뜨기 때문에 일반 사용자는 결과를 확인할 수 없습니다. 결과를 보려면 개발자 도구의 콘솔 패널을 열어야 합니다.

코드에 console.log를 넣으셨다면 디버거 없이도 무슨 일이 일어나는지 파악할 수 있기 때문에 적절히 활용하면 큰 도움이 될 것 입니다.

 

 

* 요약 *

스크립트 실행이 중단되는 경우는 다음과 같습니다.

  1. 중단점을 만났을 때
  2. debugger문 만났을 때
  3. 에러가 발생했을 때(개발자 도구가 열려있고 일시정지 버튼이 '활성화’되어있는 경우)

스크립트 실해잉 중지되면 중단 시점을 기준으로 변수에 어떤 값이 들어가있는지 확인할 수 있습니다. 또한 단계별로 코드를 실행하면서 어디에서 문제가 발생했는지 찾을 수 있습니다. 이런 식으로 디버깅이 진행됩니다.

728x90
저작자표시 비영리 (새창열림)