it-day/springboot

Vue 디버깅 하는법

별지킴Lee 2024. 2. 27. 12:00

https://jojoldu.tistory.com/468

 

웹 JS 애플리케이션 개발시 IntelliJ 디버거 사용하기

Vue 혹은 React로 개발시 Webstorm (혹은 IntelliJ Ultimate) 라이센스가 있으신 분들도 VS Code로 개발하시는 경우를 종종 봅니다. 백엔드 개발자 분들이라면 아무래도 IntelliJ가 더 익숙하실텐데요. Chrome + VS

jojoldu.tistory.com

 

 

  1. Vue.js 프로젝트 설정:
    • IntelliJ를 실행하고 메뉴에서 "File" > "Open"을 선택하여 Vue.js 프로젝트의 디렉토리를 엽니다.
  2. Chrome 브라우저와의 연동:
    • Vue.js 애플리케이션을 Chrome 브라우저에서 실행하고 Chrome 개발자 도구를 엽니다.
  3. Vue.js 디버깅 확장 도구 설치:
    • IntelliJ의 플러그인 매니저에서 Vue.js 디버깅 확장 도구를 설치합니다.
  4. Vue.js 디버깅 설정:
    • Vue.js 디버깅 확장 도구를 설치한 후, IntelliJ에서 디버깅 구성(Configuration)을 설정합니다. "Run/Debug Configurations"에서 "+" 버튼을 클릭하여 "JavaScript Debug"를 선택하고, "URL" 필드에 Vue.js 애플리케이션의 URL을 입력합니다.
  5. 디버깅 시작:
    • 디버깅 구성을 완료하고, Vue.js 애플리케이션을 실행합니다. 그런 다음 IntelliJ에서 디버그 모드로 전환하고 디버깅을 시작합니다.
저작자표시