晓风博客

一片荒芜的地方

微信调试的那些事

微信内调试这件头疼的事情终于有一些靠谱的解决办法了。

最开始,我是用 UA 来调试的,当然只能调试一些你自己针对微信写的东西,比如针对微信的分享提示之类的。自从 微信JS-SDK 发布后很多时候都有点无能为力的感觉。因为不好调试的原因经常和微信大干到半夜。为了以后不再大干到半夜 (≧∀≦) 总结经验给自己,也给需要的人。

在开始总结之前先说重要的,微信文档看三遍,微信文档看三遍,微信文档看三遍。

如何区分微信浏览器?

1
2
3
function isWechat() {
  return /micromessenger/i.test(navigator.userAgent);
}

如何在桌面浏览器中模拟微信?

参考我之前写的文章 使用Chrome模拟微信浏览器

如何调试微信JS-SDK?

1. 通过官方的debug 参数

1
2
3
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
});

2. 通过 host 文件替换域名,本地代理调试

微信是有 JS接口安全域名 限制的,所以想要本地调试最重要的是解决这个问题。具体在 右上角公众号名称-公众号设置-功能设置里面。

想要把域名映射到本地显然是改 host 文件方便一些,因为你不太可能把线上的域名改成本地,虽然有三个可以改。

Mac 下修改host sudo vi /etc/hosts

改完 host 之后你还需要做代理。因为你的手机并没有改 host ,所以你需要在手机上设置电脑为代理。然后手机通过代理访问走 host 映射到本地。这件事情可以用 NProxy 来做。当然这是 Mac 下的解决方案,如果你是 Win 自然是功能强大的 fiddler 来做这件事情比较好(虽然我也没用过)。

NProxy 安装并启动后,在手机上设置代理。IOS 下是在 wifi 右边的感叹号,最底下输入。通过这两部就可以本地调试微信 JS 了。

服务器端的微信接口?

微信有一个测试号专门用来调试、解决这些问题。测试号相当于一个临时的公众号,把程序调试开发完毕后再换成你真正的公众号配置。 微信测试号平台地址

这种测试方法如果想测试本地的应用有个问题就是外网怎么访问本地应用,类似于花生壳的意思,不过推荐使用 ngrok 这款牛逼哄哄的东西。方便简单,支持 https,就是速度没有改host的方法快。

到此为止我们至少有两套方案可以测试,改 host 的方法不走外网,速度快。ngrok 配合官方的工具功能强大但速度有时候很慢。

一些问题(Ruby on Rails用户)

我是 Rails 用户,本地 host + 代理还是要在域名后跟端口号。而 Mac1024 以下的端口都需要 root 权限。即便你可以 root 运行也会发现有很多配置有问题了,比如 PG

对于 rbenv 用户来说推荐使用 rbenv-sudo 来解决需要使用 root 权限来运行 Ruby 的情况。安装好 rbenv-root 后… 对于我这种懒人… ~/.zshrc sudors () { rbenv sudo rails s -p 80 -b 0.0.0.0 }

针对 PG 报错你需要编辑 config.yml 给数据库指定用户名。

root 运行过后普通权限下 rails 启动报错,很可能是缓存文件是由 root 用户创建而普通用户无法读取导致的。用 root 权限删除缓存即可sudo rm -rf ./tmp/cache

如果 Rails 已经启动本地可以访问但局域网其他设备无法访问,你需要指定运行的 IP 为 0.0.0.0 rails s -p 0.0.0.0

说了那么多,说好的调试呢?

微信内没有 console 没有 Devtools,样式错乱,JS 报错根本不知道有木有!

如果 Chrome 的开发者工具可以运行在微信里就好了,然而… 这个东西确实有!

weinre WEb INspector REmote 一款在 Chrome 里调试 Android、IOS 网页的东西,不管是哪家的浏览器,还是 webview ,通吃。

npm -g install weinre

weinre --boundHost 0.0.0.0

然后在你的项目里引入 weinre 的一个 JS 文件就可以用了。需要注意的是引入的时候地址应该是 http://192.168.1.*/xxx.js 这样的局域网可访的地址。那么问题来了,局域网 IP 怎么查… Mac 下最快的方法,按住 option 点 Wifi 图标。(感谢 MacTalk

还有没有更方便的东西?

当你想用手机访问电脑本地服务器的时候你会怎么做?

看今天的局域网 IP 多少,然后从 QQ 或者微信里拼好要访问的链接地址,发过去,如此反复。

不知道多少喝咖啡陪女朋友的时间都没了。

Geek 就是要动手解决痛点,URL2QR 你需要这么一个插件。

Chrome 商店安装

这个屌插件是怎么写的?

说了这么多,以后应该或许再也不用担心微信调试了吧。但愿如此,细心认真扩展思路还是排除 Bug 最快的方法。

The End .

头图来自 dribbble@Valentin Kirilov 侵删

阅读更多