title: Debugger settings for Chrome in VS Code with Vue.js
body: <p>With the following settings in .vscode\launch.json</p>
  
  <pre><code>{
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}"
        }
      ]
  }
  </code></pre>
  
  <p>I can set a breakpoint in index.js file in my project and it triggers successfully, but the breakpoints in *.vue files triggers incorrectly.</p>
  
  <p>With the following settings:</p>
  
  <pre><code>{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      }
    ]
  }
  </code></pre>
  
  <p>vice versa, the breakpoints in *.vue files are triggered successfully, but I cannot set a breakpoint in my index.js file.</p>
  
  <p>How to make the breakpoints work in both *.js and *.vue?</p>
  
  <p>See more detailed information on <a href="https://developernote.com/2018/09/vue-js-development-tools/" rel="nofollow noreferrer">how I set up the environment</a>.</p>