debugging VS代码-调试Laravel项目中的VUE组件-未经验证的断点

fhg3lkii 于 2022-11-14 发布在其他

关注(0)|答案(4)|浏览(150)

我正在尝试使用VS代码调试Laravel 5.5项目中的VUE组件。
已安装最新版本的VS代码。
已安装适用于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”的文件。“对他们每个人这样说：

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

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

npm run dev

但我没有找到任何Map文件在CSS文件夹和问题仍然在这里。

debugging

来源：https://stackoverflow.com/questions/49255223/vs-code-debugging-vue-component-in-laravel-project-unverified-breakpoint

4条答案

按热度按时间

jucafojl1#

这是对我有效的配置，它允许我直接在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');

赞(0）回复(0）举报 2022-11-14

slsn1g292#

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

赞(0）回复(0）举报 2022-11-14

olmpazwi3#

我有完全相同的行为。代码中的调试器字工作，但vscode红点常规断点不工作。我尝试了许多修复和 sourceMapOverrides 路径的组合，但最后只将我的devtools源Map类型设置为**cheap-module-eval-sourcemap**解决了我的项目问题！
在您的 webpack.mix 中尝试以下行：

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

查看我的github评论和问题以获得更多细节
也许这将是很好的尝试所有的类型，如果这不工作
以下是我的调试配置：

{
      "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/*"
       },
},

赞(0）回复(0）举报 2022-11-14

krugob8w4#

另一个解决方案是使用VueJS chrome dev工具从here扩展
根据建议，此答案为here

赞(0）回复(0）举报 2022-11-14