我正在尝试使用 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 文件夹中没有找到任何 map 文件,问题仍然存在。
最佳答案
这是对我有用的配置,它允许我直接在 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');
关于debugging - VS Code - 在 Laravel 项目中调试 VUE 组件 - 未验证的断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49255223/