스크립트 실행 중 디버깅 하기

스크립트가 중간에 중단점을 걸어서 실행중인 값을 확인하는 방법입니다.

1. 로그 명령어 추가

다음과 같이 스크립트 중간에 멈추고 싶은 곳에 로그를 남기는 스크립트를 삽입합니다.

console.log("--- Stop")

이제 시나리오를 실행시킵니다. 우측 상단의 초록색 재생버튼으로 실행합니다.

2. 크롬 디버거 실행

크롬 콘솔 탭은 변수 값을 확인하는 등 디버깅 시 용이하게 사용 가능 하며, F12를 눌러 개발자 도구 내에서 직접 접근할 수 있습니다. 개발자 도구 사용시 타겟을 runtime으로 변경해주세요.

오른쪽 상단의 빗자루 버튼을 클릭하여 콘솔창의 내용을 전체 삭제할 수 있습니다.

빗자루 버튼

3. 중단점 잡기

로그메세지를 확인해서 해당 로그 스크립트가 있는 곳으로 이동합니다. 로그의 우 영역을 클릭하세요.

중단하고 싶은 코드 라인을 왼쪽에서 클릭 해주세요.

중단점이 선택이 되면 위와 같이 파란색으로 표시가 됩니다.

이 상태에서 해당 스크립트가 놓여진 이벤트를 실행해주세요. 만약에 로드스크립트나, 새로 시나리오를 시작해야한다면 브라우저 새로고침을 해주세요.

중단점이 잘 걸려있고 실행이 된다면 다음과 같은 상태로 시나리오가 실행중에 중단이 되게 됩니다.

4. 디버깅 하기

현재 상태에서 콘솔에 변수나 컬렉션 명칭을 입력해서 현재 상태를 확인 할 수 있습니다.

꼭 "runtime" 이 선택되어 있는지를 확인해주세요.

우측 버튼을 통해서 중단 된 코드를 재실행하거나 한줄씩 실행시키면서 상태를 상세히 확인할 수 있습니다.

이후 코드를 모두 실행시킬 때는 아래 버튼을 클릭하시면 됩니다.

더이상 디버깅이 필요가 없어지면 디버거를 종료하거나 파란색으로 표시된 중단점을 다시 클릭하여서 해제해주세요.