当前位置: 移动技术网 > IT编程>网页制作>Html5 > H5真机调试

H5真机调试

2019年01月11日  | 移动技术网IT编程  | 我要评论
为什么要做H5真机调试? 第一,样式调试。浏览器的效果和真机上的效果不一定相同,没有真机调试,我们都是先上传到服务器,然后再用手机访问,显然对于样式调试来说,这样效率很低。 第二,调用到底层、真机才拥有的功能。比如说扫一扫,扫一扫是无法在电脑上调试的。 一、让手机和电脑处于同一网段 如何让手机和电脑 ...

为什么要做h5真机调试?

第一,样式调试。浏览器的效果和真机上的效果不一定相同,没有真机调试,我们都是先上传到服务器,然后再用手机访问,显然对于样式调试来说,这样效率很低。

第二,调用到底层、真机才拥有的功能。比如说扫一扫,扫一扫是无法在电脑上调试的。

 

一、让手机和电脑处于同一网段

如何让手机和电脑处于同一网段?

1.如果你所处环境的wifi和电脑网络是同一局域网,当你手机连上wifi后自然很电脑处于同一网段了。

2.电脑发射wifi,手机连接。笔记本电脑可以下载wifi软件,台式电脑只能买个wifi发射器了,所以我买了一个随身wifi。

3.手机开热点,笔记本电脑连接。

 

二、下载fiddler

tools → options → connections

设置端口号 fiddler listens on port

勾选 allow remote computers to connect

 

三、手机配置代理

进入你连接的wifi,配置代理。

 

四、起一个本地服务器

现在前端起一个本地的服务器是很容易的,比如hbuilder和visual studio code都可以。

hbuilder是内置了一个,而visual studio code需要你安装相应的插件。

 

五、调试

复制浏览器中的地址 http://127.0.0.1:5500/

将 127.0.0.1 改成你电脑的ip地址 http://192.168.1.143:5500/ 并复制到手机浏览器中

 

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网