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

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

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

fdf0356e33f62009a7fc62d0303637e0.png

删除微信默认 TBS

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

//deletetbs

8eac26be12dee12825846423633bf659.png

//gettbs

2df47dbe5913230ef035f5a98f29efa4.png

手机中安装 TbsSuiteNew.apk

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

3b80767e6dd334c956fb06ca4bd5764f.png

4394a43906f53ec14d658c0ac064b9bf.png

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

8e842b745bfbd46c07a186635334254b.png

点击 安装TBS

c3fc5f5d60f36dcd24fba7a50a15157c.png

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

5244a02c7355318021b6af18c5d2db08.png

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

99d46aa05628c62d69d54885be03d095.png

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

e56c70bc7660063cf155c621da808d00.png

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

a1f7d3365685e86107d19b0ab3449993.png

安装 ADB

50d9bbc35366bc9e675381a8f548f141.png

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

49409bffd6deb4894674cb9fc146876b.png

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

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

0ab3d26bd27a6134404b6a309c1ada0e.png

576aea8a844f8265c15c54d144d72ec5.png

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

56d11e5f80421ed0be1fcb60d423ae68.png

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

9519ed628b736d246691bcfca077d5e0.png

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

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

export PATH=$PATH:$ANDROID_TOOLS

3205db0db921ab3187b5ff9df5f42a8b.png

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

adb kill-server

adb start-server

安装 Python

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

7f44a7ed929223523f8652aaacb734aa.png

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

624a5d753a87ddbe65927bfcd0906ac1.png

Python 启动调试服务

下载 wx_sq_webview_debug。

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

688cfd211eb81c2aa6ee5a7b8aa7d58b.png

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

85f1e365520ca9e4e80621adceffbeb7.png

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

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

31d5ce5d977643f4b02e79b56eff099e.png

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

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

数据线连接手机进行调试

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

dc64ceba40abfec5ea719f135c3fd179.png

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

f49adc1769b13921a417e23a908c50ca.png

相关

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值