一、使用新版的vs code。这里不在赘述安装过程。
二、安装插件,JavaScript Debug。这个插件应该是默认就有的,新版vs code去掉了 Debugger for Chrome 这个插件。
三、在vs code ,运行和调试页面进行配置。
![vscode vue3 运行,vue.js,前端,javascript,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2023/08/665470-1.png)
点击齿轮出现launch.json编辑页面,webRoot 默认是上图 注销掉的 地方。
webRoot 改为你的项目文件路径。这一步可以保证调试时通过你写的代码,否则无法击中断点。
url改为npm run dev (npm run serve) 后的IP地址端口号。
四、先执行命令 npm run dev 或 npm run serve 启动你的项目。
再到运行和调试窗口 选择你需要的配置,点击绿色箭头启动调试。文章来源:https://www.toymoban.com/news/detail-665470.html
![vscode vue3 运行,vue.js,前端,javascript,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2023/08/665470-2.png)
调试时的大概样子。文章来源地址https://www.toymoban.com/news/detail-665470.html
![vscode vue3 运行,vue.js,前端,javascript,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2023/08/665470-3.png)
到了这里,关于vs code 调试vue3 。解决无法击中断点的问题。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!