目录

1 概述

2 调试微信网页授权

3 模拟JSSDK权限校验

4 移动调试

5 Chrome DevTools

6 下载地址

7 技术支持与反馈

概述

为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。立即下载体验

你可以:

1.使用自己的微信号来调试微信网页授权

2.调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出

3.使用基于 weinre 的移动调试功能(仅0.5.0-0.7.0版本支持),支持<a href="http://x5.tencent.com/guide?id=4000 "X5 Blink 介绍"" target="_blank">X5 Blink内核的远程调试

4.利用集成的 Chrome DevTools 协助开发

该工具界面主要由几大部分组成,如下图所示:

  • 最顶部的菜单栏包括包括了刷新、后退、选中地址栏等动作的统一入口以及工具的设置入口
  • 菜单栏下方的工具栏包括了URL地址栏和预览、清除缓存的操作按钮
  • URL地址栏集成了刷新、自动补全地址、收藏URL等动作
  • 预览按钮点击后用于显示当前左侧模拟器的URL的二维码
  • 清除缓存按钮用于清除工具的文件缓存、Cookie缓存、地址栏缓存等
  • 左侧的模拟器是模拟微信客户端的浏览器,可以直接操作网页,模拟用户真实行为
  • 右侧是Chrome的Devtool,用于调试网页以及JS-SDK等

调试微信网页授权

之前在开发基于微信的网页授权的功能时,开发者通常需要手机上输入 URL 进而获取用户信息,从而进行开发和调试工作,可是因为手机的诸多限制,这个过程很不方便。 通过使用微信 web 开发者工具,从此开发者可以直接在 PC 或者 Mac 上进行这种调试了。具体操作步骤为:

1.开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份(支持测试号)来开发和调试微信网页授权。请确认手机登录页,绑定的公众号为“微信 web 开发者工具”,如下图所示:

2.为了保证开发者身份信息的安全,对于希望调试的公众号,我们要求开发者微信号与之建立绑定关系。具体操作为:公众号登录管理后台,启用开发者中心,在开发者工具——web 开发者工具页面,向开发者微信号发送绑定邀请。绑定页面如下图所示:

3.开发者在手机微信上接受邀请,即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示:

4.完成登录和绑定后,开发者就可以开始调试微信网页授权了,注意只能调试自己绑定过的公众号:

非静默授权的 URL 样例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_userinfo&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

在微信 web 开发者工具中打开类似的授权页 URL(样例不可直接使用,请更换为绑定完成的公众号授权页URL),webview 模拟器显示效果如图:

点击“确认登录”即可带着用户信息跳转到第三方页面,很方便的进行后续的开发和调试。

静默授权的 URL 样例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

在微信 web 开发者工具中打开类似的授权页 URL(样例不可直接使用,请更换为绑定完成的公众号授权页URL)则会自动跳转到第三方页面。

注意:如果使用了代理,需代理本身支持https直连,才能调试https页面。

模拟JSSDK权限校验

通过 web 开发者工具,可以模拟 JSSDK 在微信客户端中的请求,并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例:

https://www.weixinsxy.com/jssdk/

在调试器中打开该 URL,可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx.config 的校验情况和 JSSDK 的调用 log。 如下是校验通过的页面:

在控制台里会显示当前页面拥有权限的 JS-SDK 列表。

如下是校验未通过的页面:

结合左侧的微信 Webview 模拟器,可以直观地调试 JSSDK 的效果,能够在console栏里看到调用的API的结果。

注意:0.7.0 及以后版本的微信 web 开发者工具支持卡券 JSSDK 的调试,但对于希望调试的卡券公众号,我们要求开发者微信号与之建立绑定关系,绑定流程同授权登录一致。

URL收藏与二维码预览

为了方便开发者快速打开要调试的网页,开发者工具有两个方便的小功能:

URL收藏

类似浏览器里的书签功能,你可以把你经常需要调试的网页通过点击URL地址栏上的星星的icon将其收藏。

收藏之后你可以在收藏夹里看到所收藏的URL:

取消收藏也很简单,在已经收藏的URL的星星上再点击一次就可以取消收藏。

二维码预览

为了方便开发者快速通过手机打开网页预览效果,可以通过点击「预览」按钮给出当前网页的二维码:

移动调试

注意:移动调试仅支持0.5.0 - 0.7.0版本的开发者工具。1.x版本的开发者工具不支持此功能!

移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

(1)准备工作

  1. 安装0.5.0或以上版本的微信 web 开发者工具

  2. 确认移动设备是否支持远程调试功能

打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。

  1. 打开移动设备中的 USB 调试功能

1.打开移动设备,进入“设置”->“开发人员选项”

2.勾选“USB 调试功能”

需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:

1.打开移动设备,进入“设置”->“关于手机”

2.找到并单击“内部版本号”7次

  1. 安装移动设备 USB 驱动

通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用<a href="http://m.qq.com/ "腾讯手机管家"" target="_blank">腾讯手机管家来安装设备驱动。

  1. 打开 X5 Blink 内核的 inspector 功能

打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。

如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

(2)开始调试

使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍

在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:

点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:

点击上图右上角的“手机”图标,将启用屏幕映射功能:

微信 web 开发者工具集成的移动调试功能,基于 weinre 并做了一些改进,相比直接使用 weinre 有两个优点:

1.无须手工在页面中加入 weinre 调试脚本

2.可以在 weinre 的网络请求页卡中,看到完整的 http 请求 log,非局限于 ajax 请求

如下图所示:

注意,移动调试功能暂不支持 https。

Chrome DevTools

微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。

如下图所示:

下载地址

1.x新版本

微信开发者工具1.x 新版本下载地址

0.7旧版本

最新版本: (2016.05.19) 0.7.0

更新内容:

1.新增对卡券 JSSDK 的调试支持

2.修复个别情况下网络出错的问题

3.修复个别情况下 JSSDK 鉴权失败的问题

4.其他体验优化以及 bug 修复

Windows 64位版本:下载地址

 MD5: 2e054987a0dabc967a39f2f0a4949e2b

Windows 32位版本:下载地址

 MD5: 956946b0c0b19532ee622d38968effbf

Mac版本:下载地址

 MD5: f078bc88cf433d0b73f4b2aded9bec65

注:支持 Windows XP、win7 及以上版本,支持OS X 10.8 及以上版本

技术支持与反馈

邮箱地址:weixin-open@qq.com

邮件主题:【微信web开发者工具反馈】

邮件内容说明:

  1. 请用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。

  2. 请附带微信 web 开发者工具 log 文件,关闭调试工具之后,在以下路径中找到相关文件,并作为邮件附件发送:

windows系统下在

C:\Users\<用户名>\AppData\Local\微信web开发者工具\User Data\微信web开发者工具.log

mac系统下在

/Users/<用户名>/Library/Application Support/微信web开发者工具/微信web开发者工具.log