移动端调试二三事

最近在做混合app的开发的h5部分，有些时候需要看页面调试的结果，同事告诉我用chrome调试的时候我是很懵逼的，我以为是直接把打包后的页面用浏览器打开，因为app需要登录信息才能完整显示一个单页面应用的逻辑，有的时候还要和native做事件处理。
后来经过同事指教和查询资料，算是有了些看法。
首先，需要一部安卓设备和一台PC（mac的部分后续再讲），下载后驱动连接上，打开这样一个地址，安卓设备打开调试模式。
chrome://inspect/#devices

屏幕快照 2018-07-14 下午11.46.10.png

devices下面可以看到你的设备的名称以及当前打开的html页面，点击inspect，就可以进入下面的调试模式了

屏幕快照 2018-07-14 下午11.37.30.png

注意上面有个浏览器地址，也是编译出来的html文件的相对文件地址，打包后做替换就可以了，如果不好打开，可以借助一些工具，例如豌豆荚之类的。

PS:不知道是我设备的原因还是mac的原因，调式起来并不流畅，所以还是建议在PC上调试android app
下面说说mac吧，mac上调试ios用自带的Safari就可以了，打开Safari的开发模式，同时给手机上的Safari做如下设置就可以调试iPhone了。

WechatIMG1.jpeg

至于mac调试android机就得下载adb了，最傻瓜的办法就是下载android studio 这个集成工具，也可以用命令行（前提是安装了homebrew），但是ios的文件系统没有暴露，调试起来确实没有安卓连接pc那样方便，因为可以只调整一部分。

brew cask install android-platform-tools

移动端开发遇到的问题还会有很多，后续也会记录下来一些代表性的问题。