요약
최근들어 chrome 개발자 도구가 정말 많은 기능을 포함하고 있다는 생각을 합니다.
그중 chrome 개발자 디버깅 탭을 사용하여 디버깅 하는 저만의 방법을 소개하려 합니다.

목차

• 목차
• 디버깅이 뭔가요 🐛
• 나의 chrome 디버깅 툴 사용법
  • 1. 개발자 도구에서 소스코드 찾기
  • 2. breakPoint 만들기
  • 3. breakPoint 관찰하기
  • 4. 디버깅 툴 사용 Tip
    • 4-1. breakPoint 지점들 관리
    • 4-2. scope 탭
    • 4-3. watch 탭
    • 4-3. CallStack 탭

디버깅이 뭔가요 🐛

조금 지루할지도 모르지만 디버깅 툴 사용법을 소개하기에 앞서 ‘디버깅’이 뭔지, 디버깅이 왜 필요한지에 대해 간단하게 생각하고 넘어가보려 한다.
재미없으면 바로 넘어가도 되고~

디버깅

디버깅은 말 그대로 ‘버그를 잡는 과정’을 의미한다.
프로그램이 정상적으로 동작하지 않을 때, 원인을 찾기 위해서 코드를 잠시 멈추고 상태를 직접 확인하는 과정을 의미힌다.

디버깅이 왜 필요한가요

사실 개발을 하다보면 디버깅을 쓸 경우가 그렇게 많지는 않았던 것 같다.
TypeScript를 사용하면 웬만한 오류를 컴파일 타임때 잡아주기 때문에 런타임에 발생할 문제를 많이 방지해주기 때문이기도 하다.
나의 경우 특별히 어느 코드 과정이 너무 궁금해서 뜯어보려고 하지 않는 이상 디버깅을 사용해본 횟수가 손에 꼽는 것 같다.

하지만 그럼에도 디버깅은 무척이나 중요하고 필요한 기술인데,
사람이 짠 코드이기 때문에 실수는 언제나 발생할 수 있고, 실행환경이 다르거나 코드의 실행 순서가 엉켰을 때 코드를 눈으로 따라가는 것 만으로는 한계가 있다고 생각되기 때문이다.

이때 디버거를 사용한다면 코드의 흐름을 눈으로 확인할 수 있고, 문제가 발생한 포인트를 잡고 분석하는데 도움이 된다.

나의 chrome 디버깅 툴 사용법

물론 부족한 점이 많겠지만.. 디버깅 툴을 사용하면서 ‘이런 기능을 쓰면 유용했던 것 같다’ 라고 생각되었던 부분들을 남겨본다.

부족하거나 추가가 필요한 부분이 있다면 코멘트 부탁힙니다 ㅎㅎ

1. 개발자 도구에서 소스코드 찾기

문제로 추론되는 파일을 먼저 찾은 다음 개발자 도구의 source 탭에서 해당 파일을 검색해서 들어간다.

2. breakPoint 만들기

관찰하고 싶은 부분의 코드에 breakPoint(왼쪽의 파란색 태그)를 건다.

3. breakPoint 관찰하기

그리고 새로고침을 하면 breakPoint가 걸린 부분의 코드가 실행될 때 마다 아래와 같이 실제로 어떤 값이 들어오고 있는지, 어떤 순서로 함수가 실행되고 있는지 등을 관찰할 수 있다.

4. 디버깅 툴 사용 Tip

내가 주로 확인하는 부분을 소개하며 Tip을 마무리 하자면

4-1. breakPoint 지점들 관리

첫번째로는 breakPoint 지점이다. 내가 breakPont를 지정한 부분을 확인하고 각 point 지점마다 적용/미적용을 선택할 수 있다.

4-2. scope 탭

scope 탭에서는 함수 및 변수의 값 관찰할 수 있다. (여기서 주로 어떤 값이 오가는지 모니터링 가능)

4-3. watch 탭

scope에서는 너무 많은 변수/함수들이 존재해서 내가 원하는 값을 보기가 어렵다. 다른 스코프로 넘어가게 되면서 관찰하고자 하는 값이 사라지기도 해서 그런 경우 watch에서 관찰하고자 하는 변수/함수를 등록해서 지속적인 모니터링이 가능하다.

4-3. CallStack 탭

CallStack도 확인 가능하다! 이동은 왼쪽 상단 화살표로 움직일 수 있다

디버깅 툴을 사용하면서 더 기록하고 싶은 내용이 있다면 고때 다시 수정해보겠다~