前言
在做APP开发时，为了增加功能的灵活性、便即时更新内容和减少客户端开发人员的工作量不免要嵌入许许多多的H5网页，这就是我们通常所说的Hybrid APP开发。在这过程中，我们经常要对h5里面的js及html代码进行调试，如果我们用最傻瓜式的方式来调试可以使用js的alert把想要调试的内容打印出来。但这种方式非常不灵活也不便于即时更新代码进行调试。
推荐的最有效的几种方式如下：
一、让APP客户端建立类似浏览器的原生页面用于本地测试
可以支持输入任意地址，然后webview打开相应的地址。本地测试链接地址如：http://192.168.x.x:8080在webview中打开本地页面进行自定义的各种js接口测试及页面测试。此方式优点是非常灵活，能满足大部分的应用场景。缺点是要使用完整的url，如果要结合页面参数的话，要结合抓包工具一起使用更佳。
二、使用流行的移动端辅助调试工具（如vConsole）
这种调试工具非常灵活，对于单页面程序如（vue.js，react.js或者ng都非常好用）。因为vConsole直接是注入了console.log里面的，直接可以在vConsole上面看到console.log出来的内容，跟chrome的F12调试工具使用相像。
三、使用抓包工具如，fiddler进行捉包调试
对于已经布署上线或者到测试包的一些页面，可以使用fiddler等抓包工具把页面进行代理后，进行灵活调试。可以代理整个页面，也可以代理单个js文件，用本地js文件来调试。优点是结合数据请求接口一起调试，可以顺带检查接口返回的数据是否正确，非常方便。缺点是使用起来相对比较麻烦一点，每次都要配置抓包地址，因为本地环境的局域网ip经常变化，所以每次使用都要重新配置ip地址；而且因为工具本身是英语版的，需要一点英语知识。
使用fiddler可能遇到的问题（可自行百度解决）：
１、https抓包不了需如何配置？
２、tunnel to 403，如何配置？
３、js、css静态资源捉不了包，判断是否是APP缓存问题，清缓存解决
４、设置 autoresponder 使用本地文件代理文件请求
５、修改接口请求的数据及响应的结果数据
四、使用Chrome DevTools对WebView进行远程调试
这种方式需要翻墙，暂不推荐，而且以前使用时界面坑比较多，而且很容易出现手机跟电脑断开连接的情况，配置其实也不复杂，有兴趣的朋友可以自行百度进行设置。
五、自行连接服务器修改代码实时调试
这种方式适合一种情况，就是你有权限直接访问服务器。如直接使用xshell去连接linux服务器，可以直接修改php或者js代码实时在APP上面看到页面效果。
总之
上面的几种方式可以灵活结合使用，看实际场景灵活变通。
扩展
前端 / js 代码调试其他通用方式：
单步调试，console.log，console.time / console.timeEnd，console.warn，debugger，vConsole，Vue、React、Webgl 的 Chrome 插件，抓包工具，throw new Error('...')、SyntaxError、TypeError、RangeError、EvalError、URIError、ReferenceError
