디버깅 초보 탈출을 위한 완벽 정복기

개발 공부를 처음 하는 사람이라면 한 번쯤 이런 경험이 있을 거다. 코드를 작성했는데, 에러가 발생하면 어디서부터 잘못됐는지 도대체가 감을 잡을 수 없는 것. 물론 전공자들은 어떻게 배우는지 잘 모르겠지만 적어도 비전공자를 대상으로 한 학원이나 부트 캠프, 특강 류에서는 디버깅이 무엇인지, 또 어떻게 해야 하는지를 체계적으로 가르쳐주지 않는 경우가 많다.

사실 개발자는 코드를 잘 짜는 것만큼이나 디버깅을 잘하는 게 중요하다. 초보자에게 console.log() 는 단순히 메소드 예제를 확인하기 위한 도구처럼 보일 수 있지만, 사실 이건 디버깅의 첫 걸음이다. 다만, 많은 개발자에게 디버깅은 너무나 당연한 일이라 이를 특별히 설명해야 한다는 생각조차 하지 못할 뿐이다..
그래서 오늘은 디버깅이란 무엇인지, 그리고 개발자 도구를 활용해 문제를 어떻게 해결할 수 있는지에 대해 이야기해 보려 한다.

이 글이 디버깅의 세계로 들어가는 작은 가이드가 되길 바라며 ··· 🚌

1. 디버깅이란?

---

: 디버깅은 코드에서 발생한 오류를 찾아내고 수정하는 과정이다. 코드 작성만큼이나 중요한 이 과정은 개발자의 실력을 가늠하는 중요한 기준이 되기도 한다.

프론트단 개발에서는 다양한 종류의 오류가 발생할 수 있다. (간단한 프로젝트만 해봐도 공감할 것) 브라우저 호환성 문제, API 통신 오류, CSS 스타일 적용 문제 등 다양한 요소들이 얽혀있기 때문이다. 디버깅은 이러한 문제들을 해결하고, 코드가 의도한 대로 작동하도록 만드는 핵심 기술이다.

2. 개발자 도구가 너무 복잡해

---

: 개발자 도구가 그렇게 중요하대서 열어보면 알 수 없는 탭들이 나열되어 있고, 사실 각 탭마다 무슨 역할을 하는 지도 잘 모르겠다. 도대체 개발자 도구가 뭐길래? 무슨 기능을 하길래? 라고 한다면 브라우저의 개발자 도구는 웹 페이지를 개발하거나 디버깅할 때 매우 유용한 도구가 된다고 말하고 싶다. Ctrl + Shift + C 혹은 F12 버튼을 누르면 등장하는 이 창은 해당 페이지에 대한 정보를 모두 담고 있다.

🧩 주요 기능

1. Elements (요소)

• 현재 페이지의 HTML 구조와 CSS 스타일을 실시간으로 확인하고 수정할 수 있다.
• HTML 태그를 클릭하면 해당 태그의 스타일을 바로 수정하거나, DOM 구조를 편집할 수 있다.

• elements 혹은 요소 탭에서 HTML의 구조를 한 눈에 볼 수 있다. 개발자가 원하는 대로 구조가 짜였는지 손쉽게 확인할 수 있다는 뜻이다.
• 우측, 혹은 하단에 위치한 스타일 탭은 선택된 요소에 적용된 CSS 속성들을 보여준다. 이 곳에서 기존에 설정된 스타일들을 수정해보며 변경사항을 확인해 볼 수도 있고, 새로운 속성을 추가할 수도 있다. 이렇게 말이다!

• Layout-module__column_left___tL023 에 적용된 width값을 클릭해 임의로 수정할 수 있다.
  헉 그러면 내가 네이버의 홈페이지에서 이것저것 수정하면 다른 사람에게도 수정돼서 일그러진 화면이 보이는 걸까? 😦 라고 생각할 수 있지만 전혀 아니다.
  Elements의 스타일 탭을 통해 CSS를 수정하면 실제 페이지에 즉시 반영되는 것처럼 보이지만, 페이지를 새로 고침하거나 브라우저를 닫고 다시 열면 수정 내용은 사라진다. 그 이유는 브라우저에서 수정된 내용이 사용자의 로컬 환경에서만 일시적으로 적용되기 때문이다.
  쉽게 말하면 내가 보고 있는 네이버 화면은 모든 사람이 하나의 페이지를 보고 있는 것이 아니라 사용자의 환경마다 복사되어 전달된 페이지들이기 때문이다! 사본이라는 뜻!

