https://ui.toast.com/fe-guide/ko_DEBUG

디버깅은 오류의 원인을 찾고 수정하는 과정이다. 다양한 플랫폼에서 구동되는 자바스크립트 특성상 플랫폼 별로 디버깅 도구가 다양하고, 사용법도 각기 다르기 때문에 보통 "자바스크립트 디버깅은 어렵다"고 말한다. 하지만 자바스크립트 디버깅 도구가 많이 발전했고, 특히 모던 브라우저의 개발자 도구는 대부분 유사한 기능과 UI를 제공하므로 어렵지 않게 디버깅 할 수 있다. 이 가이드는 디버깅 도구 중 가장 많이 사용하는 크롬 개발자 도구 중심으로 설명한다. 그리고 디버깅 환경이 조금 다른 인터넷 익스플로러(이하 IE) 개발자 도구도 설명한다. 다양한 환경에서 발생할 수 있는 크로스 브라우징 이슈는 크로스 브라우징 이슈에서 좀 더 상세히 다루기로 한다.

크롬 개발자 도구는 현재 전 세계에서 가장 많이 사용하는 디버깅 도구이고, 가장 많은 기능을 제공한다. Chromium(크롬의 오픈소스 프로젝트)을 기반으로 한 오페라도 크롬과 같은 개발자 도구를 사용한다. 이 가이드는 크롬 70버전을 기준으로 개발자 도구의 주요 화면과 기능을 설명한다. 그 외 기능은 공식 홈페이지에서 확인할 수 있다.

크롬 메뉴에서 실행하기

- [도구 더보기] → [개발자 도구] 선택

웹 페이지 상에서 실행하기

- 마우스 오른쪽 버튼 클릭(이하 우클릭) → [검사] 선택

단축키로 실행하기

- Ctrl + Shift + I (윈도우)
- Cmd + Opt + I (맥)

Sources 탭에서는 페이지에 로드된 리소스 파일을 확인할 수 있으며, 현재 로드된 스크립트를 수정하여 테스트할 수 있는 스크립트 디버깅 기능을 지원한다. 아래의 그림은 Sources 탭 화면이다. 왼편에는 로드된 리소스 파일의 폴더 트리가, 중앙에는 소스코드가, 오른편에는 다양한 기능 버튼과 정보가 있다.

위의 그림의 각 번호에 대한 자세한 설명은 아래와 같다.

1 ) 줄 번호를 클릭하여 중단점을 설정한다. 중단점을 설정하면 해당 줄 실행 단계에서 실행이 중단된다. 2 ) 실행이 중단된 상태에서 각 버튼으로 자바스크립트 실행 흐름을 제어하여 스텝 디버깅을 할 수 있다. 3 ) 디버깅 시 살펴보고 싶은 변수나 객체를 Watch에 등록하여 중단 시점에 어떤 값을 가졌는지 확인한다. 4 ) 웹 페이지가 로드된 순간부터 중단된 순간까지의 함수 호출 스택을 확인할 수 있다. 호출 스택을 클릭하면 해당 코드를 바로 볼 수 있다.

대개 Sources 탭에서 원하는 줄 번호에 중단점을 걸어서 사용하지만, 디버깅을 하다 보면 특정 위치가 아닌 특정 상황에서 중단점을 걸고 싶은 때가 있다. 크롬 개발자 도구는 코드의 특정 위치를 선택하기 어려운 순간에도 중단점을 설정할 수 있는 다양한 방법을 제공한다.

특정 이벤트가 발생한 시점을 디버깅하고 싶을 때 Event Listener Breakpoints를 사용한다. 예를 들어 클릭 이벤트에 중단점을 설정하면, DOM에 클릭 이벤트가 발생했을 때 이벤트 핸들러에서 실행이 중단된다. Sources 탭 → [Event Listener Breakpoints]에서 원하는 이벤트를 중단점으로 설정하고, 이후에 중단점으로 설정한 이벤트가 발생하면 실행이 중단된다.

Sources 탭에서 원하는 코드에 중단점을 설정하는 것과 비슷한데, 지정한 조건에서만 실행을 중단한다. 예를 들면 빈번하게 호출되는 함수에서 특정 값의 매개변수가 전달되는 순간이나 루프의 마지막 요소만 확인하고 싶은 순간 등에서 조건부 중단점을 사용한다. 원하는 코드 줄 번호에서 우클릭 → [Add conditional breakpoint]을 선택하면, 원하는 조건을 설정할 수 있다.

필요한 조건을 코드로 입력하면, 해당 조건을 만족할 때만 실행이 중단된다.

특정 DOM이 변경되었을 때 실행을 중단할 수 있다. 즉, 특정 DOM이나 자식 노드에 변화가 있을 때만 실행을 중단한다. Elements 탭 → 원하는 element에서 우클릭 → [Break on]을 선택하면, 세 가지 메뉴가 나오고 이 중에서 원하는 것을 중단점으로 설정한다.