vue 在 vscode 中断点调试问题

ゞ浴缸里的玫瑰 2023-10-11 14:09 71阅读 0赞

## 问题描述 ##

最近在使用 vscode + vue 组合开发web端。调试的时候发现两个问题。第一个问题是vscode没有办法在 async await 函数所在的行设置断点。第二个问题是除了vue模版那几个js文件以及 .vue 文件，没有法办在自己写的 js 文件或者模块设置断点。

下面根据这两个问题寻找解决方法。

### 问题一：没有办法在async await 所在行打断点 ###

这个问题其实是 sourcemap 的问题。因为vue 一般开发都是用es6或者tpyescript 写的代码。然后使用babeljs 翻译成一般浏览器都能运行的es5。这样的结果是浏览器上运行的代码和我们开发写的代码是不一样的。这个时候就需要一个叫 sourcemap 的东西来标记浏览器上哪行代码对应工程中的哪行代码。

所以不能打断点应该就是vscode 和 chrome 找不到对应代码的位置。

![format_png][]

上面的126行 var res = await ...... 就不能设置断点。vscode 会提示你 unverified breakpoint 。

解决办法要从 babel 的配置文件下手。在项目的根目录创建一个 babel.config.js 文件。然后配置如下：

![format_png 1][]

重新编译运行一次。也就是重新运行 npm run serve 。再试试在刚才的地方打断点。成功了。重点其实是配置文件的第五行。

![format_png 2][]

###  ###

### 问题二：没有办法在自己写的js 或者模块里面打断点 ###

要解决这个问题我们先来做个实验。我们在根目录的 ./src/rpc 文件夹下有一个自己写的js文件 rpc\_user.js

![format_png 3][]

在第一个问题的 126行打个断点，然后 stepin 无数次之后最终会到达 我们 rpc\_user.js 那个loginWithName 函数。但是，这个时候vscode 打开的文件名后面一般会跟 “readonly - inlined context source map” 之类的提示。我们先叫他 readonly\_rpc\_user.js 。 有趣的是如果在这个文件里面打断点是能成功的。但回到原本的 rpc\_user.js 却不能打断点。什么问题呢？我们来看看 chrome 浏览器上的状态。

![format_png 4][]

![format_png 5][]

发现问题了没有。Login.vue 文件在 webpack:///src/views/ 里面。而 rpc\_user.js 却在 webpack:///./src/rpc/ 里面。就那么一点点差异。另外，如果直接在chrome 的rpc\_user.js 里面打断点是没有问题的。也就是说vscode 并不能在本地项目找到 webpack 上对应的文件。知道了问题就好解决了。就是要告诉vscode 什么文件在什么文件夹。

下面我们重新配置一下项目根目录下 .vscode/launch.json 文件。

![format_png 6][]

vscode 默认生成的 launch.json 是没有第 13行的。通过修改配置让vscode 知道 webpack 调试的文件对应项目的本地文件。问题解决。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDQxMjQzMS0zMzc0ZWVhN2UwNjRiNTU3LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDQxMjQzMS00NTg1ZTg0NmZhN2Y0NGJmLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzcxMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDQxMjQzMS0yOTdjMzY4ZTJhMjliYjExLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzgzMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDQxMjQzMS00YTlmMzNlOWM3N2M4MTJiLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzYzNC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDQxMjQzMS0xY2Q5ZTUxYjE1YThiMmE2LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzQ0NC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDQxMjQzMS0wZDlhMTY0YjJkNmNlMWZhLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzQzMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDQxMjQzMS1jZjAxZTUzMjE3ODdiYmU1LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93Lzk4Mi9mb3JtYXQvd2VicA?x-oss-process=image/format,png