title: Remote-debug a VueJS webpack project
body: <p>I'm using Visual Studio Code and attempting to configure the <a href="https://github.com/Microsoft/vscode-chrome-debug" rel="nofollow noreferrer">Debugger for Chrome</a> extension to work with my webpack project created via <a href="https://github.com/vuejs/vue-cli" rel="nofollow noreferrer">vue-cli</a>.</p>
  
  <p>I am able to attach to the correct instance of Chrome and see logged info in the Debug Console. But I am not able to add breakpoints in the scripts of my <code>.vue</code> files. </p>
  
  <p>When I click a line to add a breakpoint dot, sometimes the breakpoints are added on a line somewhere higher up in the file. And sometimes I get this error:</p>
  
  <blockquote>
    <p>Error processing "setBreakpoints": Breakpoint at specified location already exists.</p>
  </blockquote>
  
  <p>Does anyone know why I would be seeing this issue with the breakpoints? Is there anything wrong with my <code>launch.json</code> file?</p>
  
  <h3>Steps to reproduce:</h3>
  
  <ol>
  <li><p>Set up a webpack project:</p>
  
  <pre><code>$ vue init webpack my-project
  </code></pre></li>
  <li><p>Open project in VS Code and configure <code>launch.json</code> file like so:</p>
  
  <pre><code>{
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Attach",
              "type": "chrome",
              "request": "attach",
              "port": 9222,
              "url": "http://localhost:8080/*",
              "webRoot": "${workspaceRoot}"
          }
      ]
  }
  </code></pre></li>
  <li><p>Start webpack project in development mode:</p>
  
  <pre><code>$ npm run dev
  </code></pre></li>
  <li><p>Launch Chrome with remote debugging enabled on port <code>9222</code> and navigate to <code>http://localhost:8080/</code>:</p>
  
  <pre><code>$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug 
  </code></pre></li>
  <li><p>Run the debugger by hitting <code>f5</code> and add a breakpoint anywhere</p></li>
  </ol>
  
  <h3>Screenshot of webpack source in the dev tools:</h3>
  
  <p><a href="https://i.stack.imgur.com/A4UR7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A4UR7.png" alt="screenshot of webpack source in dev tools"></a></p>