找回密码
 立即注册

QQ登录

只需一步,快速开始

微信公众号开发资源

关注:780

所属分类: 微信开发 微信公众号开发资源

本版块为微信公众号开发教程与公众号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[公众号开发博客] 微信浏览器调试页面 - 傻瓜式微信开发教程28 - 耗子原创

[复制链接]
查看: 23845|回复: 11
最佳答案
91 

57

主题

231

帖子

2112

积分

超级版主

Rank: 8Rank: 8

积分
2112
QQ
 楼主| 发表于 2015-11-19 15:06:48 | 显示全部楼层 |阅读模式

在微信浏览中调试页面一直是个痛苦的事情.
之前多数时候只能借助alert调试js流程,
借助http抓包工具查看页面请求的资源.

用过chrome调试器的人都会想如果能用chrome调试微信浏览器将会是多么美妙的一件事.

实际上,在新版本的Android微信上,已经可以实现这个功能了.
但是iOS版本的的微信还没有这个功能.

最简单的方法,直接下载`QQ浏览器`,然后安装`微信调试插件`,
按照指引完成调试工具的配置.
http://blog.qqbrowser.cc/

但是,本着知其然,知其所以然的态度.这里自行实现利用chrome调试微信浏览器.
首先把调试方法的图例给大家看一下
28-1-调试连接实例.jpg

1. 第一步,我们安装`TbsSuiteNew.apk`, 实现对微信浏览器的封装.
官方的下载地址为: http://res.imtt.qq.com///tbs_inspect/TbsSuiteNew.zip
为了省事,我已经把apk放到了一个云服务器上,
手机浏览器直接扫二维码就可以下载apk了.
28-2-apk下载二维码.png

2. 安装apk成功以后,打开微信,在任意聊天窗口输入
//deletetbs
为的是如果以前安装过这个软件,把相关洗洗清空.
28-3-清理tbs指令.png

3.打开`TbsSuiteNew`应用,我这里安装完成后应用名叫`TBD工具集`,
然后进入`安装本地TBS内核`,
28-4-工具集.jpg
然后选择`com.tencent.mm`微信的报名,
点击`安装TBS`按钮
28-5-安装内核.jpg
执行完成会显示
28-6-安装内核结束.jpg

4. 安装成功后, 点击`启动应用,打开网页`按钮
这时候会打开微信,
微信打开后,随便找个公众号,点他的一个文章进入微信浏览器,
停留60秒,
然内核实现静默安装.
28-7-页面停留60秒.jpg

5. 之后kill掉微信.回到`TBD工具集`
之前的`启动应用,打开网页`按钮会变为`检测安装是否成功`
点下去后会提示安装成功.

6. 重新打开微信(之前微信需要被杀掉一次).
然后重新打开刚才的公众号文章,
长按页面,发现可以选中订阅号的文章的内容了,
代表安装真的成功了.
28-8-页面内容可选择.jpg

到此,我们已经完成了手机端对微信app的包装.

7.之后我们需要实现pc端利用adb连接手机.
这需要我们从官网下载 android-sdk http://developer.android.com/sdk/installing/index.html
下载安装后运行 tool 目录下的 android 程序,
在打开的窗口中选中 android sdk platform tools 进行安装.

用USB连接手机.
这一步需要注意的是:
    a. 电脑上不要有其他应用占用adb, 例如 `豌豆荚助手` 之类的软件
    b. 手机要开启开发者模式
总之, 就是手机导航条上显示了 `已连接USB调试`

连接成功以后,
在pc的命令行执行,
adb devices
能看到有手机已经连接,代表这一步完成.

8. 运行inspector.py
我们需要安装python环境, 下载地址为: https://www.python.org/
inspector.py 下载地址为 http://res.imtt.qq.com///tbs_inspect/wx_sq_webview_debug.zip
下载后需要两次解压找到 inspector.py 文件

在确定android设备usb调试藐视连接成功的情况下.
命令行cd到inspector.py文件所在目录,
运行指令
python inspector.py --adb adb所在路径

运行后显示:
(venv)➜  inspector_client20150401  python inspector.py --adb /usr/local/Cellar/android-sdk/24.4/platform-tools/adb
Adb port forwarding.
('Serving HTTP on', '0.0.0.0', 'port', 9223, '...')

代表chrome调试服务启动成功

