前端新手求教 vue3/vite 调试方法

[ruokw]

背景:

之前一直做后端,大部分使用 vscode 搭配一些插件进行调试

面临的问题:

最近刚开始接触 vue3(使用 vite 脚手架创建项目),发现貌似"不能"在 vscode 里面进行调试.

找了一些视频以及文档,发现都没有详细介绍过这部分.有点靠谱还是使用 vue-cli 的方式,然后配置后进行调试

https://vueschool.io/lessons/debugging-vue-apps-in-vs-code

https://github.com/vitejs/vite/discussions/4065

https://vuejs.bootcss.com/cookbook/debugging-in-vscode.html

希望:

1. 希望有好心人能指点下 vue3/vite 是否能在 vscode 进行调试,如果可以怎么配置?

2. 发散的问下,一般前端都如何进行调试的?

[beisilu]

不一样是加断点吗，只不过是 F12 控制台显示断点信息。

[ruokw]

@beisilu 你说的 F12 是说浏览器的开发者工具还是啥?

我这边是期望说直接在 vscode 里面打断点. 类似 vscode 调试 python 那样.

[yinanc]

建议问 chatgpt

[Finnn]

前端调试用浏览器啊，一般不在编辑器里看，毕竟 UI ，又不是写后端 node 什么的
vue 用 vue-devtools 不就够了，虽然很卡

[fluent12138]

我调试一般都是 console.log

[molvqingtai]

https://github.com/vitejs/vite/discussions/4065

除非写 node ，否则使用浏览器调试更方便

[ciming]

https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja

[GaoNengwWw]

F12 一把梭

[ruokw]

@molvqingtai 应该就是这样了, 虽然有时候有 warn 但是不影响调试.

[ruokw]

@molvqingtai 谢谢了