title: VS Code - Debugging VUE component in Laravel project - Unverified breakpoint
body: <p>I'm trying to debug a VUE component in Laravel 5.5 project using VS Code.</p>
  
  <p>The last version of VS Code is installed.<br>
  Debugger for Chrome 4.2.0 is installed.<br>
  All Chrome processes are killed.</p>
  
  <p>launch.json in .vscode folder has the following code:</p>
  
  <pre><code>"version": "0.2.0",
  "configurations": [
      {
          "name": "Launch",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:8000",
          "webRoot": "${workspaceRoot}",
          "sourceMaps": true,
          "runtimeArgs": [
          "--remote-debugging-port=9222"
          ]
      },  
  ]
  </code></pre>
  
  <p>I start the project from CMD like this:</p>
  
  <pre><code>λ php artisan serve
  Laravel development server started: &lt;http://127.0.0.1:8000&gt;
  </code></pre>
  
  <p>I set a breakpoint in Vue component and start debugging
  <a href="https://i.stack.imgur.com/E1kMp.png" rel="nofollow noreferrer">(see image)</a></p>
  
  <p>As the result, the project page is opened in Chrome, but breakpoint doesn't work.<br>
  It is greyed out with the following message:</p>
  
  <pre><code>Unverified breakpoint, Breakpoint ignored because generated code not found
  (source map problem?)
  </code></pre>
  
  <p>I found 4 files with the name "webpack.mix.js" in the project folder. I have added the ".sourceMaps();" to each of them like this:                                                     </p>
  
  <pre><code>mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css')
     .sourceMaps();
  </code></pre>
  
  <p>After that I rebuild the project by:</p>
  
  <pre><code>npm run dev
  </code></pre>
  
  <p>But I didn't find any map files in CSS folder and the problem is still here.</p>