顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口,以及微信客户端版本的模拟设置页。左侧是微信的 webview 模拟器,可以直接操作网页,模拟用户真实行为。右侧上方是地址栏,用于输入待调试的页面链接,以及清除缓存按钮。右侧下方是相关的请求和返回结果,以及调试界面和登录按钮。
调试微信网页授权
之前在开发基于微信的网页授权的功能时,开发者通常需要手机上输入 URL 进而获取用户信息,从而进行开发和调试工作,可是因为手机的诸多限制,这个过程很不方便。 通过使用微信 web 开发者工具,从此开发者可以直接在 PC 或者 Mac 上进行这种调试了。具体操作步骤为:
开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份(支持测试号)来开发和调试微信网页授权。请确认手机登录页,绑定的公众号为“微信 web 开发者工具”,如下图所示:
为了保证开发者身份信息的安全,对于希望调试的公众号,我们要求开发者微信号与之建立绑定关系。具体操作为:公众号登录管理后台,启用开发者中心,在开发者工具——web 开发者工具页面,向开发者微信号发送绑定邀请。绑定页面如下图所示:
开发者在手机微信上接受邀请,即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示:
完成登录和绑定后,开发者就可以开始调试微信网页授权了,注意只能调试自己绑定过的公众号
通过 web 开发者工具,可以模拟 JSSDK 在微信客户端中的请求,并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例:
http://demo.open.weixin.qq.com/jssdk
在调试器中打开该 URL,可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx.config 的校验情况和 JSSDK 的调用 log。 如下是校验通过的页面:
如下是校验未通过的页面:
在“权限列表” Tab 中,可以查询到当前页面拥有权限的 JS-SDK 列表:
移动调试
移动调试功能是基于 weinre 的,并且做了一些改进,相比直接使用 weinre 有两个优点:
无须手工在页面中加入 weinre 调试脚本
可以在 weinre 的网络请求页卡中,看到完整的 http 请求 log,非局限于 ajax 请求
如下图所示:
注意,移动调试功能暂不支持https。
Chrome DevTools
微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。
如下图所示:
新增 支持设置插件页面为自定义编译条件的启动页面
新增 第三方平台小程序支持使用企业微信模拟器进行调试
新增 保留上次预览的二维码
新增 云开发控制台文件存储配置
新增 修改 appid 时支持下拉选取最近使用的appid
新增 体验评分支持导出报告
新增 支持切后台后可以获取用户位置
新增 云开发静态网站托管支持自定义域名
新增 静态网站和云存储支持上传文件夹
新增 云开发支持云托管
新增 预览时报错通过弹框提供错误信息 反馈详情
优化 云开发拓展功能入口优化
优化 新建项目流程
优化 安装包体积
修复 调试器在模拟器右侧时,选择机型会导致调试器错位
修复 公众号网页调试模式下调试器白屏
修复 项目列表页,删除项目时的弹框无法纵向滚动
修复 工具导入代码片段会直接新建一个新的代码片段
修复 WXML面板节点元素无法选中
修复 新的编译模块在win7系统预览报错的问题 反馈详情
修复 udp onClose与客户端表现不一致
修复 打开工具全屏的问题
修复 多账号调试,编译一直使用缓存
修复 2.13.0以上基础库,无法触发 onPageNotFound 反馈详情
修复 非系统菜单栏 Mac 下左上角的放大无法按住option最大化 反馈详情
修复 关闭所有项目窗口后,不能从菜单里打开项目选择界面 反馈详情
修复 重复CSS样式没有warning提示
修复 cli使用 --appid参数时错误
修复 downloadFile接口三端表现不一致
修复 openSetting中有三个权限一直关不掉 反馈详情
修复 工具上临时文件能被unlink删除的问题 反馈详情
修复 MacOS Big Sur 频繁崩溃的问题
修复 调试器跟随模拟器一起弹出时编辑器部分区域无法触发点击的问题
修复 删除项目后,重启工具,已删除的项目又重新出现的问题
修复 休眠后重新打开会出现项目列表窗口的问题
mg经典老虎机