[개발자 도구] 크롬 개발자 도구 활용법 (2)

▤ 목차

Sources 메뉴에서는 중단점(Breakpoint)을 활용하여 디버깅을 할 수 있다.

즉 ​ 중단점(Breakpoint)을 활용하면 실행 단계마다 스크립트의 동작을 잠시 멈추고 발생하는 이슈를 확인할 수 있다.

이에 대해 자세히 알아보려고 한다.

1. 중단점(Breakpoint) 사용법

1.  Sources 메뉴 구조

sources 메뉴 구조

콘솔에 찍히는 로그

Sources 패널은 크게 세 개의 영역으로 구성된다.

• 파일 탐색 영역 : 페이지를 구성하는 모든 리소스(HTML, JavaScript, CSS 등)를 트리 형태로 보여준다.
• 코드 에디터 영역 : 선택한 파일의 소스 코드를 보여주며 편집도 가능하다.
• 자바스크립트 디버깅 영역 : 디버깅에 관련된 기능을 제공한다.

2.  중단점 설정

코드 에디터 영역에서 디버깅하길 원하는 라인을 클릭하면 파란색으로 선택되며 다시 새로고침하면 중단점이 설정된 라인에서 작동을 멈추게 된다.

이후 버튼을 활용하여 테스트를 진행하면 된다.

디버깅 버튼 종류

• Resume : 스크립트 실행을 다시 시작 (단축키 F8)
• 즉 현재 중단점을 그만하고 코드 계속 실행 (다음 중단점을 만나면 거기서 다시 멈춤)

• Step over next function call: 다음 명령어를 실행하지만 함수 안으로 들어가진 않음 (단축키 F10)
• 즉 다음 함수 코드 내부는 들어가지 않음
• 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용

• Step into next function call: Step과 유사하게 함수 안으로 들어감 (단축키 F11)
• Step은 비동기 동작(setTimeout 등)은 무시하지만, Step into next function call는 비동기 동작도 진입하고 필요하다면 동작이 완료될 때까지 대기한다.

• Step out of current function :  실행 중인 함수가 끝날 때까지 실행을 계속함 (단축키 Shift+F11)
• 현재 함수에서 빠져나와 다음 함수로 이동하기
• 가능한 한 빨리 함수 실행을 끝내고 싶은 경우 유용 

• Step : 다음 명령어를 실행함 (단축키 F9)
• 즉 다음 줄로 이동

• 모든 중단점을 활성화/비활성화

3.  디버깅 영역 활용

자바스크립트 디버깅 영역

Watch 

• 표현식을 평가하고 결과를 보여준다.
• Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다.
• 위 그림은 Add Expression로 i 값을 입력한 화면이다.

Scope

• 현재 정의된 모든 변수를 출력
• Local은 함수의 지역변수를 보여준다
• Global은 함수 바깥에 정의된 전역 변수를 보여준다.

Call Stack

• 해당 중단점부터 실행 경로를 역순으로 표시

4. 조건부 중단점 설정

만약 특정 조건에서만 코드를 중단해보고 싶다면 조건부 중단점을 설정할 수 있다.

예를 들어 i=7일 때만 중단점이 설정되어 멈추도록 설정하고 싶다면 아래의 순서를 따르면 된다.

1. 원하는 라인에 마우스 우클릭하여 Add conditional breakpoint 클릭한다.

Add conditional breakpoint

조건 입력

2. 입력 폼에 중단할 조건을 입력한다.

i === 7일때 화면

3. 새로고침하면 i가 7일 때만 중단점이 설정된다.

 

https://inpa.tistory.com/entry/%F0%9F%92%BB-%ED%81%AC%EB%A1%AC%EC%9C%BC%EB%A1%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%94%EB%B2%84%EA%B9%85-%F0%9F%94%8D-%ED%95%98%EA%B8%B0

🔍 크롬으로 자바스크립트 디버깅 하기

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.