如何使用微信开发者工具调试在微信端访问的网页

假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试.

假设我的web应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在web开发者工具里,将我本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意操作完成绑定.

接下来,把要调试的web应用的url放到微信开发者工具地址栏里,回车之后,微信开发者工具就会弹出一个询问窗口,点击Allow之后,就可以在微信开发者工具提供的类似Chrome开发者工具调试器一样的界面里进行单步调试了.

这个粘贴到地址栏的url很有讲究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
其中appid=后面的值，是从微信公众号控制台里拷贝出来的appid：

redirect_uri, 即为我们开发的web应用，部署到服务器之后生成的url，需要经过url encode处理：https://www.xxx.com/smart

这个url准备好之后，将其粘贴到微信开发者工具地址栏里，回车，即可看到一个对话窗口，要求获得我们公开信息的许可：

点击Allow之后，就可以像使用Chrome开发者工具的调试器一样，在微信开发者工具里进行单步调试了：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

如何使用微信开发者工具调试在微信端访问的网页相关推荐

微信开发者工具调试公众号网页提示: 未绑定为公众号的网页开发者
前言工作中难免需要给客户处理各种问题,此时开发者需要使用微信开发者工具调试,调试前需要客户将开发者配置为公众号的网页开发者.为了避免重复沟通,特写篇文章记录配置过程 1. 情景再现开发者使用微信开 ...
微信开发者工具-调试器
微信开发者工具-调试器调试器常用的 6 大功能模块有:Console.Sources.Network.Appdata.Storage.Wxml Console Console有两大功能: 1)开发者 ...
微信开发者工具,调试公众号网页,控制台不显示，解决方案
微信开发者工具,调试公众号网页,控制台不显示,解决方案第一步:关闭"微信开发者工具" 第二步:在C盘找到该路径 C:\Users\当前系统用户名\AppData\Local\ 在 ...
历史微信开发者工具_不用微信开发者工具也能调试微信页面
一般调试微信页面的时候,我们都会按照微信开发的官网教程,让你去安装微信开发者工具,然后在微信开发者工具上调试, 这样有时候会不会感觉很麻烦? 而且这个工具还经常卡死. 1515737321133.jp ...
如何使用微信web开发者工具调试企业微信
最近因工作需要围绕着企业微信来进行调试,从而掏出了我的微信web开发者工具,在进行授权的时候微信web开发者工具成功的提示了我:"您未绑定企业微信开发者权限".那么关键来了,因为我 ...
微信开发者工具调试器是空白的
微信开发者工具调试器是空白的微信开发者工具开发小程序的时候想看网络请求发现调试器是空白的,我还在想,什么垃圾,竟然不能看网络请求,然后咨询了一下客服,原来是IDE升级版本之后出现的bug,退出之后重 ...
拉别人或者公司的Uni-app项目，在HBuilder运行小程序时打开了微信开发者工具，但微信开发者工具未运行项目
原因:微信开发者工具登录的微信号没有未绑定该小程序项目的appid 第一种解决方案:需要绑定该微信账号为开发者账号: 第二种解决方案:进入项目,找到微信小程序APPID 删除掉然后再重新启动运行.
微信开发者工具调试大法
由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序.于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了.开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样 ...
使用微信开发者工具调试微信网页授权登录-react
转:https://www.jianshu.com/p/9ced1a297c95 1.使用localhost本地调试使用微信开发者工具, 选择微信网页授权, 微信团队为广大的开发者提供了一个测试账号 ...

如何使用微信开发者工具调试在微信端访问的网页

如何使用微信开发者工具调试在微信端访问的网页相关推荐

最新文章

热门文章