비동기 메서드를 사용하여 .vue 파일에서 중단점을 설정할 수 없습니다.

비동기 메서드를 사용하여 .vue 파일에서 중단점을 설정할 수 없습니다.

스테핑이 행을 건너뛸 수 있거나 유효한 줄에 중단점을 설정할 수 없는 경우 Vue 앱을 디버깅하는 데 문제가 있습니다.

소스맵 문제인 것 같은데 어디서부터 파야 할지 모르겠어요.Vue-loader, Webpack 또는 Babel 중 하나일 수 있습니다.

테스트 대상:

버전: 2.6.10

vue-cli 4.1.2

이 문제는 다음과 같이 재현할 수 있습니다.

새 Vue 프로젝트 생성:

vue 생성 테스트

기본값을 사용합니다.

cd 테스트

npm 런 서브

HelloWorld.vue를 다음으로 바꿉니다.

<template>
  <button @click="save()">
    Save
  </button>

</template>

<script>
export default {

  methods: {

    async save() {
      debugger;
      let valid = false;
      if (valid) {
        return;
      } else {
        console.log("Hi")
      }
    }
  }
}
</script>

Chrome에서 devtools를 열고 저장 버튼을 누른 다음 회선에 중단점을 둡니다.

if (valid) {

내 시험에서는 중단점이 설정되지 않았다.

저장 방식에서 비동기 기능을 삭제하면 중단점을 설정할 수 있습니다.

Chrome 79 및 Firefox 73에서 테스트되었습니다.

또한 vue.config.js의 다양한 devtool 설정을 가지고 놀았으나 성공하지 못했습니다.예를 들어 다음과 같습니다.

devtool = 'cheap-module-eval-sourcemap' 
devtool = 'cheap-eval-source-map' 
devtool = 'source-map'

좋은 생각 있어요?

안부의 말

밥.

왜 이 경우에 효과가 없는지는 모르겠지만, 마지막 수단으로 라인을 추가할 수 있습니다.debugger;전에if...- 모든 DevTools를 만듭니다(최소한 현재 모든 DevTools를 포함).IE11) 여기서 정지합니다.코드는 다음과 같습니다.

      // ...
      debugger;
      if (valid) {
        // ...

이는 생성된 소스 맵이 제대로 작동하지 않는 것처럼 보이는 Vue CLI가 기본적으로 사용하도록 구성되어 있기 때문일 수 있습니다.

특히 비동기 방식의 폴리필은 디버깅에 관한 문제를 일으킵니다.https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator

이것을 .browserslistrc에 추가하면 이러한 폴리필을 피할 수 있습니다.

[development]
last 1 chrome version
last 1 firefox version

@vue/babel-preset-app Babel 프리셋은 .browserslistrc에서 타겟으로 하는 브라우저에 따라 사용할 폴리필을 자동으로 결정합니다.따라서 문제가 있는 폴리필을 비활성화하기 위해 개발 중에 비동기/대기 기능을 기본적으로 지원하는 브라우저만 대상으로 합니다(예: 최신 버전의 Chrome 및 Firefox).

언급URL : https://stackoverflow.com/questions/59801303/cannot-set-breakpoint-in-vue-file-with-async-method