본문 바로가기

자바스크립트

크롬 디버깅

1. 초기 화면세팅

왼쪽칸부터 ㄱ, ㄴ, ㄷ이라 하자

ㄱ. 파일탐색영역 - (html, css, javascript 등) 집합. 가끔 Chrome 익스텐션

ㄴ. 코드에디터영역 - ㄱ에서 가져온 소스코드 보여줘. 여기서 편집

ㄷ. 자바스크립트 디버깅 영역 - 디버깅 관련 기능제공

 

2. 왼쪽에 숫자 1부터 쭈르륵 있는데 클릭하면 breakpoint. ㄷ영역의 breakpoints ㄱㄱ

 

tip) Add conditional breakpoint를 클릭했을 때 나오는 창의 표현식의 값이 참일때만 실행중지.

 

debugger;

3. 위와 같은 명령어는 breakpoint와 같은 맥락.

 

4. ㄷ의 영역.

Watch : 표현식을 평가하고 결과를 보여줘.

+ 버튼 클릭해 표현식 입력 후 enter 누르면 중단 시점의 값을 보여줘

 

Call Stack : 코드를 breakpoint로 안내한 실행 경로를 역순으로..

 

Scope : 현재 정의된 모든 변수를 출력해.

 

5. 실행 추적하기

Resume : f8. 다음 breakpoint로.. 없으면 끝까지간다.

'자바스크립트' 카테고리의 다른 글

User Agent  (0) 2020.12.05
ajax  (0) 2020.11.20
엄격 모드  (0) 2020.11.20
this  (0) 2020.11.18
Date 객체  (0) 2020.11.18