이 글은 번역 및 정리 글입니다. 출처: javascript.info

크롬에서 디버깅

더 복잡한 코드를 작성하기 전에 디버깅에 대해 이야기 해보자.

디버깅은 스크립트 내에서 오류를 찾아 수정하는 과정이다. 모든 최신브라우저 및 대부분의. 환경은 디버깅 도구를 지원한다.

소스 패널

먼저 윈도우라면 F12 맥이라면 Cmd+Opt+I로 개발자 도구를 열자.

Sources패널을 열면 3구역이 나온다. (3구역이 나오지 않는다면 가장 왼쪽에 토글 아이콘을 클릭하자.)

가장 왼쪽의 영역은 리소스 영역이다. HTML, 자바 스크립트, CSS 및 페이지에 첨부 된 이미지를 포함한 여러 파일들을 나열한다. 크롬 확장프로그램도 여기 표시될 수 있다.

가운데 영역은 소스 영역이다. 소스 코드를 보여준다.

세번째 영역은 정보 및 제어 영역이다. 이곳이 디버깅을 할때 자주 살펴볼 곳이다.

콘솔

예제페이지를 열고 개발자 도구를 열어보자.

ESC를 누르면 콘솔창이 토글되는데 Console창에 코드를 작성할 수 있다. 실행 된 결과는 아래에 표시된다.

1 + 2를 실행하면 3이 나타난다.

중단점

소스를 보자. hello.js 에서 4번째 행과 8번째 행을 코드가 아닌 왼쪽에 행 인디케이터를 클릭해보자.

그럼 이처럼 될 것이다. 오른쪽에 브레이크 포인트가 늘어난것을 볼 수 있다.

중단점은 코드가 일시정지 된 상태에서 현재 변수를 검사하고, 콘솔에서 명령을 실행하는 등의 다양한 작업을 할 수 있다. 이를 쉽게이야기해 디버깅이라고 한다.

중단점 리스트에서는 다양한 일을 할 수 있다.

클릭하여 소스코드 위치로 빠르게 이동
선택 해제하여 중단점 일시적 비활성화
오른쪽 클릭 후 제거하기하여 제거
… 등등

디버거 명령어

debugger를 코드에 입력함으로써 코드를 일시 중지 할 수도 있ㅆ다.

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

  debugger;  // <-- the debugger stops here

  say(phrase);
}

일시정지 및 둘러보기

예제 페이지는 페이지로드 때 hello()함수가 호출되므로 가장 쉽게 우리의 중단점을 다시 만나려면 페이지를 다시 로드하는것이다. 새로고침을 해보자.

이제 4번째 줄에서 실행이 일시 정지가 된다.

Watch

모든 표현식의 현재 값을 표시한다. +를 눌러 표현식을 작성할 수 있다.

Call Stack

중첩된 함수 호출 체인을 보여준다.

현재로서 디버거는 hello()의 안에 있고 hello()는 index.html에서 불려졌다. 함수가 부른것이 아니므로 익명이라고 나타난다.

Scope

Local - 로컬 변수를 보여준다. 소스 바로 위에 해당 값이 강조표시되어 있다.

Global - 전역 변수가 있다.

This - 추후에 공부해보자.

실행 추적

resume

진행을 계속한다. F8을 눌러도 같다.

다음 중단점을 만날때까지 실행되며, 추가 중단점이 없다면 실행이 계속된다.

현재 resume버튼을 클릭하면 아래와 같은 상태가 된다.

step

F9 다음 문장을 실행한다. 현재 클릭하면 alert가 실행된다.

여러번 클릭하면 모든 스크립트 문장이 하나씩 단게별로 진행된다.

step over

F10 다음 명령을 실행하되 함수 내부는 건너 뛴다. 쉽게 이야기하면 함수 내부는 관심없이 건너 뛰는것이다.

step into

F11 스텝과 비슷하지만 비동기 함수 호출을 만날경우 다르게 작동한다. 비동기 작업을 무시한다. 아직 우리는 비동기에 대해 배우지 않았다.

step out

Shift + F11 실행을 계속하고 현재 기능의 마지막 줄에서 중지한다.

toggle active breakpoints

모든 중단점을 활성화/ 비활성화 한다.

toggle pause on exeption

에러가 있을시 자동 일시 중지기능을 활성화 비활성화한다.

로깅

코드로 콘솔에 무언가를 출력하고 싶다면 console.log로 할 수 있다.

for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

콘솔창에서 확인할 수 있다.

2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.

[모던자바스크립트] 18. 크롬 디버깅

크롬에서 디버깅

소스 패널

콘솔

중단점

디버거 명령어