方永、南天紫云

道亦有道

微信调试的原语
2016年10月12日

在微信中嵌入的网页,比如公众号的页面,如何查看日志,如PC浏览器一般调试页面?

有同事发了一个二维码,在微信里打开后就跳转到了一个调试页面。如下图:

一个名为“X5调试页面”的页面,http://debugx5.qq.com/,搜索后发现微信的webview引擎基于TBS(腾讯浏览服务)。 在这个调试页面“代理”一栏的最下方,有文件缓存清除功能,这是许多人寻找的微信清除缓存的功能。

而在“信息”一栏,TBS settings里的选项“是否打开TBS内核Inspector调试功能”,这又是一个非常重要的功能,选择开启,然后配合adb就可以在chromechrome://inspect/#devices里看到需要调试的页面了。

然后用这个inspect调试一把http://debugx5.qq.com/,会看到这个页面的源码,js的注释里有写用的是js2java实现了javascript调用android的native code的功能, 看缓存清理的按钮,click事件关联到了一个叫clearCookieAndCache的全局函数,在控制台查看这个函数,如下:

	function clearCookieAndCache() {
        var cookiechecked = document.getElementById("id_clearcookie").checked;
        var filecachechecked = document.getElementById("id_clearfilecache").checked;
        var adfiltercachechecked = document.getElementById("id_clearadfiltercache").checked;
        var dnscachechecked = document.getElementById("id_cleardns").checked;
        
        var clearItems = (cookiechecked ? 1: 0)  + ( filecachechecked ? 2 : 0 )+
            (adfiltercachechecked ? 4 : 0) + (dnscachechecked ? 8 :0) ;
        if(clearItems == 0)
        {
            resultTips("请选择需要被清除的选项。", 1000);
            return ;
        }

        window.ProxyStatus.clearCookieAndCache(clearItems);
        resultTips((cookiechecked ? "[Cookie] ":"") + (filecachechecked ? "[文件缓存] ":"") +
                (adfiltercachechecked ? "[广告过滤缓存] ":"") + (dnscachechecked ? "[DNS缓存]" :"")
                + "被清空。" , 1000);

        document.getElementById("id_clearcookie").checked = false;
        document.getElementById("id_clearfilecache").checked = false;
        document.getElementById("id_clearadfiltercache").checked = false;
        document.getElementById("id_cleardns").checked = false;
    } 

核心代码window.ProxyStatus.clearCookieAndCache(clearItems);一句,ProxyStatus应该就是Native code暴露给js的,控制台 查看这个对象,拥有的方法挺多,都是可以望文生义的。

如此,就能知道,凡是基于tbs的webview,应该都会有ProxyStatus这个对象,在自己的页面里对ProxyStatus的方法进行调用,就 可以完成清除缓存之类的操作。(这个没有实验)