h5与安卓和ios调试

作混合式开发的前端确定都遇到过，本身在本地写好的页面，模拟器上也调试好了，为何到了客户端上就出了问题呢？那出了问题该如何调试呢？我总结一下我曾经用到过的方法，可能不是特别全面，但确实在工做当中应用的还能够，若是还有其余方法，欢迎小伙伴们底下评论。

通常来讲对于h5与真机或模拟器连调的方法最直接简单的就是安卓用chrome，ios用safari，若是在其余状况下能够借助windows下用fiddler,mac下用charles来替换咱们须要调试的文件。

下面来细说一下：

与安卓调试

首先须要测试机开启use调试，而后在代码中加上一行

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}
复制代码

在咱们本机电脑上打开chrome,输入chrome://inspect 在

中若是以上步骤都完成，在测试机中打开咱们要调试的界面就能够看到提示，点击进入若是出现一片空白，是由于chrome须要从https://chrome-devtools-frontend.appspot.com资源，这时候咱们须要翻下墙，以后就能够像咱们用chrome调试代码同样能够单步调试，查看css,js文件，可是有一点，若是须要修改的话就要在安卓本地修改再次运行。 固然还有一点，若是端上访问的路径是远程的，那么就能够灵活修改。

与ios调试

与ios调试那么就借助safari浏览器，测试机开启web检查器以后safari浏览器再设置菜单栏显示开发模式，就能够打开咱们要调试的界面在safari中，进行单步调试。

目前这两个是在真机中，若是咱们页面在其余地方调试，能够借助fiddler和charles将本地文件替换远程文件，来进行操做。

使用fiddler

因为我本人用的是window,因此对于fiddler比较熟悉

若是以https开头，那么装个扩展插件CertMaker for iOS and Android

在fiddler中,打开Tools中的

将端口号改成8888,将allow remote computer to connect选中,将咱们手机上的网络设置为代理，将autoResponder中的标签选中，点击add rule添加要替换的文件,

分别填写源地址和本地的目标文件，点击保存后，在本地调试的结果就能够在远端显示。 另外在fiddler中也能够查看源码，安装一个扩展:Syntax-Highlighting Add-Ons,

点击右侧至关的功能标签，便能查看，不管是html,json,xml,cookies都有提供。

使用charles

Charles也有map功能，在Tools的

进入相应的设置界面， ytk1.yuantiku.ws的请求重定向到线上服务器www.yuantiku.com