모든 현대의 브라우저들은 에러를 수정하기 위해 디버깅 기능을 제공합니다. 그 중 우리가 사용하는 크롬에 대해서 알아봅시다.
source 창
크롬으로 예제 페이지를 엽니다.F12키를 눌러 개발자 도구를 실행합니다.
sources 창을 엽니다.
그리고 index.html의 helllo.js를 클릭합니다.
1번: Resource zone으로 HTML이나 JavaScript, CSS등의 파일을 표시합니다.
2번: Source zone, 소스코드를 보여줍니다.
3번: Information and control zone, 디버깅을 위한 영역으로서 이제 살펴볼 것입니다.
Console
Esc키를 누르면 아래에 콘솔이 열립니다(저 위에 저는 이미 눌려 있었네요). 거기에 직접 커맨드를 입력하고 엔터를 눌러 실행해볼 수 있습니다. 문장이 실행되면 아래에 결과가 출력됩니다.예를 들어 1+1를 입력하고 엔터키를 치면 3이 출력되고, hello("debugger")를 입력하면 아무것도 리턴하지 않으므로 undefined가 출력됩니다.
Breakpoints
이제 예제의 프로그램 내에서 일어나는 일을 살펴보도록 합니다.hello.js 소스코드의 4번째 줄 숫자 4를 클릭해봅니다. 축하합니다! 첫번째 breakpoint를 설정하는데 성공하셨군요. 그럼 8행도 클릭해 봅시다.
breakpoint란 디버거가 자동으로 코드 실행을 멈추는 포인트입니다.
코드 실행이 멈춰있는 동안 콘솔을 통해 현재의 변수를 관찰 가능하고 커맨드를 입력해 볼 볼 수 있는데, 이것이 바로 디버깅입니다.
콘트롤 존을 통해 breakpoint 리스트를 볼 수가 있고, 그 수가 많을 때 매우 유용합니다.
이 콘트롤 존을 통해서
- breakpoint간에 빠르게 점프가 가능해지고
- 해제하여 임시로 brerakpoint를 켜고 끌수 있으며
- 우클릭- remove로 해제할 수도 있습니다.
Conditional breakpoint
행번호를 좌클릭 하지 않고 우클릭해서 conditional breakpoint를 설정할 수 있습니다. 이것은 해당 문장이 truthy할 때만 활성화되는데, 특정 변수값이나 인수값에 멈추도록 하는 경우 유용합니다.Debugger command
아래처럼 직접 debugger라는 커맨드를 넣어서 코드를 멈출 수도 있습니다.
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- the debugger stops here
say(phrase);
}
| cs |
이 기능은 브라우저가 아닌 에디터에서 작업하는 중일 경우 편리합니다.
Pause and look around
브레이크포인트를 설정했으니 F5키를 눌러 페이지를 재실행해 봅시다. 4행에서 페이지 실행이 멈추는 것을 알 수 있습니다.
1. Watch - 특정 표현식에 대한 현재의 값을 보여줍니다.
Watch 탭을 선택하고 +를 눌러서 표현식을 추가할 수 있습니다. 프로그램이 실행되면 디버거는 자동으로 그 값을 계산해서 보여줍니다.
2. Call stack - nested call chain 을 보여줍니다.
현재 디버거는 index.html(거기에는 함수가 없으므로 anonymous로 표시됨) 내부의 스크립트에서 호출된 hello()라는 함수 속에 위치하고 있습니다. Call stack 하부에 표시된 목록 중 하나를 클릭하면 디버거는 위치를 해당 코드로 옮겨가고 사용되는 변수 목록도 바뀌게 됩니다.
3. Scope - 현재의 변수들
Local에서는 함수 내의 로컬 변수들과 그 값을 볼 수 있고, Global에서는 말 그대로 global 변수들을 볼 수 있습니다.
실행 추적
콘트롤 존 상단을 보면 몇 개의 버튼이 있습니다.
실행을 재개합니다. 만약 더 이상의 브레이크포인트가 없다면 디버거는 컨트롤을 잃고 코드가 전부 실행됩니다. 한 번 누르면 다음과 같이 됩니다.
새로운 중단점 say()내부로 옮겨가서 멈췄습니다. 이 때 Call stack을 보면 say라는 호출이 하나 더 늘어난 것을 관찰할 수 있습니다.
이 버튼을 눌러보면 이제 alert가 실행됩니다. 중요한 것은 alert건 어떤 함수건 실행 시 내부로 들어가지는 않고 함수 전체를 건너 뛴다는 것입니다(함수 내부에서도 한줄 한줄 실행하는 것이 아니라 함수는 하나로 취급하여 전부 실행해 버린다는 뜻 같습니다).
Logging
무언가를 콘솔에 출력하고 싶을 때 console.log 함수를 사용합니다. 예를 들어 아래의 코드는 0에서 4까지를 콘솔에 출력합니다.
// open console to see
for (let i = 0; i < 5; i++) {
console.log("value", i);
}
| cs |
일반 유저는 이 메세지를 볼수가 없고, 개발자 도구를 열어서 콘솔을 활성화 해야만 볼 수 있습니다. 일반적으로 코드 내에 로그를 충분히 작성해 주면 디버거 없이도 코드에서 어떤 일이 수행 중인지 알 수가 있는 경우가 많습니다.
댓글 없음:
댓글 쓰기