移动端真机调试实战经验
前言
在开发中前端免不了要进行移动端的开发,然而在电脑上看的样式和手机上还是有一定的差距的,因为手机上有顶部的状态栏和底部的菜单栏,特别是在qq内置浏览器中打开,差距还是蛮大的,所以在chrom中模拟手机显示的情况虽然有一定的效果,但是还是不能完全模拟,我们还需要在真机环境下测试。 本文介绍的调试方法有一下几种:
- iphone+safari
- android手机+pc
- 微信开发者工具
- weinre
- 使用webstorm
- 使用Fiddle抓包
这几种方法基本说涵盖了我们平时开发中所遇到的各种情况,各种主流设备都可以覆盖。其中最方便快捷的是使用webstorm自带的服务器,只需要一键就可以~,但是这样只能预览,不能调试。 我个人比较推荐的方法是iphone+safari或者安卓手机+pc的这种方式,比较简单方便快捷,然后根据具体的环境再选择更为合适的调试方法。 目前我认为使用weinre+fiddle是万能的,没有什么调试不了了~但是需要学习的成本也是最高的~ 希望大家都能够写出漂亮的页面,不需要为调试发愁哈~
iphone+safari
之前使用的是mac,所以一直都是用的iphone+safari模拟真机环境,这种方法简单明了,只需要简单的设置一下以后都不要设置,插上数据线,打开mac上的safari就可以了,(๑•̀ㅂ•́)و,✧,但是对设备有要求,必须是iphone+mac的组合
** iphone上设置 **
设置 → Safari → 高级 → Web 检查器 → 开。
pc端safari设置
Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单
设置完之后用数据线连接电脑,然后在iphone上用打开safari需要调试的网址,然后在pc端打开safari,最上面的菜单栏中的“开发”然后就可以看到有iphone设备的名称显示然后就可以看见你在iphone中的safari中打开了哪些网址,之后就和调试网页版的一样了.
** android手机+pc **
安卓手机只需要下载chrom浏览器,就可以再电脑上用chrom调试了,是不是很赞(づ ̄3 ̄)づ╭
- 首先需要装chrom浏览器
- 打开手机的开发者模式,一般是:设置->关于手机->版本号连按5次,之后设置菜单中会多出一个开发人员选项,进入将其中的“usb调试”打开
-
将手机与电脑通过usb连接,弹出对话框“是否允许usb调试”,选择确定
- 在手机chrom上打开要调试的页面
-
在电脑上打开chrom,新开一地址栏为
的页面,然后就可以调试1
chrome://inspect/
- 点击inspect弹出chrom调试工具