title: Debug Vue.js App with VS Code. Error Unverified Breakpoint
body: <p>I have the following problem. I want to debug my Vue.js project with VS Code and Chrome. So I follow the official guide on the website <a href="https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html" rel="nofollow noreferrer">Guide</a> but it dont work. The Problem is that I always get the error :</p>
  <pre><code> unverified breakpoint
  </code></pre>
  <p>What do I wrong?</p>
  <p>This is my <code>vue.config.js</code></p>
  <pre><code>    module.exports = {
      configureWebpack: {
        devtool: 'source-map'
      }
    }
  </code></pre>
  <p>This is my debugging stetting:</p>
  <pre><code>    {
      // Use IntelliSense to learn about possible attributes.
      // Hover to view descriptions of existing attributes.
      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
      &quot;version&quot;: &quot;0.2.0&quot;,
      &quot;configurations&quot;: [
          {
              &quot;type&quot;: &quot;chrome&quot;,
              &quot;request&quot;: &quot;launch&quot;,
              &quot;name&quot;: &quot;vuejs: chrome&quot;,
              &quot;url&quot;: &quot;http://localhost:8080&quot;,
              &quot;webRoot&quot;: &quot;${workspaceFolder}/src&quot;,
              &quot;breakOnLoad&quot;: true,
              &quot;sourceMapPathOverrides&quot;: {
                  &quot;webpack:/src/*&quot;: &quot;${webRoot}/*&quot;,
                  &quot;webpack:///./*&quot;: &quot;${webRoot}/*&quot;,
                  &quot;webpack:///src/*&quot;: &quot;${webRoot}/*&quot;,
                  &quot;webpack:///*&quot;: &quot;*&quot;,
                  &quot;webpack:///./~/*&quot;: &quot;${webRoot}/node_modules/*&quot;,
                  &quot;meteor://app/*&quot;: &quot;${webRoot}/*&quot;
              }
          }
      ]
  }
  </code></pre>
  <p>And this is my package.json</p>
  <pre><code>    &quot;name&quot;: &quot;test-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;
    },
  </code></pre>
  <p>When I try <code>npm run serve</code> I get the error message <code>unverified breakpoint</code> and my breakpoint is never be hit.</p>
  <p>I use the vue-cli 3 to generate the project.</p>
  <p>Can someone help me pls?</p>
  <p><strong>Update</strong></p>
  <p>Maybe something is wrong with the path. Because when i run <code>.scripts</code> in the debugger console in VS Code I get paths like this</p>
  <pre><code>(c:\Users\XY\Desktop\Vue\route-app\webpack:\src\main.ts)
  </code></pre>
  <p>But there is no folder <code>webpack:</code>. But I have no idea why he is thinking that there is a folder. He make this in every file.</p>
  <p>And in my <code>tsconfig.js</code> I already have <code>&quot;sourceMap&quot;: true</code>.</p>
  <p><strong>Update 2</strong></p>
  <p>When I check the checkbox <code>All Exceptions</code>, VS Code show me all Exceptions in my App (they are catched). But my Breakpoints still dont work.</p>
  <p><strong>Update 3</strong></p>
  <p>My project looks like this</p>
  <pre><code>C:\Users\User\Desktop\Vue\route-app
  |
  -----.vscode
       |
       -----launch.json
  |
  -----node_modules
       |
       ----- modules etc.
  |
  -----public
       |
       ----- index.html
       |
       ----- manifest.json
       |
       ----- favicon.ico
  |
  -----src
       |
       ----- components
             |
             ----- all my components.vue files
       |
       ----- views
             |
             ----- all my views.vue files (this files are for routing)
       |
       ----- App.vue
       |
       ----- main.ts
       |
       ----- registerServiceWorker.ts
       |
       ----- router.ts
       |
       ----- shims-tsx.d.ts
       |
       ----- shims-vue.d.ts
       |
       ----- store.ts
  |
  -----.postcssrc.js
  |
  -----babel.config.js
  |
  -----package-lock.json
  |
  -----package.json
  |
  -----tsconfig.json
  |
  -----tslint.json
  |
  -----vue.config.js
  </code></pre>