vue3+vite谷歌可以调试吗？

[融化的泪记忆中]

之前使用vue2+webpack的时候在谷歌调试工具中是可以直接调试script中的代码的，现在换成vue3+vite之后谷歌调试工具中源代码里可以找到vue文件，但是底下会自动生成一些文件，然后在方法处加断点后会加到底下生成的代码中，没有办法对方法进行调试。从网上搜了一堆解决方案，但是目前我还没找到能用到的，请问大佬十vite没有办法在源代码调试吗？如果能在源代码中调试可以告诉一下吗。谢谢大佬，祝大佬新年快乐。

[chengpeiquan]

新年好啊！不过我没看太懂问题里的意思，是指在浏览器里断点后没有关联到 VSCode 里的源码吗？

可以尝试在项目根目录下创建一个 .vscode 文件夹，添加一个 launch.json ，写入下面的配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "针对 localhost 启动 Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

启动本地服务后，点这里唤起调试，这样运行后在浏览器里打的断点就会和编辑器关联了，断点到了哪里，源码也会对应的高亮。

[融化的泪记忆中]

我按照大佬的方法试了一下我从github上找的项目，还是不行，然后我自己建了一个脚手架试了一下可以加上断点，vscode上不加这个文件，不启动也可以断点到源代码。


然后我加断点加在44行，断点会加在86行。执行的时候也是在86行断点。

可能还是有哪些配置没开启导致的这个问题。非常感谢大佬百忙之中的解答，嘿嘿。