• 이 기능은 필자가 CSS 작업을 할 때 아주 잘 사용하는 기능이다. 직접 vscode에 원하는 px만큼 수정을 해가면서 '이 정도면 될까? 간격 이만큼 주면 되려나?' 라고 하나하나 수정하며 저장하고 확인하고 저장하고 확인하는 과정을 거치지 않고 그냥 개발자 도구 내 스타일 탭에서 여러 속성들을 먹이고 내가 원하는 모양을 만든 후에 복사해서 vscode에 붙여넣는다. 클라이언트 요청이 아니어서 디자인이 정해지지 않은 프로젝트를 할 땐 이 방법이 꽤나 유용하다 👍

• 좌측 상단의 빨간색 영역의 버튼을 클릭한 뒤 화면에 띄워진 요소를 클릭하면 해당 요소가 선택되며 바로 속성값을 확인할 수 있다. HTML을 보며 일일이 찾을 필요가 없다는 것!
• 그리고 하단 초록색 영역은 선택된 요소의 종속 관계를 보여준다. 해당 요소의 부모 관계를 쉽게 확인할 수 있는 부분!

• 또 스타일 탭 최하단에는 해당 영역의 크기와 높이, margin, padding, border가 적용된 값을 정확히 확인할 수 있다.

• 스타일 탭 옆 계산됨 혹은 computed 탭으로 가면 선택된 요소의 정확한 스타일 값들을 확인할 수 있다. 분명히 폰트를 적용했는데 적용이 안 된 것 같기도 하고.. 싶을 땐 눈대중으로 확인하는 것이 아니라 이 computed 탭으로 가서 적용된 font-family를 확인해야 한다. 뭐든지 눈대중은 금물 .. ❌

요소 탭에서는 이 정도의 기능만 사용할 줄 알아도 디버깅 90% 이상은 할 수 있다.
DOM 요소에 대해 확인해야 한다거나, 내가 비동기로 받아온 데이터를 화면에 뿌려줬을 때 해당 요소가 잘 들어갔는지 확인하려면 화면단으로 '음 잘 보이는 군' 할 게 아니라 elements 탭을 열어서 원하는 부모 아래로 잘 들어갔는지, 구조가 잘 잡혀있는지 꼼꼼히 확인해야 할 것이다.

2. Console (콘솔)

• JavaScript 코드의 출력이나 에러 메시지를 확인할 수 있다.
• console.log()를 통해 출력한 값들을 확인하거나, 직접 코드를 입력해 실행할 수도 있다.
• 예를 들어 "Uncaught TypeError"와 같은 에러 메시지를 확인한 뒤, 관련 변수를 console.log로 출력해 값을 확인하는 것이다.
• 만약 내가 arr.length 를 콘솔에 입력했는데 TypeError 가 떴다? 그럼 그냥 멍하니 그 빨간 글씨를 바라보고 있을 것이 아니라 arr가 length를 알아낼 수 없는 자료형이라는 말이기 때문에 내가 가져온 arr이 정확히 배열이 맞는지 확인해야 한다.

console.log('arr :', arr);

• 이런 식으로 말이다. 그럼 이제 콘솔을 찍어보라고 하면 대부분이 위 내용처럼 작성하지 않고 console.log(arr) 라고 띡 해당 값만 출력한다. 위처럼 출력해야 하는 이유는 바로 빠른 문제 확인과 가독성을 위해서다. console.log('arr :', arr) 처럼 출력하면, 콘솔에 arr : 라는 문자열과 함께 arr 변수의 값이 나온다. 이 경우 출력되는 값이 무엇인지 한눈에 들어온다.

• 예를 들어 여러 개의 배열이나 객체를 출력할 때 단순히 해당 변수만 입력해 출력하게 되면 어떤 값이 어떤 변수에 해당하는지 헷갈릴 수 있다. 하지만 앞에 문자열을 붙여 어떤 변수인지 네이밍을 먼저 해준다면 가독성이 보장되어 빠른 해결이 가능할 것이다.

하지만 필자는.. : 보다는 console.log('arr ===>', arr) 처럼 화살표로 표시하는 것을 좋아한다 😋

그래서 단축키만 입력해도 위와 같은 형식의 콘솔 명령어가 나오게 해두었다!
똑같이 만들고 싶다면 ! 사용자 바로가기 키 설정 json 파일에 아래 내용을 넣어주면 된다.

[
  {
    "key": "ctrl+shift+c",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log('$1 =====>', $2);$0"
    }
  }
]

