移动端调试

PC端调试两大利器:Firefox的Firebug和Chrome的devtools,有这两个东西PC端的调试基本没有什么问题。但是随着前端的移动开发需求越来越多,移动端的调试也渐渐被大家重视。可是移动端没有像PC那样方便,但是解决方法还是有的。

我大体分三种移动端调试需求:

1.浏览器的页面调试(mobile web page)

1.1 iOS的Safari

手机端:设置 → Safari → 高级 → Web 检查器 → 开。

mac端:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

ios-debugger
ios-debugger
ios-debugger

最后数据线连接电脑和手机或者打开模拟器,Mac里的Safari(如下图)都可以看到连接的设备,点到对应的页面就可以调试:

ios-debugger

1.2 iOS设备模拟器

ios-debugger
ios-debugger
ios-debugger

注:iOS模拟设备里的Safari打开调试模式和上面一样。

以前搞Swift开发时,遇到模拟器无法弹起键盘:

ios-debugger

1.2 Android

直接复制官网的一些调试条件:

  • Chrome 32 or later installed on your development machine.
  • A USB cable to connect your Android device.
  • For browser debugging: Android 4.0+ and Chrome for Android.
  • For app debugging: Android 4.4+ and a WebView configured for debugging.

以上可知不能调试低版本Android或者安装的其它浏览器,解决版本和微信里面相同。

2.微信内嵌页面

调试微信内嵌页和低版本安卓使用weinre

npm -g install weinre

控制台使用下面方法启动:

weinre –boundHost -all-

具体调试方法看官网。

参考:

  1. https://www.smashingmagazine.com/2014/09/testing-mobile-emulators-simulators-remote-debugging/
  2. https://github.com/nupthale/weinre
  3. https://github.com/jieyou/remote_inspect_web_on_real_device
  4. https://segmentfault.com/a/1190000000459296
分享到: