移动端Web系列2 --- 调试

浏览器调试

• chrome（V35.0.1916.153）
  使用chrome deleloper tool模拟移动设备。注意，部分功能还是与真机有差别，所以还是建议开发完成后在真机中看一下效果。
  打开方法

  • 调出开发者工具（MAC: cmd+opt+i / WIN: F12）
  • 点击show console（MAC: Esc）
  • 选择Emulation，选择需要的device/user Agent等参数

• Firefox (V30.0)
  我平时没用FF开发。部分细节不是特别熟悉。
  好像这个没有对手势等的支持。

  打开方法：

  • 工具 - Web开发者 - 响应式设计视图

• safari
  Develop - User Agent。
  我只在数据线连接 iphone 的调试的时候用的比较多。 这个下面会讲到。

设备调试

• IOS设备远程调试（MAC）

  • IOS中设置safari高级选项中开启Web检查器
  • IOS设备通过数据线连接MAC
  • IOS safari中打开页面
  • 打开桌面版Safari，点击开发菜单，选择你调试的设备名，选择调试的网页
  • 可看到类似Web的调试界面。具体功能再自己琢磨好了

• Android设备远程调试（MAC/PC）

  • 开启系统设置中USB调试（开发人员选项）
  • 开启桌面Chrome设置中的USB调试选项
  • 手机chrome浏览器中打开相应的网页
  • 桌面Chrome可看到对应打开的页面选项
  • 备注： 网上的ADB插件，貌似在最新版本chrome中可以不用的

• 移动设置 UC浏览器

  • 参见官方文档

模拟器

没尝试过。

其它

• 二维码扫描，真机测试。可使用插件生成二维码。
• 同网络中，ip地址访问（注意引用资源路径，也需做相应转换）
• weinre,MIHTol等，现在基本不在使用了

写在最后

还有更高效的方法的，欢迎继续做补充。