위 단축키를 바인딩 할 키는 자유! "key" 에서 변경하면 된다.

3. Network (네트워크)

: API 요청과 응답 상태를 확인할 수 있는 탭이다.

• API 호출이 실패했을 때, Network 탭에서 요청 URL, 응답 데이터, 헤더 정보 등을 확인해 404 에러가 발생한 원인을 찾는다. 요청에 필요한 헤더가 누락되었는지 확인하거나 잘못된 URL을 수정하기도 한다.
• 요청 시간, 크기, 응답 상태 등을 체크하여 성능을 분석할 수도 있다.

4. Sources (소스)

: 해당 페이지를 구성하는 파일들을 확인할 수 있다. 이 탭이 있기 때문에 면접관들이 나의 포트폴리오를 화면단에서 결과물만 보는 것이 아니라 코드 상태까지 확인할 수 있는 것이다 😁
파일 확인 뿐만 아니라, 중단점인 Breakpoint를 설정해 코드 실행 과정을 단계별로 확인할 수 있다.

• 특정 함수가 호출될 때 변수 값이 어떻게 변하는지를 추적하려면 해당 함수의 첫 줄에 중단점을 설정하고 실행 흐름을 한 단계씩 확인하는 거다. 이를 통해 의도치 않은 동작이 있는지 발견할 수 있다.

• 만약 2번째 try문인 6번 줄에서 원치 않는 에러가 발생한다면 사진과 같이 해당 숫자를 클릭해 breakpoint를 설정하고 한 칸씩 실행해볼 수 있다.

5. Application (애플리케이션)

: 웹 페이지에서 사용하는 쿠키, 로컬 스토리지, 세션 스토리지, 캐시 등을 관리할 수 있다.

• 애플리케이션의 상태를 실시간으로 확인하고 수정할 수 있다.

6. Performance (성능)

: 페이지의 성능을 분석하고, 렌더링 시간이나 자바스크립트 실행 시간을 시각적으로 보여준다.

• 성능 최적화를 위해 어떤 부분에서 시간이 많이 소요되는지 파악할 수 있다!

3. 디버깅을 잘 하려면

---

: 이제 개발자 도구가 무슨 기능을 하는 지는 알았고, 그렇다면 어떻게 해야 디버깅을 잘 한다고 볼 수 있을까? 아래와 같은 과정을 거치면 해결 방식은 찾지 못하더라도 누군가 "디버깅 얼마나 했냐"고 묻기 전에 정확히 어느 지점에서 어떠한 경위로 에러가 발생했는 지는 알 수 있을 거다.

• 문제를 작은 단위로 나누기 : 에러가 발생했을 때는 그 에러를 바로 해결하기 전에, 문제를 가능한 작은 단위로 나눠야 한다. 전체 코드에서 발생하는 문제를 한 번에 해결하려 하지 말고, 작은 부분부터 하나씩 점검해보자. 예를 들어, 함수 단위로 테스트하거나, 변수 값이 어떻게 변하는지 확인해보는 방식이다.

• 효율적인 로그 남기기 : 함수가 실행될 때마다 로그를 찍어 변수의 상태나 흐름을 추적하는 것이 중요하다. 특정 값이 예상과 다르게 나오는 부분을 찾을 때 유용하다.

• 단계별로 테스트하기 : 코드를 작성할 때는 각 단계를 테스트하면서 코드의 동작을 점검하고, 차근차근 빌드를 진행해야 한다. 문제가 발생하는 지점을 좁히기 위해서다.

• 에러 메시지 분석하기 : 에러 메시지는 디버깅의 중요한 힌트를 제공한다. 에러가 발생한 위치와 원인에 대한 정보를 제공하기 때문에, 에러 메시지를 무시하지 말고 꼼꼼히 읽고 분석해야 한다.

디버깅은 단순히 에러를 고쳐서 정상 작동시키는 과정이 아니라, 스스로 문제의 원인을 파악하고 해결하는 능력을 키우는 아주아주 중요한 과정이다. 개발 시장에서 '문제 해결력'이 중요하다는 사실은 누구나 알고 있을테니, 초보자일수록 디버깅을 두려워하지 말고 다양한 도구와 기법을 활용해 하나씩 해결해 나가야 한다.
디버깅은 실수를 통해 배우는 과정이기도 하니 실수를 두려워하지 말고 본인의 로직을 쌓다보면 어느새 디버깅의 달인이 되어있을 것이다! 👼 모두모두 화이팅!