"콜백에 의한 비동기 처리는 우리에게 성능이라는 한가지 장점과 사소해보이는 몇가지 단점을 같이 선물하였습니다. UI가 동작 중인 메인스레드에서 실행되는 자바스크립트에서 콜백에 의한 비동기 처리는 발생할 수 있는 성능 상의 문제를 해결하기 위한 최선의 방법이었습니다만 성능의 이점 대신 코드 작성은 좀 더 어려워졌고 선형적으로 디버깅할 수 있는 방법은 크게 복잡해졌습니다.
코드에서 무엇을 어떻게 처리할 것인지는 여러분의 몫입니다만 불행하게도 디버깅 역시 그러하며 특히나 비동기 처리라면 개발 환경을 넘어선 코드에 대한 깊은 이해를 요구하는 경우가 많으며 최근과 같이 외부에서 작성된 자바스크립트 라이브러리들을 사용하는 환경에는 더욱 더 그렇습니다.
크롬에서 추가된 비동기 자바스크립트에 대한 호출 스택과 왓치(Watch) 기능은 이러한 영역에서의 괴로움을 크게 줄여줄 것입니다."
TL;DR;
콜백 함수를 통해 비동기로 동작할 수 있는 능력은 자바스크립트를 특별하게 만드는 강력한 기능이지만 자바스크립트는 순차적으로만 실행되지 않으므로 디버깅 과정에서는 우리를 괴롭게 만듭니다.
다행스럽게도 이제 크롬 카나리 개발자 도구(DevTools)에서 비동기 자바스크립트 콜백이 포함된 호출 스택의 모두를 확인할 수 있습니다. 개발자 도구에서 비동기 콜 스택 기능을 활성화하면 다양한 지점에서 각 지점에서의 상태를 자세히 볼 수 있으며 스택을 추적해 가면서 런타임 실행에서 특정 지점의 어떤 변수 값을 분석할 수도 있습니다.
 |
| [그림] 크롬 개발자도구의 비동기 호출 스택 추적 |
현재 개발자 도구에서 호출 스택을 확인할 수 있는 비동기 콜백의 종류는 다음과 같습니다.
- 타이머: setTimeout()이나 setInterval()의 초기화 지점으로 이동합니다.
- XHR: xhr.send() 호출 지점으로 이동합니다.
- 애니메이션 프레임: requestAnimationFrame의 호출 지점으로 이동합니다.
이벤트 리스너: 이벤트와 addEventListner()의 최초 바인딩 지점으로 이동합니다.- addEventListner()는 성능 문제로 인해 개발자도구의 추적대상에서 제거되었습니다.
- MutationObserver: Mutation Observer 이벤트의 지점으로 이동합니다.
아래의 자바스크립트 API는 곧 이 기능을 지원할 예정입니다.
- Promise: Promise가 해결된(resolved) 위치로 이동합니다.
- Object.observe: 옵저버(Observer) 콜백을 처음에 바인딩한 지점으로 이동합니다.
자세한 내용은 튜토리얼을 참조하시기 바랍니다.
번역 링크
- 크롬 개발자도구로 비동기 자바스크립트 디버깅하기
댓글 없음:
댓글 쓰기