前端周记 之群策群力下获得的 真机测试方法
移动端web前端开发有一个痛点就是真机测试经常与电脑出来的结果有出入,这个问题的原因是来自于
手机浏览器
手机分辨率
电脑浏览器
电脑分辨率
这四个要素纠结在一起,错误情况排查情况加多
如果能真机测试与修改,那么肯定能节约时间,能够即时从手机端看出代码问题,加快开发的开发精度.
今天我就在萧大群的帮助下习得真机测试的技能,在这里以飨各位
首先最简单可行的方法
小苹果法
0. node npm install weinre
// 网页远程调试用的东西
1.下载安装 http://xbole.com/
//一个叫小苹果的软件
2.打开启动
//看上面的网站,里面有图文(当时没告诉你第0步)
3.node文件安装目录下启动cmd（方法：进入目录后按shift点右键）
4.cmd 中贴入代码 node.exe node_modules\weinre\weinre --boundHost -all-
//启动 weinre
5.将 配置代码 贴入index.html头部
<script src="file:///C:\Users\sshss\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://192.168.31.217:8080/target/target-script-min.js#anonymous"></script>
//这个代码是代表配置的服务器ip 端口 192.168.31.217:8080 所以这个是要改的,具体看网站
6.手机访问 192.168.31.217:8080
//这是实例,具体操作看ip 与 端口
7.进入调试
在weinre上操作,能看到手机上的页面就可以操纵
上是如果小苹果是能正常创建服务器的基础上
但是我家笔记本就不正常
所以折腾了一些东西
1,使用python 的创建本地服务器
里面有一个坑,python 安装一定要 点选 add path 的选项
2,在项目启动cmd（方法：进入目录后按shift点右键）
3, 运行 python -m http:server
如果报错,可能是你安装的是//假python
一定要三代目的python
一定要在第一步点了路径
4,获取 python给的端口 如 8080 (cmd ipconfig 查看 ip 地址)
5 重新回到小苹果的第五步 调端口代码
6 远程调试
ps
对了 本地服务器有个坑,就是相对路径出错 例如: /excemple/css
服务器找不到路径,
可以直接改成 ,excemple/css,把相关放在项目目录下
手机浏览器
手机分辨率
电脑浏览器
电脑分辨率
这四个要素纠结在一起,错误情况排查情况加多
如果能真机测试与修改,那么肯定能节约时间,能够即时从手机端看出代码问题,加快开发的开发精度.
今天我就在萧大群的帮助下习得真机测试的技能,在这里以飨各位
首先最简单可行的方法
小苹果法
0. node npm install weinre
// 网页远程调试用的东西
1.下载安装 http://xbole.com/
//一个叫小苹果的软件
2.打开启动
//看上面的网站,里面有图文(当时没告诉你第0步)
3.node文件安装目录下启动cmd（方法：进入目录后按shift点右键）
4.cmd 中贴入代码 node.exe node_modules\weinre\weinre --boundHost -all-
//启动 weinre
5.将 配置代码 贴入index.html头部
<script src="file:///C:\Users\sshss\AppData\Local\Temp\%W@GJ$ACOF(TYDYECOKVDYB.pnghttp://192.168.31.217:8080/target/target-script-min.js#anonymous"></script>
//这个代码是代表配置的服务器ip 端口 192.168.31.217:8080 所以这个是要改的,具体看网站
6.手机访问 192.168.31.217:8080
//这是实例,具体操作看ip 与 端口
7.进入调试
在weinre上操作,能看到手机上的页面就可以操纵
上是如果小苹果是能正常创建服务器的基础上
但是我家笔记本就不正常
所以折腾了一些东西
1,使用python 的创建本地服务器
里面有一个坑,python 安装一定要 点选 add path 的选项
2,在项目启动cmd（方法：进入目录后按shift点右键）
3, 运行 python -m http:server
如果报错,可能是你安装的是//假python
一定要三代目的python
一定要在第一步点了路径
4,获取 python给的端口 如 8080 (cmd ipconfig 查看 ip 地址)
5 重新回到小苹果的第五步 调端口代码
6 远程调试
ps
对了 本地服务器有个坑,就是相对路径出错 例如: /excemple/css
服务器找不到路径,
可以直接改成 ,excemple/css,把相关放在项目目录下
8 个评论
腾讯出了个wetest,不过收费。云真机测试！
纳尼
是的（还是我给你楼上推荐的
不行
