[개발이야기] 개발자도구 디버깅

---

✨[개발이야기] 크롬 개발자도구에서 디버깅 하는 방법✨

---

디버깅이란?

• 스크립트 내에서 발생하는 버그(에러)를 검출, 제거하는 과정을 말한다.
• 대부분의 모던 브라우저 환경은 개발자 도구 내에 디버깅 툴이 존재한다

 

개발자 도구

• 개발자 도구는 Control + Shift + I 또는 F12로 켤 수 있다.

 

Sources 패널 

• Sources 패널은 크게 3가지 영역으로 구분할 수 있다.
• 1. 파일 시스템 : 현재 페이지에서 요청하는 모든 리소스들이 트리 형태로 나타난다.
• 2. 코드 에디터 : 파일 시스템에서 선택한 파일의 내용을 보여주며, 코드 에디터를 통해 소스 코드를 편집할 수도 있다.
• 3.자바스크립트 디버거 : 해당 페이지의 자바스크립트 디버깅을 위해 필요한 다양한 기능을 제공한다.

 

중단점

• 중단점은 코드 내에서 자바스크립트의 실행이 중단되는 지점, 해당 지점의 변수 값등을 파악할 수 있다.

 

단축키 F8 (Resume) - 스크립트 실행을 다시 시작

• 실행을 재개한다. 추가 중단점이 없는 경우 실행이 쭉 이어진다.

 

단축키 F9 (Step) - 다음 명령어 실행

• 다음 문을 실행한다. Step 버튼을 누르면 스크립트 전체를 문 단위로 하나하나 실행 할 수 있다.

 

단축키 F10 (Step Over) - 다음 명령어를 실행하되, 함수 안으로 들어가지 않는다.

• Step(F9) 와 유사하지만, 다음 문이 함수 호출일 때, Step 과는 다르게 동작한다. Step Over는 보이지 않는 곳에서 중첩함수를 실행하긴 하지만 함수 내로 진입하지는 않는다. 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다.
• 실행 한 함수 내부에 또 다른 함수가 있는 경우 실행은 하지만 함수 내부로 이동하지 않는다.

 

단축키 F11 (Step Into) - 다음 명령어를 실행하되, 비동기 동작을 무시하지 않는다.

• Step(F9) 와 유사하지만, 다음 문이 비동기 함수 호출일 때, Step 과는 다르게 동작한다. Step은 setTimeout 같은 비동기 동작은 무시한다. 반면 Step Into 는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.
• 실행 한 함수 내부에 또 다른 함수가 있는 경우 실행도 하고 함수 내부로 이동한다.

 

단축키 Shift + F11 (Step Out) - 실행중인 함수의 실행이 끝날 때까지 실행을 계속한다.

• 현재 실행중인 함수의 실행을 계속 이어나가다가 마지막 줄에서 실행을 멈춘다. 내부동작을 알고 싶지 않은 중첩함수로 진입했거나 가능한 빨리 함수 실행을 끝내고 싶은 경우에 유용하다.