WebStorm에서 Vue.js 2 디버깅

WebStorm에서 Vue.js 2 디버깅

문제는 디버거가 올바른 소스 파일뿐만 아니라 웹팩에 의해 자동 생성되는 app.js 파일에도 발을 들여놓는다는 점이다.어떻게 하면 그것을 막을 수 있을까?

다음과 같은 설정이 있다.

나는 Vue.js 2 앱을 시작했다.vue-cli. 디버깅 구성은 다음과 같다.

나는 또한 이 선을 에 추가했다."webpack.dev.conf.js";devtool: "source-map",

그리고 app.js 파일을 디버거 구성의 예외에 추가했다.

서버를 시작하는 방법npm run dev명령어를 입력한 다음 WebStorm에서 디버깅 세션을 시작하십시오.문제는 여전히 존재한다.아이디어 있으십니까?

다음 두 가지 사항을 확인하십시오.

1. 변경하기devtool가치에 대한 구성'eval-source-map'또는'#eval-source-map'('#' 기호를 추가하는 것과 '#' 기호가 없는 것의 차이는 모르겠지만, 나는 당신의 효과적인 웹 팩 구성 파일에 둘 다 예상대로 작동할 수 있다고 테스트했다.)

2. 디버그 구성을 동일한 단계로 추가하십시오.WebStorm에서 디버그 구성을 클릭하면 시스템이 자동으로 하나의 창(Google Chrome 또는 Firefox)을 팝업합니다, 이 페이지에서 트리거된 작업만 WebStorm Editor와 동기화되는지 확인하십시오.이것은 매우 중요합니다!

그것은 지금 내가 부러워하는 것에서 효과가 있다.

사용하다devtool: 'eval-source-map'대신에

참조URL: https://stackoverflow.com/questions/46697906/debugging-vue-js-2-in-webstorm