Frontend/JavaScript

크롬 브라우저에서 자바스크립트 디버깅 하는 법

leecom116 2023. 8. 27. 19:08

F12 버튼을 눌러 크롬 개발자 도구에 진입합니다.

소스 탭 메뉴를 누른 후에 디버깅하고 싶은 자바스크립트 파일을 찾습니다.

해당 파일을 클릭 후에 함수 왼쪽을 클릭하여 브레이크 포인트를 지정합니다.

지정한 자바스크립트 함수가 실행될 수 있도록 이벤트를 발생시킵니다.

브레이크 포인트가 걸렸으면 디버깅 모드를 이용할 수 있습니다.

디버깅 모드

다음 함수 호출(Step Over) - 한 줄씩 순차 실행

다음 함수 호출(Step Into) - 해당 시점에 함수 안에 들어가 내부 함수를 탐색합니다.

현재 함수에서 벗어나기 - 현재 함수에서 상위 함수로 빠져나옵니다.