移动端调试痛点，修Bug于无形！（项目常用）
发表时间：2023-11-01 08:33:46
文章来源：炫佑科技
浏览次数：197
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
移动端调试痛点，修Bug于无形！（项目常用）
在移动端开发时，我们首先使用手机模拟器在PC端进行调试。 没有问题后，我们将在移动端浏览器上进行测试。 这个时候，一旦出现问题，由于缺乏可视化界面，我们很难解决。 很多时候，我们依靠经验或者排除法。 甚至，我们不得不将其归咎于浏览器实现问题。
移动开发*重要的是掌握调试技巧，在看不见的情况下修复bug。
1. 移动模式-公开调试
是我们前端开发中不可或缺的工具。 调整样式、断点、检查网络请求、检查性能等等，基本上只要你能想到的，都能满足你。
移动调试也是如此。 我们可以使用 的移动模式手机h5制作小程序，如下图。 点击右侧红框中的移动按钮，切换至移动模式。 同时我们还可以点击左侧红框中的下拉箭头。 ，选择不同的手机模式，还可以选择模式自定义宽度和高度。
同时我们还可以自定义设备，修改浏览器的ua来调试哪些页面只允许微信访问，如下图：
我们的大部分需求都可以通过 来满足。 但在实际开发中，由于各种机器型号存在问题，真机调试成为了前端的必修课。
*特点：流行的调试工具，但无法模拟真机问题。
2. Mac+IOS+-高级调试
如果你有一台 Mac 电脑和一部 ，这是解决该错误的唯一方法。
1､浏览器设置：- 首选项- 高级- 勾选“在菜单栏中显示开发”菜单。
2､设置：设置-高级-打开Web 。
3､通过手机打开H5页面。 我们通过浏览器开发选项可以看到：
4､这样就成功解决问题了。
*特点：里面的页面无法调试。
3. +- 高级调试
1､打开手机设置 >开发选项 > USB 调试。
2､通过数据线连接电脑和手机，弹出如下界面，点击确定。
3､ 输入：:// 进入调试页面。
4､可以看到这样的调试界面
*特点：控制台可以正常查看页面，可以模拟真机，方便发现页面布局问题。
4.spy--高级调试
py-：强大的移动调试工具移动端调试痛点，修Bug于无形！（项目常用），方便的远程调试移动页面和抓包工具。
Spy-是一款一站式页面调试和抓包工具。 远程调试任意移动浏览器页面、任意移动终端（如微信等）。 支持HTTP/HTTPS，无需USB连接设备。 间谍的特点包括：
调试方法（重要）
1.安装spy-
sudo npm install spy-debugger -g
2.保持手机和PC在同一网络
3.打开手机上的网络代理。 IP是PC的IP。 默认端口号为 9888。
