Vue.js 개발 시 디버깅 방법 정리 (Vue 2 & Vue 3 기준)

Vue.js로 프론트엔드 개발을 하다 보면, 어느 순간부터 다음과 같은 문제를 마주하게 됩니다.

• 컴포넌트는 렌더링되었는데, props가 안 들어온다?
• v-model로 바인딩한 값이 안 바뀐다?
• 이벤트 핸들러가 호출되지 않는다?
• Vuex에서 상태가 업데이트되었는데 화면은 그대로다?

이럴 때 필요한 건 바로 "디버깅 스킬"입니다.

이 글에서는 Vue.js에서 사용할 수 있는 디버깅 도구들, 자주 발생하는 문제에 대한 해결 방법, 그리고 Vue 2와 Vue 3 모두를 아우르는 실전 팁을 정리해봤습니다.

---

1. Vue Devtools를 활용한 컴포넌트 디버깅

✅ 설치 방법

• 크롬 웹스토어에서 Vue.js devtools 설치
  👉 Chrome Vue Devtools
• Vue 3 프로젝트의 경우, 최신 버전 Devtools 필요
  👉 Vue Devtools GitHub

✅ 주요 기능 정리

기능	설명
Component Tree	컴포넌트 구조 확인, 현재 라우팅 상태도 확인 가능
Props 확인	부모 → 자식 전달된 props 값 실시간 확인
Vuex 상태 확인	state, getters, mutations 모두 추적 가능
Emit 이벤트 추적	$emit으로 발생시킨 이벤트 확인 가능
Router 디버깅	현재 경로, 라우트 params 확인 가능

💡 자주 겪는 실전 예시

예시 : props가 안 들어옴

vue

<Child :title="post.title" />

→ Devtools에서 Child 컴포넌트 클릭 → Props 섹션에서 실제로 title 값이 전달되었는지 확인
→ 타입 불일치 (Number vs String)도 확인 가능

---

2. console.log로 추적하기 (기본이지만 필수)

console.log()는 여전히 강력한 디버깅 도구입니다.

예시: 이벤트 핸들러 확인

vue

<template>
  <button @click="handleClick">Click</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('버튼 클릭됨');
      console.log('this는:', this);
    }
  }
}
</script>

this가 undefined인 경우?

→ 화살표 함수(=>)로 선언했을 확률이 높습니다. 아래처럼 수정해야 정상 작동합니다.

// ❌ 잘못된 예시
methods: {
  handleClick: () => {
    console.log(this); // this가 undefined
  }
}

// ✅ 올바른 예시
methods: {
  handleClick() {
    console.log(this); // 올바른 Vue 컴포넌트 context
  }
}

---

⚙️ 3. 상태 관리(Vuex) 디버깅

Vuex는 상태를 중앙에서 관리하지만, 디버깅을 안 하면 상태 흐름을 놓치기 쉽습니다.

Vue Devtools에서 확인할 수 있는 항목

• state: 현재 상태 확인
• getters: 계산된 상태
• mutations: 상태 변경 로그 추적 가능
• actions: 비동기 흐름 추적 가능

직접 로그 찍는 방법

const store = new Vuex.Store({
  plugins: [
    store => {
      store.subscribe((mutation, state) => {
        console.log('[MUTATION]', mutation.type, mutation.payload);
      });
    }
  ]
});

💡 특히 비동기 액션 후 commit이 잘 작동하는지 확인할 때 유용합니다.

---

4. API 통신 문제 디버깅 (Axios + Network 탭)

Vue에서 Axios를 사용해 서버와 통신할 때 오류가 자주 발생합니다. 대표적으로는:

• CORS 오류
• HTTP 4xx / 5xx 응답
• payload 누락
• 인증 토큰 없음

디버깅 순서

1. Chrome 개발자 도구 → Network 탭 열기
2. 해당 API 요청 선택
3. Request Headers, Response, Payload, Status Code 확인
4. 콘솔에서도 에러 로그 확인

axios.get('/api/posts')
  .then(res => console.log(res))
  .catch(err => console.error('API 요청 에러:', err));

Axios 인터셉터를 활용한 로깅

axios.interceptors.request.use(config => {
  console.log('요청 전송:', config);
  return config;
});

axios.interceptors.response.use(response => {
  console.log('응답 수신:', response);
  return response;
}, error => {
  console.error('응답 에러:', error.response);
  return Promise.reject(error);
});

---

5. Chrome DevTools로 브레이크포인트 디버깅

1. Chrome → Sources 탭 → .vue 파일 찾기
2. 원하는 줄에 중단점(Breakpoint) 클릭
3. 변수, 실행 흐름 확인

💡 디버깅이 안 될 때

• Vue CLI 프로젝트의 경우 source map 설정 확인 필요

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

---

6. Vue 3 Composition API에서 디버깅

Composition API에서는 setup() 내부에 로직이 몰려있기 때문에 디버깅이 다소 까다롭습니다.

ref, reactive 추적

setup() {
  const count = ref(0);
  console.log('초기 count:', count.value);

  watch(count, (newVal, oldVal) => {
    console.log(`count 변경: ${oldVal} → ${newVal}`);
  });

  return { count };
}

💡 watchEffect()는 반응형 값을 자동으로 추적합니다.

---

7. 자주 발생하는 실전 문제 & 디버깅 예시

문제 1: v-model 바인딩 안 됨

• v-model="value" → value가 props로만 전달되고 emit이 없음
• 해결: update:modelValue 이벤트 emit 필요

// 자식 컴포넌트
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue']
}
</script>

문제 2: 컴포넌트가 렌더링되지 않음

• 조건부 렌더링 (v-if) 확인
• props 값이 undefined일 수도 있음
• console.log 또는 Devtools로 확인

---

✅ 마무리 정리

도구/방법	설명	주의할 점
Vue Devtools	Vue 상태 실시간 확인	Production 모드에서는 비활성화됨
console.log	실행 흐름 빠르게 확인	지나치게 많으면 디버깅이 오히려 어려움
Vuex 로그	상태 변경 추적	mutation/action 흐름 파악
Network 탭	API 통신 흐름 확인	CORS, payload 확인
Chrome 중단점	라인 단위 디버깅	Source map 설정 필요
watch / watchEffect	값 변경 추적	Composition API에서 효과적

Vue.js 디버깅은 단순히 console.log()만 쓰는 것을 넘어, 상태의 흐름을 이해하고, 정확한 시점에서 값을 추적하는 능력이 필요합니다. 이 글에서 소개한 방법들을 익혀두면, 개발 중 발생하는 대부분의 문제를 빠르게 해결할 수 있을 것입니다.