关于安卓app的webview设置本地代理以及webview开发环境的搭建

场景

公司安卓app的技术栈是原生安卓（java）+ webview（vue-cli），后台服务是用py写的。 由于我之前没接触过app的开发，作为一个前端要怎么调试webview呢? 如果你是一个前端或者刚入门前端的安卓工程师，正苦于调试安卓h5混合开发的app应用，不妨可以看看这篇文章 了解了一下安卓的开发，发现安卓的包里只配置了两个url，一个是webview的url，另外一个是后台接口服务的url
如果我能将webview映射到我本地，那开发起来也方便多了。
也就是说关于页面的webview从我本地拿，后台服务还是从服务器拿。
有了这个想法，就可以开始动手了。

思路

1. 本地起一个提供webview的服务器（这个通过webpack的dev-server就可以了）
2. 在手机里面设置代理，将webview的url代理到我电脑的webview服务端口

步骤

经过本人的尝试，步骤如下......

Step1 . 配置fiddler

目的是让手机能访问到电脑的端口

1. 打开fiddler , Tools--options,如下
   设置完最好重启一下fiddler
   勾选上allow remote computers to connect(允许远程连接)，默认端口为8888，也可以更改成其他，确定保存
2. 手机连上和电脑相同的wifi,保证在同一个局域网下，打开手机的wifi设置，代理--手动--服务器为局域网的ip，可以在电脑上命令行输入ipconfig找到，端口设置为8888（fiddler监听远程连接的端口）。这个时候，打开你手机的app，访问网络，就会发现fiddler开始刷数据了
3. 将app的域名代理到本地，在通过nginx转发到我们本地的webview端口
   修改hosts，如 127.0.0.1 xxx.xxx.com
   配置nginx，监听app请求webview的域名和端口，代理到本地webpack起的服务的端口；
   监听app请求后台服务的域名和端口，代理到相应服务器

4. 使用chrome调试：首先把设备连接到电脑，打开chrome浏览器，地址栏输入chrome://inspect，然后打开手机里面的app，devices下面就会出现一些链接，如图
   点击inspect就可以实时调试啦。
   注意：点击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就会发生变化了

转载于:https://juejin.im/post/5b2cfa9b51882574e202bbc9