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로.. 없으면 끝까지간다.