在 VS Code 中调试vue项目

Posted 2023-04-11

参考技术A 1.VS Code 中安装Debugger for Chrome扩展的最新版本：

2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：

3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下：

4.在vue项目的文件中设置断点
5.启动vue项目：

6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。

7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉vscode的断点处。

遇到的问题：
官网中的launch.json配置中"url": " http://localhost:8080 "，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考：
在 VS Code 中调试： https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

vs code 怎么与手机连接进行调试app项目

两点

1.手机和电脑要在同一网段 可通过连接个人热点网络进行连接

2.项目中的一切路径要和电脑本地ipv4一致

3.扫描二维码

　　3.1 可通过百度查找草料二维码 把项目网址放进去生成二维码

　　3.2  任意扫描二维码是工具都可以访问 

 

 

 

对你有用的话请点赞！感谢您的观看！