场景
公司安卓app的技术栈是原生安卓（java）+ webview（vue-cli），后台服务是用py写的。 由于我之前没接触过app的开发，作为一个前端要怎么调试webview呢? 如果你是一个前端或者刚入门前端的安卓工程师，正苦于调试安卓h5混合开发的app应用，不妨可以看看这篇文章 了解了一下安卓的开发，发现安卓的包里只配置了两个url，一个是webview的url，另外一个是后台接口服务的url
如果我能将webview映射到我本地，那开发起来也方便多了。
也就是说关于页面的webview从我本地拿，后台服务还是从服务器拿。
有了这个想法，就可以开始动手了。
思路
- 本地起一个提供webview的服务器（这个通过webpack的dev-server就可以了）
- 在手机里面设置代理，将webview的url代理到我电脑的webview服务端口
步骤
经过本人的尝试，步骤如下......
Step1 . 配置fiddler
目的是让手机能访问到电脑的端口
- 打开fiddler , Tools--options,如下
勾选上allow remote computers to connect(允许远程连接)，默认端口为8888，也可以更改成其他，确定保存 - 手机连上和电脑相同的wifi,保证在同一个局域网下，打开手机的wifi设置，代理--手动--服务器为局域网的ip，可以在电脑上命令行输入ipconfig找到，端口设置为8888（fiddler监听远程连接的端口）。这个时候，打开你手机的app，访问网络，就会发现fiddler开始刷数据了
- 将app的域名代理到本地，在通过nginx转发到我们本地的webview端口
修改hosts，如 127.0.0.1 xxx.xxx.com
配置nginx，监听app请求webview的域名和端口，代理到本地webpack起的服务的端口；
监听app请求后台服务的域名和端口，代理到相应服务器
- 使用chrome调试：首先把设备连接到电脑，打开chrome浏览器，地址栏输入chrome://inspect，然后打开手机里面的app，devices下面就会出现一些链接，如图
注意：点击inspect可能出现404或者页面空白，原因有以下两点
1）需要翻墙，有各种翻墙的谷歌插件，可以找找
2）需要手机设置成开发者调试模式
3）需要在代码里面设置webview为可调试模式：if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {WebView.setWebContentsDebuggingEnabled(true); } 复制代码
遇到的问题
webpack的dev-server里面默认会对域名进行限制，加上 disableHostCheck: true 去掉域名的限制
最终的效果
你只需要在你本地修改代码，ctrl+s之后，重新打开app相应的webview页面就能看到修改效果了，也可以到chrome://inspect里面查看
注意
该方法只针对安卓手机，苹果手机不生效
最后，设置完成之后，你就会发现手机里面的app访问的页面跟你本地的页面是一毛一样的，修改页面后你只要重新进入app就会发生变化了