chrome devtools调试Android Webview再也不FQ了！URL映射 + appspot devtools镜像解决chrome调试安卓前端HTML5页面时白屏的问题

在安卓上进行移动端HTML5网页、Javascript或者Hybird App架构的调试，都离不开chrome强大的devtools inspector工具。然而，这个inspector工具，需要每隔一段时间（估计是定期更新的原因）在线连接appspot.com这个域名的网站，下载一系列文件才能使用，如果不能连接就是一片白屏。而且这个过程是区分手机的，不同的手机可能需要分别进行下载。

安卓，谷歌的东西，手机系统的霸主。Chrome，也是谷歌的，优越的浏览器。然而，在天朝因为众所周知的原因，谷歌被拦在了长城之外。appspot.com正是被墙的谷歌域名之一。于是问题来了，苦逼的开发人猿、程序猿们，为了使用chrome devtools进行各种涉及到移动端浏览器的开发，就必须经常性需要翻-墙连接appspot.com（https://chrome-devtools-frontend.appspot.com/）。而正常情况下公司内部是不能翻-墙的！怎么办？

我本人也正是被这样的困局困扰了好久，为这个耗费了大量的时间，公司很多人也都是这样。为了解决这个问题，我尝试了各种方案，最终才找到了这个解决的办法。

 

解决的原理，总的来说就是提供URL映射 + appspot devtools镜像，利用http代理来重定向chrome对appspot.com的请求，然后将我们自己的devtools镜像的内容返回给chrome浏览器。步骤如下：

 

1、制作本地镜像：

牛B的chrome devtools是用html5+javascript实现的。我们可以利用HTTP代理工具（mac系统用Charles，windows系统就用Fiddler2）或是网络抓包等方法，把appspot的内容保存下来作为本地镜像。方法：在任何能连接appspot.com的环境中，开启工具程序，连接你的手机，然后用chrome进行inspect调试，然后你就会在HTTP代理工具中看到刷刷刷的appspot.com下载记录，等它完成后再把它从代理工具中保存下来，一共上百个文件，保存到本地作为一个镜像。注意这个过程是区分手机的，不同的手机需要保存不同的镜像文件。如果没看到下载记录，那是这台电脑有缓存了，换一台。我本人手机的数据，把它传到了自己的网站空间里面：http://www.hz300.com/serve_rev，要是下载不了appspot镜像可以试下这个。（因为appspot.com是https的，而我用的空间只能是http的，所以没法直接做url映射来使用，要不下面的第2步就省掉了）

 

2、搭建https服务：

我们需要在本地localhost或者是公司其他电脑启动一个https服务，将上面的镜像文件夹作为根目录。各种做https服务方法：appache、iis、nodejs都可以。我现在做前端，就用的是nodejs server。搭建https比较繁琐的是制作证书，以及解决证书的信任问题，比较麻烦，这里不赘述。这个服务是可以多人共享的，一个公司搭建一个就行了。

有一个问题要处理的是：为了避免文件夹名称改变，镜像文件夹中的“@xxxxxxxxx"文件夹可改名为"@"。然后，请求的地址是https://chrome-devtools-frontend.appspot.com/serve_rev/@xxxxxxxxx/yyyyyyy.zzzz，需要把请求的url中的xxxxxxxxx替换掉，变成https://chrome-devtools-frontend.appspot.com/serve_rev/@/yyyyyyy.zzzz。当然，如果你可以把你要用的每一个你要用的手机型号的镜像都下载下来，就没有这个必要了。

 

3、进行URL映射：

办法很多，这里用http代理程序来做。启动http代理程序，设置将chrome-devtools-frontend.appspot.com的https请求全部转到第2步搭建的本地的https服务上。mac系统用Charles的Remote mapping或是DNS映射，windows系统就用Fiddler2的自动响应。

或者用用修改hosts配置直接实现URL映射，更简单，但chrome有个DNS缓存问题，需要清除缓存：chrome://net-internals/#dns。

 

至此，打开chrome的inspect，原来的白屏应该就能出现调试界面了。chrome每次能缓存一段时间（大约2、3周），然后又白屏，那就再搞一遍好了。