VS Code - 在 Laravel 项目中调试 VUE 组件 - 未验证的断点答案

【问题标题】：VS Code - Debugging VUE component in Laravel project - Unverified breakpointVS Code - 在 Laravel 项目中调试 VUE 组件 - 未验证的断点
【发布时间】：2018-08-21 15:40:45
【问题描述】：

我正在尝试使用 VS Code 调试 Laravel 5.5 项目中的 VUE 组件。

安装了最新版本的 VS Code。
已安装 Chrome 4.2.0 的调试器。
所有 Chrome 进程都被杀死。

.vscode 文件夹中的launch.json 代码如下：

"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8000",
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "runtimeArgs": [
        "--remote-debugging-port=9222"
        ]
    },  
]

我是这样从 CMD 启动项目的：

λ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

我在 Vue 组件中设置断点并开始调试 (see image)

结果，项目页面在 Chrome 中打开，但断点不起作用。
它显示为灰色并显示以下消息：

Unverified breakpoint, Breakpoint ignored because generated code not found
(source map problem?)

我在项目文件夹中找到了 4 个名为“webpack.mix.js”的文件。我添加了“.sourceMaps();”像这样对他们每个人：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sourceMaps();

之后我通过以下方式重建项目：

npm run dev

但我在 CSS 文件夹中没有找到任何地图文件，问题仍然存在。

【问题讨论】：

你在使用 laravel-mix 吗？
如果是，您可能需要启用源映射。
见laravel.com/docs/5.5/mix#working-with-stylesheets
我可以在 package,json 中看到 laravel-mix
阅读文档，你就会明白该怎么做

标签： debugging laravel-5 vue.js visual-studio-code

【解决方案1】：

这是对我有用的配置，它允许我直接在 VSCode 中为 .vue 和 .js 文件设置断点：

VSCode 的launch.json:

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/public",
        "sourceMapPathOverrides": {
            "webpack:///resources/assets/js/*.vue": "${workspaceFolder}/resources/assets/js/*.vue",
            "webpack:///./resources/assets/js/*.js": "${workspaceFolder}/resources/assets/js/*.js",
            "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
        }
    }]
}

webpack.mix.js:

let mix = require('laravel-mix');

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sourceMaps(false, 'source-map')
  .sass('resources/assets/sass/app.scss', 'public/css');

【讨论】：

谢谢，我稍后试试。
谢谢！对于那些没有让它工作的人，您可能需要调整路径以反映您的设置，例如在我的设置 vue 文件位于 resources/js 而不是 resources/assets/ js

【解决方案2】：

不幸的是，“.sourceMaps()”没有帮助，但在这种情况下，可以使用“debugger”关键字代替标准断点。您只需将其添加到所需的代码行，代码就会停在那里。

【讨论】：

【解决方案3】：

我的行为完全相同。代码中的调试器字有效，但 vscode 红点常规断点无效。我尝试了许多与 sourceMapOverrides 路径的修复和组合，但最后只将我的 devtools sourcemaps 类型设置为 cheap-module-eval-sourcemap为我的项目解决问题！

在你的 webpack.mix 中试试这一行：

mix.webpackConfig({ devtool: 'cheap-module-eval-sourcemap' })

查看我的github 评论和问题以获取更多详细信息

如果不起作用，尝试all of that types 可能会很好

这是我的调试配置：

{
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost",
      "webRoot": "${workspaceFolder}/public",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
            "webpack:///resources/js/*.vue": "${workspaceFolder}/resources/js/*.vue",
            "webpack:///./resources/js/*.js": "${workspaceFolder}/resources/js/*.js",
             "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
       },
},

【讨论】：