Mac OS X EI Capitan 下调试 Android 微信内嵌网页

做微信开发的朋友一定遇到过这样的问题,在电脑上测试正常的网页到微信里面就出错了,不知道原因只能使用排除法一点点的排除,因为微信客户端无法输出浏览器中抛出的异常信息,对我们开发带来了很大的问题。

在网络上搜索了一些方法,基本上都是从一个出处复制出来的,比如 http://www.jianshu.com/p/ccf124f1f74b,里面写的比较详细,但是我再部署过程中还是遇到了很多问题,所以这里特意记录一下分享给大家。调试原理我就不再赘述,上面给出的文章链接已经写的非常清楚了。只传一张调试原理的图。

326507-590b84de3dc09486

删除微信默认 TBS

打开微信,在任意对话中,输入 //deletetbs 后发送,发送后没有任何提示的,可以再输入 //gettbs 查看当前情况。

//deletetbs

EE1C5972797EF4FAD596E5F1B2A40BD2

//gettbs

BD22D6F2AC3B582BC6BDEDE7561BCEB2

手机中安装 TbsSuiteNew.apk

下载地址:http://res.imtt.qq.com/tbs_inspect/TbsSuiteNew.zip

你可以在 Mac 上下载好并解压出来,然后用 Mac QQ 给你手机 QQ ,手机 QQ 接收以后直接下载安装就可以了。

01D4887BA7DDE79034FB3EE816C87EAA

8B51BC285D11E13E25C03A26F08DCB6A

点击安装后,桌面会出现一个 TBS工具集 代表已经安装完成。打开刚安装好的 TBS工具集 选择 安装本地TBS内核

FC3A2B1C1ABDCC7DB6AC5AABE092D135

点击 安装TBS

25DC8FB14EB8357A46C8D1463AF75F0E

安装完成后提示需要你打开应用,并在应用里面打开一个内嵌的网页,点击 启动应用,打开网页 按钮后,会自动弹出微信界面。你只需在微信里面随便找一个公共号点一片文章或者一个网页进入等待就可以了。我随便找了一个内推网的页面进去,等待了 1 分钟。

1C65B19C7C94F443E3D2D569B3529402

此时 TBS工具集 页面已经开始倒计时了,当倒计时结束时,按钮会变成 检查是否安装成功

3322117B04372A688CAA7EC230430A73

点击 检查是否安装成功 按钮后如果安装成功,那么按钮名字会变成 安装完成,请重新启动应用以应用新内核

071279D4CFBDCF42C374E19206B9CA1B

点击 安装完成,请重新启动应用以应用新内核 后会跳转到系统结束任务的界面,点击结束微信任务后,重新打开微信即可。

3A5809B62F0B43A5F6648093ED527D5C

安装 ADB

到安装官方网站下载 Android SDK,下载地址:http://developer.android.com/sdk/index.html#Other

屏幕快照 2015-11-26 下午1.13.28

下载完成后解压出来,我把它放到了 /Users/myCode/Project/android-sdk-macosx 目录下,运行 android-sdk-macosx/tools 目录下的 android

屏幕快照 2015-11-26 下午1.23.21

此时会提示你没有安装 Java,如果你是 Mac OS X EI Capitan 的情况下,即使下载了 Java 官网最新的安装包依然无法解决问题的,你需要下载特定版本的安装包,参考资料

Java For Mac OS X EI Capitan:https://support.apple.com/kb/DL1572?locale=zh_CN

下载完 Java 安装,然后再运行 android-sdk-macosx/tools 目录下的 android 会弹出如下界面。选择 Android SDK Platform-tools 并点击 Install Packages 按钮。

屏幕快照 2015-11-26 下午1.21.26

屏幕快照 2015-11-26 下午1.40.26

安装完成后,Android SDK Platform-tools 就显示为 installed 状态了。

屏幕快照 2015-11-26 下午1.40.56

同时,在 android-sdk-macosx/tools 目录下会生成一个 platform-tools 的文件夹。

屏幕快照 2015-11-26 下午1.42.58

我们需要把这个目录添加到系统的环境变量中,终端下输入 vi ~/.bash_profile,打开终端的用户配置文件,在最后面追加如下两条信息。请一定注意要换成你自己的路径。

export ANDROID_TOOLS=/Users/myCode/Project/android-sdk-macosx/platform-tools
export PATH=$PATH:$ANDROID_TOOLS

屏幕快照 2015-11-26 下午1.46.33

添加完成后执行以下刷新用户配置文件的命令 source ~/.bash_profile,然后重启 ADB

adb kill-server
adb start-server

安装 Python

Python 官网下载 Python 安装包,我下载的是 3.5.0 版本。

Python 官方网站:https://www.python.org/

屏幕快照 2015-11-26 下午1.49.19

安装过程非常简单,就不多说了。确保命令行下执行 python 可以运行 python 命令行即可。

屏幕快照 2015-11-26 下午1.51.04

Python 启动调试服务

下载 wx_sq_webview_debug。

下载地址 wx_sq_webview_debug:http://res.imtt.qq.com/tbs_inspect/wx_sq_webview_debug.zip

这一步是最坑的,我下载完成后解压 wx_sq_webview_debug.zip 就变成了 inspector_client20150401.zip.cpgz,怎么也打不开。网上查了查不是说文件损坏就是下载不完整等等,最后下载了一个名为 Unarchiver 的解压工具,用它一键搞定。

屏幕快照 2015-11-26 下午1.55.06

解压完成后,在命令行下切换目录到解压出来的 inspector_client20150401 目录。

屏幕快照 2015-11-26 下午1.57.37

在该目录下执行如下命令,注意路径!

python ./inspector.py --adb /Users/myCode/Project/android-sdk-macosx/platform-tools/adb

屏幕快照 2015-11-26 下午2.18.03

可能遇到错误 device unauthorized. Please check the confirmation dialog on your device. 请在你自己设备上同意usb调试。

如果没有问题,此时调试环境已经启动了,下一步就是连接手机调试了。

数据线连接手机进行调试

将数据线连接到电脑后,从手机的微信中打开一个公共号内嵌的网页,然后再电脑的 Chrome 浏览器中,输入 http://localhost:9222/ 会显示如下界面。你微信中打开了什么网页,这里就显示该网页的 Title。

屏幕快照 2015-11-26 下午2.16.49

点击进去以后,就可以看到针对该网页的强大的调试工具啦。

屏幕快照 2015-11-26 下午2.17.26

2 comments

评论