Visual Studio代码上的vuejs3调试不起作用

Question

我最近转到Vuejs3，调试设置停止工作。断点不会被触发。我使用的配置文件和以前一样，不确定这个版本是否有什么变化。

• Chrome扩展版调试器：v4.12.12
• VsCode：1.56.2
• Vue CLI v3
• 平台：Ubuntu 20.04.2 LTS

launch.json

{
"version": "0.2.0",
"configurations": [
{
"name": "vuejs: pwa-chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"name": "vuejs: chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}

vue.config.js

module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}

Answer 1

我不得不将launch.json文件更改为以下文件。显然，pwa-prefix是针对VSCode的新JavaScript调试器的一种方法。参见stackoverflow讨论。旧的调试器不再在此平台上工作。希望这能帮助到别人。

{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

Answer 2

我也处于类似的情况，找不到相关的解决方案：

快速回答：升级到VS Code 1.56.2后，请确保删除旧断点并创建新断点，并且至少有1个断点和launch.json可用。

冗长的详细信息：

当我启动"；调试器条"；我在顶部调试栏上看到它几秒钟，然后它就消失了。但是控制台上没有消息，什么都没有。我尝试重新安装VS代码，启用/禁用扩展，各种重新启动。

• 操作系统和版本：Mac OSX 11.4版(20F71(
• VS代码版本：1.56.2
• 扩展：Python v2021.5.842923320 by Microsoft

根本原因：

我确实知道，我更新了我的VS代码，在那之后，这个神秘的问题开始发生，所以什么时候发布VS代码1.56.2的日志。我在下面找到了发布日志

中断#上显示的调试视图

debug.openDebug设置的默认值现在为openOnDebugBreak，这样在每次命中断点时，VS代码都会打开调试视图。调试视图也显示在第一个会话上开始

因此，VS代码版本1.56发布时，调试器只有在找到至少一个断点时才会显示。然而，在VS代码升级后，他们的内部代码检查历史断点数据似乎存在问题。。

https://code.visualstudio.com/updates/v1_56#_debug-中断时显示的视图

Answer 3

在sourceMapPathOverrides中添加2条路径。它对我有用。

"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
}

Answer 4

删除sourceMapPathOverrides:后工作

// "sourceMapPathOverrides": {
//   "webpack:///src/*.vue": "${webRoot}/*.vue",
//   "webpack:///./src/*.js": "${webRoot}/*.js",
// }

Answer 5

由于每个人使用不同的vue-cli版本和webpack版本，我将在这里提供一个更高效的解决方案。您可以将devServer中的writeToDisk字段配置为true，如下所示：

webpack5:

devServer: {
devMiddleware: {
writeToDisk: true,
},
},

webpack<5:

devServer: {
writeToDisk: true
}

您还需要将源映射配置更改为devtool: 'source-map'，而不是devtool: 'cheap-module-eval-source-map'更快的sourceMap格式将导致更多信息丢失，使您的VS代码无法确定资源路径。

然后，在执行npm run dev之后，项目中会有一个额外的dist文件夹，其中包含源映射文件

源映射文件包括以下字段：

"sources": [
"webpack://mydeb/./src/App.vue?01fe",
"webpack://mydeb/./src/components/HelloWorld.vue?774b",
"webpack://mydeb/./src/App.vue?763f",
"webpack://mydeb/./src/components/HelloWorld.vue?6c98",
"webpack://mydeb/src/App.vue",
"webpack://mydeb/src/components/HelloWorld.vue",
"webpack://mydeb/./src/App.vue",
"webpack://mydeb/./src/components/HelloWorld.vue",
"webpack://mydeb/./src/main.js",
"webpack://mydeb/./src/App.vue?81d5",
]

CCD_ 8是在包中配置的名称字段I，根据这些信息，我这样配置launch.json：

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack://mydeb/src/*.vue": "${webRoot}/src/*.vue",
"webpack://mydeb/./src/*.js": "${webRoot}/src/*.js",
}
}
]
}