WebStorm - vue 디버깅

기능과 기술

Jokelife 2023. 5. 9. 22:48

vue로 구성한 프론트에서 디버깅을 하고 싶어졌습니다. 이 방법 이전에는 디버깅을 하지 못하고 console.log를 찍으며 확인했습니다. +_+

구글링 ㄱㄱ

WebStorm을 만든 jetbrains의 블로그에서 잘 설명해주고 있습니다.

Working With Vue.js in WebStorm | The WebStorm Blog

Let’s take a look at how JetBrains IDEs can help you to work with a Vue.js app written in JavaScript.

blog.jetbrains.com

Run/Debug Configurations에서 JavaScript Debug 설정을 추가합니다.

저는 해당 프론트를 12347 포트로 실행하므로 URL에 맞춰 설정해줍니다.

터미널에서 npm run serve로 프론트를 띄워줍니다.

그 후 만들어놓은 JavaScript Debug 설정을 실행하면 디버깅을 할 수 있게 됩니다. +_+

좀 더 나은 개발 환경이 되었습니다. 화이팅!!