I recently started a new project in WebStorm using TypeScript settings, but for some reason the debugger break point isn't working.
My configuration
Version
- Node 12.10
- Vue/CLI 3.11.0
Project setup
- Babel
- TypeScript
- Router
- CSS Pre-processors
- Unit Testing
Build setup
- Class Style Syntax: Yes
- Use Babel alongside TypeScript: Yes
- Use history mode: No
- CSS Pre-processor: Sass/Scss dart-sass
Code
The debug point is set on 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("started")
@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 Debugger Settings:
https://i.sstatic.net/TLdCQ.png
Despite clicking the debug button, it is not stopping at the break point as expected.
package.json, tsconfig.json, and other files are all set to their default configurations.