V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 627 天前的主题，其中的信息可能已经有所发展或是发生改变。

背景:

之前一直做后端,大部分使用 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

希望:

希望有好心人能指点下 vue3/vite 是否能在 vscode 进行调试,如果可以怎么配置?
发散的问下,一般前端都如何进行调试的?

调试

VSCode

vite

10 条回复 • 2023-03-26 12:58:24 +08:00

beisilu

2023-03-25 15:40:22 +08:00

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

ruokw

2023-03-25 15:46:06 +08:00

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

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

yinanc

2023-03-25 16:03:51 +08:00

建议问 chatgpt

Finnn

2023-03-25 16:51:46 +08:00

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

fluent12138

2023-03-25 21:28:15 +08:00 via Android

我调试一般都是 console.log

molvqingtai

2023-03-26 00:51:29 +08:00

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

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

ciming

2023-03-26 09:18:41 +08:00

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

GaoNengwWw

2023-03-26 11:03:52 +08:00

F12 一把梭

ruokw

2023-03-26 12:58:06 +08:00

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

ruokw

2023-03-26 12:58:24 +08:00

@molvqingtai 谢谢了

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

背景:

面临的问题:

希望: