做移动端h5的页面 ,最烦人的估计是测试部分了,尤其麻烦的是针对微信页面的测试。怎么快速测试移动端页面,快速有效的完成工作任务,就变得非常重要,下面小编简单介绍下各种测试移动端的工具,可以愉快的解决上面的烦人问题。
工具/原料
1
电脑、手机
2
谷歌浏览器、QQ浏览器、微信开发者工具
方法/步骤
1
方法一,最简单粗暴的方法当然是直接拿起手机,输入测试地址或者扫描二维码直接测试移动端页面啦。但这种方法很难发现问题是什么引起的,也没办法直接看当前代码的运行情况。当然如果是内部网络地址还需要找运维开通wifi等网络权限才能查看页面(不可能每次都传到外网去)。
2
方法二,下载QQ浏览器,安装微信调试工具(直接在浏览器右上角点击“三”小按钮,进入应用中心,搜索微信调试工具,在结果中直接点击安装改工具即可),点击右上角带个黑色小工具“微信图标”,鼠标移到网页调试按钮;
3
准备好手机数据线,连接电脑,按照页面调试详细教程(4个步骤)直接操作即可,如图所示;
4
方法三,下载谷歌浏览器,点击浏览器右上角“三”图标,在下拉选项中选择“更多工具”-“开发者工具”,或者直接按F2;
5
在弹出的面板中,选择左上角“手机”图标,浏览器内容即可变成模拟手机模式,如图所示;
6
通过点击模拟手机左上角的图标,还能随意切换iphone手机型号,查看对应型号下页面的展现形式;缺点是不能测试微信的分享部分内容;
7
方法四,下载微信web开发者工具,点击右上角的登录按钮,扫描授权后登录即可测试页面,该工具还可以测试微信的内容分享部分。非常好用,是小编极力推荐的一种方式;
8
各工具各有各的优点和缺点,就看自己的熟悉情况了。
注意事项
小编使用的浏览器都是最新版,可能跟其他版本略有不同。
下一篇:怎么测试web静态页面