vscode调试c语言断点无效,vue 在 vscode 中断点调试问题

问题描述

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

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

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

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

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

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

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

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