6. 디버깅1) Pause on Exception 으로 간단한 에러 확인하기
jQuery 를 사용하여, [Increment] 버튼을 클릭하면 Count 가 올라가는 예제입니다. 현재 버튼 클릭 시 에러가 발생하고 있습니다. 에러가 발생할 경우 바로 해당 소스 위치로 이동하도록 하기 위해 Sources 패널의 우측 상단 디버그 도구에서 ll (Pause on Exception) 을 클릭합니다.
다시 버튼을 클릭하면 소스 상의 발생위치로 자동 이동하여 Break 된 모습과 에러 발생내용을 확인할 수 있습니다. count.getText 가 문제이군요.
esc 를 눌러 하단에 Console 을 띄운 후 count.get 까지 티이핑하면 count 내에 get 은 있지만
getText 라는 변수는 없는 것을 확인 할 수 있습니다.count.text 를 타이핑해보니 변수가 존재합니다. 엔터를 눌러 함수임을 확인한 후 호출해보니 값이 나옵니다.
코드를 수정한 후 버튼을 클릭하여 정상 동작함을 확인합니다.
2) 비동기 Call Stack 확인
위와 같이 비동기 호출 결과를 다루는 곳에서 Breakpoint 를 걸면 비동기 호출 과정이 정확히 표시되지 않습니다.
디버그 도구의 V Async 를 체크한 후 실행해보면 두 개의 비동기 호출(XHR, setTimeout)의 시작점까지 모두 표시되어 보다 쉽고 정확하게 디버깅을 할 수 있습니다.
실제 디버깅에 도움이 안되는 파일의 경우 Blackbox 처리하여 Call Stack 에 표시되지 않도록 할 수 있습니다.
3) 화면소스 분석없이 api url 확인하기
화면 소스 분석 없이 개발자 도구만을 이용하여 특정 데이터를 가져오는 api를 찾는 방법입니다. 주변상품 이미지의 링크를 가져오는 api 를 찾아보겠습니다.
하단의 호출 목록 중에 해당 이미지의 url 을 가져오는 호출이 존재할 것입니다. 우선 이미지의 주소를 복사합니다.
첫번째 호출부터 찾아갑니다. [Preview] 탭을 클릭하고 Preview 창에 포커싱된 상태에서 cmd+F(mac) / ctrl+F(윈도우)로 찾기를 열어 이미지의 링크를 붙여넣습니다.
네번째 호출에서 해당 링크를 가져오는 것을 알아냈습니다.
[Headers] 탭으로 이동하여 해당 api 호출 경로를 확인합니다.
이제 서버의 컨트롤러를 찾아 어디서 어떻게 가져오는지 확인하여 사용하면 되겠군요.
개발자 도구가 없었다면 1.해당 페이지가 어디있는지 찾고 2.소스에서 해당 img 엘리먼트의 id 를 확인하여 3.엘리먼트를 조작하는 다양항 javascript 파일내의 수많은 위치 중에서 이미지 링크를 넣어주는 부분을 찾은 후 4.엘리먼트에 넣어주는 데이터를 어디에서 가져오는지 찾아야 api 호출 경로를 알 수 있습니다. 코드가 복잡한 경우 상당히 번거롭지요.(전혀 모르는 프레임웍을 사용하고 있는 페이지라면 최악의 경우 분석 자체를 못할 수도 있습니다.)
이 예제의 방법을 사용하면 UI 가 어떤 프레임웍으로 만들어져있든 상관이 없습니다.(그뤠잇!)
그외 팁1) DOM 변경 Breakpoint
엘리먼트에 변경 감지 이벤트를 추가하여 해당 엘리먼트 혹은 하위 엘리먼트의 변경 지점을 찾을 수 있습니다.
<p> 엘리먼트의 우클릭 메뉴에서 하위 엘리먼트 감지(subtree modifications)를 선택하였습니다.
버튼을 클릭하면 하위 엘리먼트 내의 Count 값에 대한 변경을 감지하고 Break 되어 디버깅을 진행할 수 있습니다.
2) XHR 호출 Breakpoint
특정 url 로의 호출을 캐치할 때 XHR Breakpoints 에 url 을 추가합니다.
3) 엘리먼트에 바인드된 이벤트 찾기
1. Elements 패널에서 엘리먼트 검사기를 클릭
2. 버튼 엘리먼트 클릭
3. 우측 Event Listeners 탭 클릭
- Ancestors 를 체크하면 해당 엘리먼트의 상위 엘리먼트에 바인드된 이벤트 모두가 표시됩니다.
- Framework listeners 체크하지 않으면 라이브러리 코드가 실행되는 부븐의 파일이 표시됩니다.4. 해당 엘리먼트에 바인드된 이벤트를 확인
5. 이벤트에 걸린 파일명을 클릭하면 해당 소스로 이동하여 코드를 확인할 수 있습니다.
* 프레임웍을 통한 호출이거나 button 자체에 걸린 이벤트가 아닌 경우(상위 엘리먼트에 이벤트를 걸어 사용 등)에는 유용하지 않아요…!
4) 실행 스코프 저장하여 확인하기
Javscript 의 특성상 실행 스코프에 따라 가리키는 this 값이 다르므로 각 Break 시점의 this 값을
global 변수에 저장해두면 모든 실행이 완료된 후에도 console 에서 확인할 수 있습니다.5) Conditional BreakPoint
특정 조건과 일치하는 경우에 디버깅 하고 싶을 경우 라인을 우클릭하여 Add Conditional Breakpoint.. 를 클릭하여 조건을 입력합니다.
코드를 실행해보면 조건에 일치하는 경우 Break 가 걸리는 것을 확인할 수 있습니다.
지금까지 크롬 개발자 도구의 활용에 대해 살펴보았습니다. 이번 기회를 통해 저도 사용하지 않던 꿀팁을 많이 알게되었습니다. 이 글을 읽으시는 분들께도 도움이 되었으면 하네요. ㅎㅎ
실무와 관련된 예제를 좀 더 많이 싣고 싶었는데, 업무 중에 디버깅을 하며 꿀팁이라 생각했던 것들이 기억이 나질 않아서 조금 아쉽습니다. 이후 개발을 진행하며 괜찮다 싶은 예제거리가 생기면 모아서 두번째 글을 써볼까 합니다
낭만가을