9. 在微信浏览器中打开一个网页,
然后打开chrom浏览器, 在地址栏中输入:
http://localhost:9222/
注意不是9223

会看到你在chrom中看到你在微信中打开的页面的标签.
28-9-页面标签.jpg
点击标签进去,我们就可以看到熟悉的chrom调试页面了
28-10-chrome调试页.jpg

到此全部流程结束.

如果想省事,可以考虑使用QQ浏览器,实际上他的插件是把我们之上的步骤封装了起来.
了解了以上步骤,在对于这个插件的使用过程中出现问题也会更方便的找出解决方案.


回复

使用道具 举报

最佳答案
0 

1

主题

7

帖子

12

积分

新人求带

积分
12
发表于 2015-11-19 18:29:44 | 显示全部楼层
看看大神的方法
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

45

积分

新人求带

积分
45
发表于 2015-11-30 13:45:29 | 显示全部楼层
python inspector.py --adb adb所在路径

这一步 在 windows下面不行呢??
回复 支持 反对

使用道具 举报

最佳答案
107 

485

主题

1787

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
21298
QQ
发表于 2015-11-30 14:26:00 | 显示全部楼层
yangqi 发表于 2015-11-30 13:45
python inspector.py --adb adb所在路径

这一步 在 windows下面不行呢??

这个安装下python就行了吧!

点评

安装了啊,python 有用,我看了其他类似的教程,都是在mac上运行的例子。。。  详情 回复 发表于 2015-11-30 14:31
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

45

积分

新人求带

积分
45
发表于 2015-11-30 14:31:51 | 显示全部楼层
茄子酱 发表于 2015-11-30 14:26
这个安装下python就行了吧!

安装了啊,python 有用,我看了其他类似的教程,都是在mac上运行的例子。。。

点评

python环境和adb都配置好了,步骤都一样。 ”python inspector.py --adb adb所在路径“这个操作不是已经很明白了?  详情 回复 发表于 2015-11-30 14:44
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

6

帖子

85

积分

新人求带

积分
85
发表于 2015-11-30 14:44:06 | 显示全部楼层
yangqi 发表于 2015-11-30 14:31
安装了啊,python 有用,我看了其他类似的教程,都是在mac上运行的例子。。。 ...

python环境和adb都配置好了,步骤都一样。
”python inspector.py --adb adb所在路径“这个操作不是已经很明白了?

点评

恩 可以了,之前adb路径有问题,我重新安装adb,配置好了就OK了  详情 回复 发表于 2015-11-30 15:03
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

45

积分

新人求带

积分
45
发表于 2015-11-30 15:03:55 | 显示全部楼层
spiderman 发表于 2015-11-30 14:44
python环境和adb都配置好了,步骤都一样。
”python inspector.py --adb adb所在路径“这个操作不是已经 ...

恩 可以了,之前adb路径有问题,我重新安装adb,配置好了就OK了

点评

做过android开发或者cocos2d-x跨平台等,对adb、adt这玩意应该是老熟悉了  详情 回复 发表于 2015-11-30 15:11
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

6

帖子

85

积分

新人求带

积分
85
发表于 2015-11-30 15:11:01 | 显示全部楼层
yangqi 发表于 2015-11-30 15:03
恩 可以了,之前adb路径有问题,我重新安装adb,配置好了就OK了

做过android开发或者cocos2d-x跨平台等,对adb、adt这玩意应该是老熟悉了

点评

只配置过android环境, 开发过hello world 程序。。。。。  详情 回复 发表于 2015-11-30 15:16
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

45

积分

新人求带

积分
45
发表于 2015-11-30 15:16:15 | 显示全部楼层
spiderman 发表于 2015-11-30 15:11
做过android开发或者cocos2d-x跨平台等,对adb、adt这玩意应该是老熟悉了

只配置过android环境, 开发过hello world 程序。。。。。

点评

都一样,跑起来过helloworld表示基本的环境配置已经没问题了  详情 回复 发表于 2015-11-30 15:18
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

6

帖子

85

积分

新人求带

积分
85
发表于 2015-11-30 15:18:17 | 显示全部楼层
yangqi 发表于 2015-11-30 15:16
只配置过android环境, 开发过hello world 程序。。。。。

都一样,跑起来过helloworld表示基本的环境配置已经没问题了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com