微信H5调试隐藏秘籍

作者：丁兴华

前言

调试本来就是个麻烦的事情，移动端更甚，手机中的微信更更甚。以至于每次开发不得不面临的几大难题：

1. 微信你在干啥
2. 浏览器你怎么想的
3. 操作系统你是不是有病

应用场景

槽点太多，本文先关注微信。当产品在开发或上线阶段时，总会有一些问题陆续暴露出来，这时候如何排查并修正？一般来说，服务端代码中会加入一些日志来排查问题。那么前端的日志怎么收集展示呢？

前置条件

1. 先打开微信的调试模式 如何打开调试模式

2. 打开后再用微信打开网页 应该看到如图的调试按钮                                               

3. 点击后确保你能看到一个啥也没有的日志展示区                                               

功能原理

微信H5里使用的jssdk 虽然表面上是注入全局对象wx，使用wx.config、wx. previewImage等API。但实际上是用WeixinJSBridge这个内置对象调用invoke方法向特定域发送网络请求然后客户端再拦截这些请求实现通信的（跟稳定又好用的邮箱大师差不多原理）。而我在遍历WeixinJSBridge这个对象时发现有个log方法 *^_^*

使用方法

原理和私有方法扒出来就好办了，简单来说直接

WeixinJSBridge.log("debug test")

就会在微信js日志信息里看到了，如下：

但实际使用中还有其它的小问题

保证时序

wx对象有ready方法可以保证，WeixinJSBridge怎么办呢，貌似并没有直接的办法，可以用：

if (typeof WeixinJSBridge == "object" && typeof  WeixinJSBridge.invoke == "function") {
    //ready callback
} else {
    document.addEventListener("WeixinJSBridgeReady", function () {
        //ready callback
    }, false)
}

这样就可以保证不论微信的jssdk加载在页面逻辑代码之前还是之后都能正常回调，但是如何让各处日志可以无缝对接呢？

方法通用

其实对于js这种灵活的语言，完全可以在确保WeixinJSBridgeReady之后重载一遍console.log方法，具体如下：

if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    setWeChatLog()
} else {
    document.addEventListener("WeixinJSBridgeReady", setWeChatLog, false)
}
function setWeChatLog () {
    console.log = function () {
        Array.prototype.push.call(arguments, new Date().toString()) //顺手把日志时间也加上
        WeixinJSBridge.log.call(this, arguments)
    }
}

//顺便再把全局错误也加了
window.onerror = function () {
    console.log.apply(null, arguments)
}

如果测试想单独用而不麻烦开发去改，也可以直接把以上js用fiddler 或 Charles 注入到页面中，就可以把开发用console.log打的日志显示在微信里啦~~ 这样基本功能就差不多了，结合具体业务再处理下可以做更多方便的反馈。

优势与劣势

优势

调试方便，对于不能inspect的时候直接看日志能省掉不少定位错误的时间。对网络环境没有要求，也不对源码产生影响，可以放心部署到线上产品中去。而且不仅仅是开发者，即使是用户遇到什么问题，也可以直接截图反馈。

劣势

虽然刷新没事，但如果你把页面关了日志就没了。。。其实也没啥，只要后续再搞个线上日志收集系统就可以了嘛~~

PS: 加班出灵感。。。

以上。

网易云大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者万春艳授权发布。