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开头，那么装个扩展插件

在fiddler中,打开Tools中的

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

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

点击右侧相当的功能标签，便能查看，无论是html,json,xml,cookies都有提供。

使用charles

Charles也有map功能，在Tools的

进入相应的设置界面，