移动端开发中调试检查方案

拼搏现实的明天。 2022-09-16 12:20 155阅读 0赞

调试检查  
模拟器可代替不了真机~ 起码肯定是模拟不出来刘海的~

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16]

所以呢~ 我们在制作网站的时候，可以把模拟器的状态作为参考，但是做完后，还是要通过真机检测，是否存在问题~ 那么如何检测把网站放到手机上进行检测呢？

检测步骤  
下载XAMPP：sourceforge.net/projects/xa… 但是下载起来，特别慢，如果自己下载，推荐使用迅雷（我下载它告诉我要一天！！）

XAMPP是一个集成了很多功能的软件，这里我们使用Apache模块，它是WEB服务器软件，功能是让别的设备在浏览器上输入它的地址时，它能把相应的网页文件、媒体文件发送给浏览器。（注意连接同一个网络）

安装：打开

找到Apache点击start开启服务

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 1]

注意：

有的可能在这一步会发生错误，下面会提示这样的文字。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 2]

一般来说，产生原因是端口为其他程序占用，修改下端口就好，修改端口：

httpd-ssl.conf 文件

所有 443 => 444（自定义端口）

httpd.conf 文件

所有 80=> 88（自定义端口）

关闭软件重新启动

找到防火墙，添加Apache HTTP Server允许使用专用 or 公用网络（否则还是会访问失败）

保证 手机 和 电脑连接同一个网络

找到当前电脑IP地址

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 3]

手机浏览器，输入IP地址  
这时我们就可以访问到页面啦~ 如果想要访问到自己写的页面，做如下操作：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 4]

把你想要查看的页面放到htdocs文件夹内，就可以看到啦~

这里为了给大家展示效果，我下载了一个投屏软件：AirServer

但是对于大家开发来说，是没有什么实际用处的，所以并不需要下载，该软件针对苹果设备

调试辅助工具  
vConsole是一个可以帮助我们在手机上进行调试的工具，我们可以通过它看html的结构以及JS报错等内容，使用方法如下：

下载vConsole，地址：raw.githubusercontent.com/Tencent/vCo…

在需要使用的页面中，引入上面的JS文件

添加代码

var vConsole = new VConsole();
    复制代码

但是很可惜，没有办法看到元素的样式。

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c588ceb80ec24068ae612479997631e4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/697674cd992f4d7fa2a81d4bddd3c46e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/6d3f433f30764e01a946990a32392fa4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ad875e56b4224456b6243505609b08a3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/f12d42e612424d1bb96c1b2089e646b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/2561c8fb2ab041bba6c0448c4220f6b0.png
[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu