WEB开发者工具.docx
《WEB开发者工具.docx》由会员分享,可在线阅读,更多相关《WEB开发者工具.docx(13页珍藏版)》请在冰点文库上搜索。
WEB开发者工具
微信web开发者工具
概述
为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了web开发者工具。
它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在PC或者Mac上进行开发和调试工作。
立即下载体验
你可以:
1.使用自己的微信号来调试微信网页授权
2.调试、检验页面的JS-SDK相关功能与权限,模拟大部分SDK的输入和输出
3.使用基于weinre的移动调试功能,支持 X5Blink 内核的远程调试
4.利用集成的ChromeDevTools协助开发
该工具界面主要由几大部分组成,如下图所示:
顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口,以及微信客户端版本的模拟设置页。
左侧是微信的webview模拟器,可以直接操作网页,模拟用户真实行为。
右侧上方是地址栏,用于输入待调试的页面链接,以及清除缓存按钮。
右侧下方是相关的请求和返回结果,以及调试界面和登录按钮。
调试微信网页授权
之前在开发基于微信的网页授权的功能时,开发者通常需要手机上输入URL进而获取用户信息,从而进行开发和调试工作,可是因为手机的诸多限制,这个过程很不方便。
通过使用微信web开发者工具,从此开发者可以直接在PC或者Mac上进行这种调试了。
具体操作步骤为:
1.开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份(支持测试号)来开发和调试微信网页授权。
请确认手机登录页,绑定的公众号为“微信web开发者工具”,如下图所示:
2.为了保证开发者身份信息的安全,对于希望调试的公众号,我们要求开发者微信号与之建立绑定关系。
具体操作为:
公众号登录管理后台,启用开发者中心,在开发者工具——web开发者工具页面,向开发者微信号发送绑定邀请。
绑定页面如下图所示:
3.开发者在手机微信上接受邀请,即可完
成绑定。
每个公众号最多可同时绑定10个开发者微信号。
邀请确认页面如下图所示:
4.完成登录和绑定后,开发者就可以开始调试微信网页授权了,注意只能调试自己绑定过的公众号:
非静默授权的URL样例:
&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2F%2Fweixin%2Faccount%2Fhome
在微信web开发者工具中打开类似的授权页URL(样例不可直接使用,请更换为绑定完成的公众号授权页URL),webview模拟器显示效果如图:
点击“确认登录”即可带着用户信息跳转到第三方页面,很方便的进行后续的开发和调试。
静默授权的URL样例:
&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2F%2Fweixin%2Faccount%2Fhome
在微信web开发者工具中打开类似的授权页URL(样例不可直接使用,请更换为绑定完成的公众号授权页URL)则会自动跳转到第三方页面。
注意:
如果使用了代理,需代理本身支持https直连,才能调试https页面。
模拟JSSDK权限校验
通过web开发者工具,可以模拟JSSDK在微信客户端中的请求,并直观地看到鉴权结果和log。
以微信JSSDKDEMO页面为例:
在调试器中打开该URL,可以方便地在右侧的JS-SDKTab中看到当前页面wx.config的校验情况和JSSDK的调用log。
如下是校验通过的页面:
如下是校验未通过的页面:
在“权限列表”Tab中,可以查询到当前页面拥有权限的JS-SDK列表:
结合左侧的微信Webview模拟器,可以直观地调试JSSDK的效果,如使用微信web开发者工具调试卡券JSSDKDemo:
http:
//203.195.235.76:
8080/jssdk/wxcardDemo.php
注意:
0.7.0及以后版本的微信web开发者工具支持卡券JSSDK的调试,但对于希望调试的卡券公众号,我们要求开发者微信号与之建立绑定关系,绑定流程同授权登录一致。
移动调试
移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。
现在,微信安卓客户端webview已经开始全面升级至X5Blink内核,新的内核无论在渲染能力、API支持还是在开发辅助上都有很大进步。
通过微信web开发者工具中的远程调试功能,实时映射手机屏幕到微信web开发者工具上,将帮助开发者更高效地调试X5Blink内核的网页,具体步骤如下:
(1)准备工作
1.安装0.5.0或以上版本的微信web开发者工具
2.确认移动设备是否支持远程调试功能
打开微信web开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。
随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。
3.打开移动设备中的USB调试功能
1.打开移动设备,进入“设置”->“开发人员选项”
2.勾选“USB调试功能”
需要注意的是,Android4.2之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:
1.打开移动设备,进入“设置”->“关于手机”
2.找到并单击“内部版本号”7次
4.安装移动设备USB驱动
通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用腾讯手机管家来安装设备驱动。
5.打开X5Blink内核的inspector功能
打开微信web开发者工具,选择“移动调试”tab,使用设备扫描“调试步骤”中的二维码。
如下图,勾选“是否打开TBS内核Inspector调试功能”,并重启微信。
(2)开始调试
使用USB数据线连接移动设备与PC或者Mac后,点击打开微信web开发者工具“移动调试”tab,选择X5Blink调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。
关于X5Blink内核更多信息,可以查看官网介绍。
在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:
点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:
点击上图右上角的“手机”图标,将启用屏幕映射功能:
微信web开发者工具集成的移动调试功能,基于weinre并做了一些改进,相比直接使用weinre有两个优点:
1.无须手工在页面中加入weinre调试脚本
2.可以在weinre的网络请求页卡中,看到完整的http请求log,非局限于ajax请求
如下图所示:
注意,移动调试功能暂不支持https。
ChromeDevTools
微信web开发者工具集成了ChromeDevTools。
同之前在PC上的调试体验一致,可以快速上手。
如下图所示: