猪小花1号

个人签名

282篇博客

微信H5调试隐藏秘籍

猪小花1号2018-08-31 12:40

作者:丁兴华


前言

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

  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

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