做混合式开发的前端肯定都遇到过，自己在本地写好的页面，模拟器上也调试好了，为什么到了客户端上就出了问题呢？那出了问题该如何调试呢？我总结一下我曾经用到过的方法，可能不是特别全面，但确实在工作当中应用的还可以，如果还有其他方法，欢迎小伙伴们底下评论。
一般来说对于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
