最近在做混合app的开发的h5部分,有些时候需要看页面调试的结果,同事告诉我用chrome调试的时候我是很懵逼的,我以为是直接把打包后的页面用浏览器打开,因为app需要登录信息才能完整显示一个单页面应用的逻辑,有的时候还要和native做事件处理。
后来经过同事指教和查询资料,算是有了些看法。
首先,需要一部安卓设备和一台PC(mac的部分后续再讲),下载后驱动连接上,打开这样一个地址,安卓设备打开调试模式。
chrome://inspect/#devices
devices下面可以看到你的设备的名称以及当前打开的html页面,点击inspect,就可以进入下面的调试模式了
注意上面有个浏览器地址,也是编译出来的html文件的相对文件地址,打包后做替换就可以了,如果不好打开,可以借助一些工具,例如豌豆荚之类的。
PS:不知道是我设备的原因还是mac的原因,调式起来并不流畅,所以还是建议在PC上调试android app
下面说说mac吧,mac上调试ios用自带的Safari就可以了,打开Safari的开发模式,同时给手机上的Safari做如下设置就可以调试iPhone了。
至于mac调试android机就得下载adb了,最傻瓜的办法就是下载android studio 这个集成工具,也可以用命令行(前提是安装了homebrew),但是ios的文件系统没有暴露,调试起来确实没有安卓连接pc那样方便,因为可以只调整一部分。
brew cask install android-platform-tools
移动端开发遇到的问题还会有很多,后续也会记录下来一些代表性的问题。