微信调试方法

  1. 1. 微信官方提供了 微信web开发者工具 本文章仅作备份
  2. 2. 无服务器
    1. 2.1. js-sdk代码调试
      1. 2.1.1. 前提条件:
      2. 2.1.2. 使用方法:
    2. 2.2. 服务器端代码调试
  3. 3. 拥有自己的服务器和自己的域名
    1. 3.1. 暴力的方法
    2. 3.2. 快速修改代码的方法
  4. 4. 参考文档

微信官方提供了 微信web开发者工具 本文章仅作备份

微信web开发者工具地址;

无服务器


js-sdk代码调试

前提条件:

  1. 微信端的 接口配置信息 必须已经验证通过(不管是怎么通过的)
  2. 手机必须处于和pc相同的局域网下
  3. pc上有代理软件 (mac下有charles, windows下有 fildder)
  4. 有nginx或者类似工具

使用方法:

1.修改 /etc/hosts(或者使用 Gas Mask 软件来设置), 添加

1
127.0.0.1    和JS接口安全域名相符的调试页面网址

2.使用nginx 或者其他工具, 将 调试页面网址 转发到你正在开发的本机代码

1
2
3
4
5
6
7
8
9
10
11
12
# 此处为 nginx 设置
# mac 下启动nginx 需要 `sudo`
server {
listen 80;
server_name ionicdemo.xinshangshangxin.com; # 修改成你配置的调试网址
location / {
root /path/my/code; # 修改为你的代码路径
try_files $uri $uri/ /index.html =404;
# index index.html index.htm;
error_page 404 /error.html;
}
}

3.打开 charles, 开启 mac OS X Proxy
开启 mac OS X Proxy
4.点击 Proxy Settings, 查看/设置端口

5.打开手机无线网络, 高级设置, 打开手动HTTP代理,
代理服务器主机名为局域网ip, 端口为上图设置的端口

6.手机端访问 你要调试的页面, 默认转发到你的pc端了~

借助某人的图来 说明下原理


服务器端代码调试

使用微信官方插件, 具体操作方法请看官方文档http://blog.qqbrowser.cc/tag/docs/

上面jssdk调试也可以使用此方法



拥有自己的服务器和自己的域名

暴力的方法

代码全部上传到服务器上开启调试

快速修改代码的方法

把服务器上的请求直接 proxy 到本地

1.服务器上 Nginxwechat.xinshangshangxin.com 的请求转发到某个端口(如 10000)

1
2
3
4
5
6
7
8
9
server {
listen 80;
server_name wechat.xinshangshangxin.com;

location / {
proxy_pass http://127.0.0.1:10000;
proxy_set_header X-Real-IP $remote_addr;
}
}

2.在本地开一个到服务器的转发通道(要求服务器开启 sshd 服务)

1
2
# 1000 为服务器端口;  8000 为本机端口
ssh yourname@yourip -R 10000:127.0.0.1:8000

3.让本地开发环境监听 8000 端口; 这样就可以直接在本地边开发边测试了,当然别忘了根据微信的规则配置 OAuth2.0网页授权 等参数

参考文档



文章若有纰漏请大家补充指正,谢谢~~
http://blog.xinshangshangxin.com SHANG殇