查看: 15082|回复: 12
微信浏览器调试页面 - 傻瓜式微信开发教程28
阅读权限255
在线时间 小时
在微信浏览中调试页面一直是个痛苦的事情.
之前多数时候只能借助alert调试js流程,
借助http抓包工具查看页面请求的资源.
用过chrome调试器的人都会想如果能用chrome调试微信浏览器将会是多么美妙的一件事.
实际上,在新版本的Android微信上,已经可以实现这个功能了.
但是iOS版本的的微信还没有这个功能.
最简单的方法,直接下载`QQ浏览器`,然后安装`微信调试插件`,
按照指引完成调试工具的配置.
但是,本着知其然,知其所以然的态度.这里自行实现利用chrome调试微信浏览器.
首先把调试方法的图例给大家看一下
11.jpg (0 Bytes, 下载次数: 20)
16:28 上传
1. 第一步,我们安装`TbsSuiteNew.apk`, 实现对微信浏览器的封装.
官方的下载地址为:
为了省事,我已经把apk放到了一个云服务器上,
手机浏览器直接扫二维码就可以下载apk了.
22.jpg (0 Bytes, 下载次数: 12)
16:28 上传
2. 安装apk成功以后,打开微信,在任意聊天窗口输入
//deletetbs
为的是如果以前安装过这个软件,把相关洗洗清空.
33.jpg (0 Bytes, 下载次数: 17)
16:28 上传
3.打开`TbsSuiteNew`应用,我这里安装完成后应用名叫`TBD工具集`,
然后进入`安装本地TBS内核`,
44.jpg (0 Bytes, 下载次数: 9)
16:28 上传
然后选择`com.tencent.mm`微信的报名,
点击`安装TBS`按钮
55.jpg (0 Bytes, 下载次数: 10)
16:28 上传
66.jpg (0 Bytes, 下载次数: 15)
16:28 上传
4. 安装成功后, 点击`启动应用,打开网页`按钮
这时候会打开微信,
微信打开后,随便找个公众号,点他的一个文章进入微信浏览器,
然内核实现静默安装.
77.jpg (0 Bytes, 下载次数: 13)
16:28 上传
5. 之后kill掉微信.回到`TBD工具集`
之前的`启动应用,打开网页`按钮会变为`检测安装是否成功`
点下去后会提示安装成功.
6. 重新打开微信(之前微信需要被杀掉一次).
然后重新打开刚才的公众号文章,
长按页面,发现可以选中订阅号的文章的内容了,
代表安装真的成功了.
88.jpg (0 Bytes, 下载次数: 14)
16:28 上传
到此,我们已经完成了手机端对微信app的包装.
7.之后我们需要实现pc端利用adb连接手机.
这需要我们从官网下载 android-sdk
下载安装后运行 tool 目录下的 android 程序,
在打开的窗口中选中 android sdk platform tools 进行安装.
用USB连接手机.
这一步需要注意的是:
& & a. 电脑上不要有其他应用占用adb, 例如 `豌豆荚助手` 之类的软件
& & b. 手机要开启开发者模式
总之, 就是手机导航条上显示了 `已连接USB调试`
连接成功以后,
在pc的命令行执行,
adb devices
能看到有手机已经连接,代表这一步完成.
8. 运行inspector.py
我们需要安装python环境, 下载地址为:
inspector.py 下载地址为
下载后需要两次解压找到 inspector.py 文件
在确定android设备usb调试藐视连接成功的情况下.
命令行cd到inspector.py文件所在目录,
python inspector.py --adb adb所在路径
运行后显示:
(venv)?&&inspector_client&&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. 在微信浏览器中打开一个网页,
然后打开chrome浏览器, 在地址栏中输入:
注意不是9223
99.jpg (0 Bytes, 下载次数: 10)
16:28 上传
点击标签进去,我们就可以看到熟悉的chrome调试页面了
1010.jpg (0 Bytes, 下载次数: 20)
16:28 上传
到此全部流程结束.
如果想省事,可以考虑使用QQ浏览器,实际上他的插件是把我们之上的步骤封装了起来.
了解了以上步骤,在对于这个插件的使用过程中出现问题也会更方便的找出解决方案.
---------------------------------------------------转自者社区
阅读权限50
在线时间 小时
学习中一头雾水
阅读权限50
在线时间 小时
#在这里快速回复#
阅读权限80
在线时间 小时
有大神真好
阅读权限50
在线时间 小时
& && && && &&&不错
阅读权限50
在线时间 小时
C:\Users\Administrator\Desktop\1.png
1.jpg (0 Bytes, 下载次数: 1)
15:54 上传
这样安装 是正确的?
阅读权限80
在线时间 小时
阅读权限50
在线时间 小时
阅读权限80
在线时间 小时
好东西 学习学习
阅读权限50
在线时间 小时
感觉很有用 = =，看的很头疼啊
源码为网狐荣耀最新版本的子游戏，分娱乐场、休
微擎+微赞通用 人人商城V2 3.0.4 解密开源版更新
之前看到有几位网友已经发了3.0.4版本，就没有再
特别声明（务必查看！）
1、HTML5游戏 飞行棋大
最近由于360影视网站的一些调整，导致2.79一些
伴随着中国游戏产业的不断发展和社会对
| 联系方式
COPYRIGHT(C)2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备号-4
北京中清龙图网络技术有限公司拒绝访问 | www. | 百度云加速
请打开cookies.
此网站 (www.) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(e64388-ua98).
重新安装浏览器，或使用别的浏览器如何进行微信公众号开发的本地调试 - 依米艳 - 博客园
随笔 - 60, 文章 - 6, 评论 - 42, 引用 - 0
微信团队为广大的开发者提供了一个测试账号。该帐号无需公众账号，快速申请接口测试，直接体验和测试公众平台所有高级接口。这么好用的功能，只需要要你有一个手机，手机上安装了一个微信即可。
地址：https://mp./debug/cgi-bin/sandbox?t=sandbox/login
登录后，会得到一个微信号，和测试好的相关信息。appID,appsecret。
接口配置信息，js接口安全域名配置按照生产环境的配置即可。
下面重点开始了。已经有了一个可供测试的公众号，如何进行测试呢，最直接的办法是，在本地开发环境把已经运行的生产环境的公众号配置成刚申请的这个开发账号即可，但显然这个方法蠢哭了。
我们采用的方法是，在配置文件上增加一个参数的方式。比如我们生产环境的微信配置信息都写在wechat-config.xml中，这个时候，增加另一个配置文件wechat-config-yimiyan.xml。启动jvm时增加参数
-Dwechat-config=yimiyan。程序中中需要稍加修改。
例如原本系统启动时读取wechat-config.xml文件
WeChatUtils.class.getResourceAsStream("/wechat-config.xml");
现在修改为：
String wechatConfig = System.getProperty("wechat-config");//得到的是刚刚我们添加的参数-Dwechat-config的值，即yimiyan
　将原本的读取配置文件修改为：
WeChatUtils.class.getResourceAsStream("/wechat-config-"+wechatConfig+".xml");
这样，每个开发的小伙伴都可以在自己的环境上进行测试了。
准备就绪之后，开始下一步的操作--配置菜单。
用手机扫描页面上的二维码后，关注了这个测试公众号，是没有菜单的，这个时候要配置菜单怎么办呢。
有两种方式，使用postman工具或者使用微信提供的调试接口。
笔者比较懒，直接用了微信的接口调试工具设置的。地址：https://mp./debug
第一步，获取access_tocken
输入测试公众号页面的appID和appsecret，点击检查问题
获取到access_token之后，使用这个access_token跟测试公众号设置菜单。接口类型选择自定义菜单，填入刚刚获取到的access_token,以及菜单的json串。
点击检查问题后，如果设置成功，结果如下
这个时候，在用微信扫一扫测试公众号的二维码，应该就会有菜单了，但是笔者在测试的时候发现，不知道是延迟还是缓存，第一次设置还好，多设置几次，要取关，清楚手机历史等操作，才会发现新菜单生效了。
到目前为止，我们一切的准备工作就基本完成了。在测试公众号里面，点击菜单，享受着成功的喜悦的时候，满心欢喜的点击，蹦出来的是redirect_uri：参数错误
这是什么鬼
最后一步的配置：
在测试微信公众号那个页面，那个页面很长，往下拉，找到网页服务--》网页账号--》网页授权获取用户基本信息，点击修改，配上外网能访问你测试环境的ip或者域名即可。
整个配置最重要的一点就是，你需要拥有一个能通过外网访问你的测试环境的域名或者ip。8377人阅读
原文链接：
在做微信开发的时候，调用微信接口成功之后，微信会回调我们事先配置好的一个接口。由于微信的服务是在外网的，所以这个回调接口也只能是外网，而且微信要求回调接口只能是通过ICP备案的域名，不能使用IP。所以在开发调试的时候，需要把代码部署到线上的服务器，通过打log来跟踪接口调用情况，很明显这样开发效率非常低。下面介绍两款工具（和）来解决这个问题，将本机的IP和端口映射到外网指定的域名下，通过访问映射的外网域名就可以直接访问到本机的服务。
1、（免费/收费模式）
1& 首先在官网下载natapp客户端
解压后得到一个natapp/natapp.exe执行程序，Linux/Mac 系统 需要 添加执行权限：chmod a+x natapp
打开终端，在命令行中直接运行./natapp即可。运行成功后会进入如下界面：
从上图中可以看出，转发那行显示了外网域名到本机的端口映射关系。在外网访问就可以将请求转发到本地80端口对应的服务上了。当然你需要在本机装一个监听80端口的web服务，比如：nginx、apache、iis。如果你是用Tomcat等应用服务器，端口也不是80的话，需要在nginx上再做一个反向代理配置，转换到tomcat对应的端口上。
location / {
proxy_pass http:
访问可以监控请求路径、请求头和响应头等日志信息。
通过以上的操作，就完成了外网访问本机服务的工作。
3& 指定映射端口
natapp默认只能映射本机的80端口，如果要映射到指定端口，你需要在natapp官网注册一个帐号，并购买一个免费或收费的隧道，来配置映射到指定的端口上。操作流程如下图所示：
将本地端口修改成你需要映射的端口号，点击免费购买后回到我的隧道列表中，复制authtoken列对应的值。
运行：./natapp -authtoken=xxxxxx即可在控制台看到刚刚配置的自定义端口和域名的映射信息。如下图所示：
通过地址就可以访问到我本机8080端口tomcat部署的应用 jingtong 了。如下图所示：
但是免费的隧道有几点限制：
1& 域名是natapp随机生成的
2& 每个协议只能购买一个隧道，即每个协议只能映射一个端口
3& 只能映射一条隧道（一个转发域名）（sunny-ngrok可以映射多条隧道）
但也已经够用了，不是吗？
说了这么多，你应该知道怎么调试微信接口了吧？ 只需要将natapp随机生成的域名，配置到微信的回调参数配置中即可。因为域名是通过了ICP备案的，所以natapp随机生成的三级域名在微信当中都是可以通过验证的。
2、（完全免费模式）
sunny-ngrok配置稍微麻烦一点，需要有自己的域名。
1& 在sunny-ngrok一个帐号
2& 添加隧道
登录个人中心，新增一条隧道
参数解读：
隧道协议：支持http、https、tcp端口转发
隧道名称：名字随意
http域名类型：选择自定义
域名或远程端口：填写自己的在外网访问的域名
本地地址：本机IP或127.0.0.1
本地端口：本机web服务的端口
http验证用户名和http验证密码：访问域名时用户名密码校验，如果不需要校验可以不填
3& 自定义域名解析到server.ngrok.cc
需要将自定义的域名在域名管理服务商，将自定义域名用CNAME类型解析到server.ngrok.cc，才能提供服务。
4& 发布内网服务到外网
从隧道列表中，拷贝刚刚创建的客户端ID，执行：./sunny clientid 客户端ID1,客户端ID2，多个客户端ID用逗号分隔。效果如下图所示：
访问效果，和natapp访问的效果一致。如下图所示：
sunny-ngrok：
1& 完全免费
2& 可以定义多条隧道
3& 可以完全自定义域名
4& 需要自己申请域名并备案（算是一个缺点吧）
1& 基本免费，高级功能收费（如自定义域名）
2& 免费版每个协议只能申请一条隧道
3& 域名随机生成，不能完全自定义域名。收费版也只能修改域名的前缀
4& 不需要单独申请域名（优点）
5& 运行简单，下载执行程序直接运行即可，默认监听80端口。如果要监听其它端口，没有注册帐号的前提下，需要用web服务器做反向代理
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：736968次
积分：7865
积分：7865
排名：第2622名
原创：103篇
转载：17篇
评论：409条
文章：14篇
阅读：143102
(4)(5)(5)(1)(10)(7)(7)(3)(1)(2)(2)(4)(5)(4)(1)(1)(6)(1)(2)(1)(1)(1)(4)(1)(1)(1)(1)(4)(6)(1)(4)(13)(8)(2)