【问题标题】：Debbuger of Vue.js TypeScript project with WebStorm doesn't stop at break point带有 WebStorm 的 Vue.js TypeScript 项目的调试器不会在断点处停止
【发布时间】：2020-03-23 19:42:02
【问题描述】：

我使用带有 TypeScript 设置的 WebStorm 创建了新项目。然后，调试器断点不起作用。

我的设置

版本

节点 12.10
vue/cli 3.11.0

项目设置

通天塔
打字稿
路由器
CSS 预处理器
单元测试

构建设置

类样式语法 => 是
Typescript 旁边的用户 Babel => 是
使用历史模式 => 否
Css 预处理器：Sass/Scss dart-sass

代码

调试点在console.log("started")

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

console.log("satarted")

@Component({
  components: {
    HelloWorld,
},
})
export default class App extends Vue {}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

WebStorm的调试设置：

然后我点击调试按钮，但它并没有在断点处停止。

package.json, tsconfig.json等文件为默认设置。

【问题讨论】：

你调试了什么配置 - npm 或 javascript debug？前者只能用于启动您的应用程序，您需要选择后者并按 Debug 将调试器附加到您的浏览器页面
我正在使用 npm 调试。我会尝试附加到浏览器页面。

标签： typescript vue.js webstorm

【解决方案1】：

您应该通过运行（而不是调试）npm serve 运行配置来启动您的应用程序，然后选择 JavaScript 调试 配置并按 Debug。

参见https://blog.jetbrains.com/webstorm/2018/01/working-with-vue-js-in-webstorm/，调试应用部分

【讨论】：

【解决方案2】：

如果您的程序没有在断点处停止，这通常意味着您的程序没有执行断点所在的代码。或者您正在查看错误的位置。在前端应用程序中，可以通过按 f12 在浏览器中查看控制台。我还建议使用 Vue Devtools 扩展，它非常有用。

【讨论】：