vue3 vite chrome断点调试打不上的问题

2,315 阅读1分钟

vue3 vite 跑个测试来尝尝吧, 第一步就栽了, 遇到了chrome断点调试打不上、debugger位置不正确的问题

运行vue3项目, 来到chrome的source查询role/authUser 竟然没有这个文件

image.png

可是我的文件夹下确实有这个的

image.png

猜测页面没浏览这个文件, 自然在编译后的source也找不到了
当我通过页面打开这个页面后, 再去source查找就出现了

image.png

我就高兴地在代码处打断点, 然后断点的位置跳了! 是的! 它跳了

image.png

跳到了124行, 啊...醉了, 撒么子回事

image.png

image.png

再一看本地文件的位置是对的124行, chrome的Breakpoints位置124, 也是对的, 但是source上跳到了编译行?
猜测是由于vue3和vue2编译不同造成的

莫慌!
点一下下边的formatter, 然后浏览器就生成了一份格式化后的文件, 在此文件上断点就OK 啦

image.png

image.png

翻了一遍官方文档 "www.vitejs.net/config" 也没看到类似 configureWebpack: devtool: 'source-map' 的配置

欢迎有线索的网友们指出问题