[Vue]디버깅하는 2가지 방법

이번 글에서는 버튼을 누르면 숫자가 증가하는 간단한 Vue.js 예제를 만들고, 이를 웹 브라우저, VS Code에서 디버깅하는 방법을 알아보겠습니다. 🚀

---

🏗️ 1. 버튼을 누르면 숫자가 증가하는 Vue 예제 만들기

먼저, 버튼을 클릭할 때 숫자가 증가하는 간단한 Vue 컴포넌트를 만들어보겠습니다.

<template>
  <div>
    <h1>현재 숫자: {{ count }}</h1>
    <button @click="increment">+ 숫자 증가</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);
const increment = () => {
  count.value++;
  console.log("✅ 현재 count 값:", count.value);
};
</script>

🔹 버튼을 클릭하면 increment() 함수가 실행되면서 count 값이 증가합니다.
🔹 브라우저나 콘솔에서 숫자가 증가하는 걸 확인할 수 있습니다.

 

동작확인

숫자증가 동작 확인

---

🔎 2. 웹 브라우저에서 디버깅하기

✅ 2.1 Chrome 개발자 도구 활용하기 🖥️

1. Vue 애플리케이션이 실행된 상태에서 개발자 도구(DevTools)를 열어야 합니다.

• Windows / Linux: F12 또는 Ctrl + Shift + I
• Mac: Cmd + Option + I

2. Sources탭을 클릭한 후 파일을 열고 디버깅하길 원하는 라인을 클릭하여 브레이크포인트(Breakpoint)를 생성합니다.

3. 개발자 도구를 켠체로 숫자 증가 버튼을 클릭해서 디버깅을 합니다.

 

동작확인

웹 디버깅 동작 확인

---

🛠️ 3. VS Code에서 디버깅하기

웹 브라우저에서 기본적인 디버깅을 했다면, 이제 VS Code에서 브레이크포인트(Breakpoint)를 설정해서 디버깅해보겠습니다.

✅ 3.1 VS Code 디버깅 환경 설정하기

1. Ctrl + Shift + D 나 좌측 탭에서 디버그 패널을 엽니다.

2. 실행 및 디버그로 launch.json 설정, port를 5173로 변경

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost에 대해 Chrome 시작",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

vscode 디버깅 설정

---

🎯 3.2 VS Code에서 브레이크포인트 설정하고 디버깅하기

 

1. 코드에서 디버깅할 부분 브레이크포인트 생성

2. npm run dev로 실행한 상태에서 디버깅 실행

---

🎉 4. 결론

Vue.js에서 디버깅할 때 웹 브라우저 & VS Code 디버깅을 함께 활용하면 더욱 효과적입니다. 🚀