
[기타] 개발자 도구의 Call Stack(호출 스택)을 활용하여 중단점에 걸린 함수(이벤트)를 호출한 함수(이벤트)를 알아보자. ( 함수 흐름 확인 )
Web
2022. 3. 31. 13:01
보통 프론트단 개발을 하면 개발자도구에 중단점을 걸어서 디버깅을 자주 하는데.. import하는 js파일이 많아지도, 하나의 함수가 여기저기 엮이면, 이 함수를 누가 어디서 호출하는지 찾기 힘들어진다. 제일 좋은 방법은 처음부터 돌아가서 찾는거겠지만.. 힘들다.. 그럴때 개발자도구의 Call Stack(호출 스택) 탭을 활용하면 현재 함수를 누가 어디서 호출하였는지, 현재 함수를 호출할 때까지의 흐름을 한눈에 알 수 있다.. 그럼 바로 알아보자. 샘플코드 샘플코드는 간단하다. 흐름은 이렇다. 1) 콘솔로그를 찍는 showConsole 함수 생성 2) showConsole함수를 호출하는 callConsoleFunc이라는 함수 생성 3) callConsoleFunc 함수 호출 4) showConsole 함수..