JavaScript 3.1

Chrome으로 디버깅

• 디버깅 : 스크립트 내 에러를 검출해 ㅐ제거하는 일련의 과정.

Ssources 패널

• 개발자 도구의 Sources
• Sources 패널은 크게 세 개의 영역
  • 파일 탐색 영역 - 페이지를 구성하는데 쓰인 모든 리소스를 트리 형태로 보여준다.
  • 코드 에디터 영역 - 리소스 영역에서 선택한 파일의 소스 코드를 보여준다.
  • 자바스크립트 디버깅 영역 - 디버깅에 관련된 기능을 제공한다.

콘솔

• 콘솔에 명령어를 입력하고 엔터를 누르면 입력한 명령어가 실행된다.

중단점

• 자바 스크립트의 실행이 중단되는 코드 내의 지점.
• 코드 좌측의 줄 번호를 클릭한다.
• 중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다.
• 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수 있다.
• Sources 패널 우측의 디버깅 영역을 보면 중단점 목록을 확인할 수 있다.
• 파일 여러개에 다수의 중단점을 설정해 놓은 경우, 디버깅 영역을 이용하면 다음 작업을 할 수 있다.
  • 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동할 수 있다.
  • 체크 박스 선택을 해제해 해당 중단점을 비활성화 할 수 있다.
  • 마우스 오른쪽 버튼을 클릭했을 대 나오는 Remove breakpoint 옵션을 통해 중단점을 삭제할 수도 있다.
  • 이 외 다양한 기능.

조건부 중단점

• 조건부 중단점을 설정할 수 있다.
• 표현식이 참인 경우에만 실행을 중지시킬 수 있다.
• 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있다.

debugger 명령어

• Debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 본다.

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 여기서 실행이 멈춥니다.

  say(phrase);
}

멈추면 보이는 것들

• Watch : 표현식을 평가하고 결과를 보여준다.
• Call stack : 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.
• Scope : 현재 정의된 모든 변수를 출력한다.

실행 추적

• 디버깅 영역 상단의 버튼
  • Resume : 스크립트 실행을 다시 시작함.
  • Step : 다음 명령어를 실행함.
  • Step over : 다음 명령어를 실행하되, 함수 안으로 들어가진 않음.
  • Step into : step과 유사한데 비동기 함수 호출에서 step과 다르게 동작한다. ‘Step’은 setTimeout(함수 호출 스케줄링에 쓰이는 내장 메서드)같은 비동기 동작은 무시합니다. 반면 ‘Step into’는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기합니다.
  • Step out : 실행 중인 함수의 실행이 끝날 대까지 실행을 계속함
  • 책갈피모양에 슬래시 : 모든 중단점을 활성화/비활성화
  • 일시정지 모양 : 예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화/비활성화

console.log

• Console.log 함수를 이용하면 원하는 것을 콘솔에 출력할 수 있다.

// 콘솔창을 열어 결과를 확인해 보세요.
for (let i = 0; i < 5; i++) {
  console.log("숫자", i);
}

• 결과는 콘솔창에만 있기 때문에 일반 사용자는 결과를 볼 수 없다.