精华内容
参与话题
问答
  • 微信web开发工具 移动设备调试

    千次阅读 2017-06-09 15:01:14
    废话不多说,4步解决移动端调试问题!!!! 以苹果手机为例 1、必须先下载微信web调试工具这就不多说了 ...3、打开web调试工具选择移动调试---》ios设备调试---》开始调试 4、重启微信就可以访问你想调试的页面了

    废话不多说,4步解决移动端调试问题!!!!

    以苹果手机为例

    1、必须先下载微信web调试工具这就不多说了

    2、保证手机和电脑在同一网段,手机打开无线局域网,点击所连接的网络进去后在最底部,HTTP代理选择手动,服务器设置为和本机一样的IP,端口9973

    3、打开web调试工具选择移动调试---》ios设备调试---》开始调试

    4、重启微信就可以访问你想调试的页面了

    展开全文
  • 1 测试申请 微信公众平台接口测试帐号申请,微信web开发者工具 使用手机扫码之后,就进入下面的页面。...3 移动调试 通过网页调试,并不代表在手机端就不会有问题,这个时候可以使用微信web开发者

    1 测试申请
    微信公众平台接口测试帐号申请微信web开发者工具
    使用手机扫码之后,就进入下面的页面。
    1
    注意下面三个地方的域名要一致
    2
    4
    3
    2 添加菜单
    微信公众平台接口调试工具
    按照下图进行,得到access_token
    6
    将access_token按照下图填写到对应位置。
    5
    3 移动调试
    通过网页调试,并不代表在手机端就不会有问题,这个时候可以使用微信web开发者工具中的移动调试功能
    6
    出现下图绿色字体,表示手机可以调试了。只是功能还比较弱,只能看些log而已。
    7

    展开全文
  • [微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程 [微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程 在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开...

    [微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程


    在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth、微信浏览器内打开,照样能看你源码~


    使用fiddler来抓包

    需要先做一些简单的准备工作:

      • 一台带有无线网卡的PC或者笔记本电脑,然后将电脑和手机连接到同一个Wi-Fi网络中,并且保证二者是在同一个ip网段内的;

      • 在电脑上安装 Fiddler;

      • 打开Fiddler在菜单栏中点击 Tools - Fiddler Options - Connections 中按照如下配置后重启下fiddler:

         

    wechat_fiddler_01.jpg

    很好理解,即允许远程设备使用本机联网.

    好了,可以重启fiddler软件了,重启完毕后把软件最大窗口,不然你可能看不懂怎么没有找到那个该死的Online图标?在工具条的最右边,鼠标移到那个Online上,看图:(转载请注明出处:猿资猿味)

    wechat_fiddler_02.jpg

    找到无线局域网内分配到本机的ip,上图是192.168.0.4.具体各位自行找到,不要找错了,确定后才能有用.

    重点来了,掏出手机,打开手机的网络设置,把网络设置中的代理设置为192.168.0.4,端口号填8888.以IOS手机为例,"设置"->"Wi-Fi",看图,点那个"i":

    wechat_fiddler_03.jpg

    找到"HTTP代理",选择"手动",填上电脑的IP(192.168.0.4)和端口(8888),看图:(转载请注明出处:猿资猿味)

    wechat_fiddler_04.jpg

    好了,现在正常情况下用手机产生http请求的数据都会在电脑上的fiddler上显示出来了,如果不行请自行排查IP是否设错,或者是不是没有同处于一个局域网下,或者没有开启fiddler的允许远程用8888端口访问网络...这些个前提要确认好.


    如果对方是https的怎么办?没问题,装个扩展插件:CertMaker for iOS and Android 步骤如下:

    • 安装 CertMaker for iOS and Android 用来抓HTTPS的数据包;

    • 打开Fiddler,点击菜单栏上的 Tools - Fiddler Options - HTTPS,勾选上Decrypt HTTPS traffic ,然后重启Fiddler;

    • 打开手机,访问本机IP+8888,例如:192.168.0.4:8888, 点击 You can download the FiddlerRoot certificate 按照提示,在手机上安装证书,重启手机浏览器。


    好了,https照样能抓了.接下来教大家如何看源码.

    再装一个扩展:Syntax-Highlighting Add-Ons,下载地址都在上面那个地址里了,找一下就有了,安装上重启fiddler.


    实战操作演练

    https://open.weixin.qq.com /connect/oauth2/authorize?appid=wx6f3020ce6c245df0&redirect_uri=http %3A%2F %2Fw.k189.cn%2Findex.php%2FHuoDong%2FFlowhongbao%2Findex&response_type=code& amp;scope=snsapi_base&state=123& connect_redirect=1#wechat_redirect 以这个活动为例,在电脑上是打不开的,但是在微信里面能打开,因为有 oauth2.0嘛.

    在手机的微信中打开此链接,会在fiddler软件里显示全部http请求哦,看图:(转载请注明出处:猿资猿味)

    wechat_fiddler_05.jpg

    这个看到了吧,就是那么简单,js,html,图片都会显示出来的,看源码可以说是不费吹灰之力,仿佛是和用Chrome浏览器F12看源码一样,哦呵呵呵~

    双击上图圈出来的url,右侧会把详情显示出来,点"SyntaxView"且看下图:(转载请注明出处:猿资猿味)

    wechat_fiddler_06.jpg

    这时你可能要叫起来了,艹艹艹擦哦,怎么是乱码?骚年,Don't worry.没看到上面还有句英文写着吗?翻译过来大概意思也就是说:"响应可能需要解码才能看,点我格式下他"(不要吐槽我的英文,只可意会不可言传).就是让你点它呗,点了你会发现,amazing!

    wechat_fiddler_07.jpg

    好了,都是看得懂的东西了,我也就不废话了,其他的JS文件一样能看的,还帮你格式化过了.


    其实呢,我等用fiddler工具用来抄袭别人的源码,是侮辱了这个工具的强大性,因为fiddler还能替换掉请求的某个加载文件,达到调试方便的目的,具体使用方法大家自行查阅相关资料.

    posted on 2016-03-04 13:25 jason&li 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/ldms/p/5241764.html

    展开全文
  • 微信开发工具!!!!!

    2018-05-02 13:28:52
    微信小程序开发工具wechat_devtools,用于开发小程序,使用自己的微信号来调试微信网页授权。调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出。使用基于 weinre 的移动调试功能。利用集成的 ...
  • 微信WEB开发调试工具

    2017-11-23 12:42:29
    为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 ... 使用自己的微信号来调试微信网页授权 调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出 使用基于 weinre 的移动调试

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

    你可以:

    1.  使用自己的微信号来调试微信网页授权
    2.  调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出
    3.  使用基于 weinre 的移动调试功能
    4.  利用集成的 Chrome DevTools 协助开发

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

    水墨寒的博客

    顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口,以及微信客户端版本的模拟设置页。左侧是微信的 webview 模拟器,可以直接操作网页,模拟用户真实行为。右侧上方是地址栏,用于输入待调试的页面链接,以及清除缓存按钮。右侧下方是相关的请求和返回结果,以及调试界面和登录按钮。

    调试微信网页授权

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

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

    水墨寒的博客

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

    水墨寒的博客

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

    水墨寒的博客

    1.  完成登录和绑定后,开发者就可以开始调试微信网页授权了:

    非静默授权的 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,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 则会自动跳转到第三方页面。


    模拟JSSDK权限校验

    通过 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 有两个优点:

    1.  无须手工在页面中加入 weinre 调试脚本
    2.  可以在 weinre 的网络请求页卡中,看到完整的 http 请求 log,非局限于 ajax 请求

    如下图所示:

    水墨寒的博客

    Chrome DevTools

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

    如下图所示:

    水墨寒的博客


    下载地址

    最新版本: (2016.01.11) 0.1.0

    Windows 64位版本:下载地址

     MD5: 04cf4723256b82a284c008bd76b4c67d
    1

    Windows 32位版本:下载地址

     MD5: 64f21471fcb10cededfb07b5174a7d02
    1

    Mac版本:下载地址

     MD5: 761465844c55d4c61a001d668578f84a
    
    
    
    
    
    http://www.open.binguo.me/Tester/   消息处理
    
    展开全文
  • TBS Studio是面向基于TBS的Web开发者和移动应用开发商(包括微信、手Q,三方App等)打造的开发服务整体解决方案,以提升广大开发者在真机环境下的开发效率,并帮助开发者分析和优化网页的设计,主要功能有网页...
  • 简单讲一下利用微信官方提供的工具--微信web开发者工具,进行微信工程的本地调试和测试、生产环境的调试。  本地调试, 利用自己申请的订阅号的公众平台测试账号测试。  1、按照上篇文章中介绍的,设置网页授权...
  • 目前在微信公众号开发中大家都很了解微信开发者工具,在早期的微信开发者工具中有移动调试功能,让手机通过代理的方式开通移动调试,但是最新版本的微信开发者工具中移除了移动调试功能。 image.png 在微信...
  • 还记得之前用微信的 web开发者工具是长这个样子的, 打开后直接就有移动开发的选项,然而现在却没有了, 调试不了, 摸黑写代码, 不爽!...于是就找到了另外一个腾讯的移动调试工具 TBS Studio 官方介绍: http://bbs.mb.
  • 接微信小游戏设计心得(二) 上一篇我们说了cocos最最基本的使用,我们接下来就构建发布那个移动杰克头的小游戏 首先我们来到cocos的界面 ...可看出我们在cocos上设计的东西,和微信开发工具完全兼容了,这就是...
  • [微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程 2015-03-14 19:20:59 by 恩波 222 2 在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth、...
  • 小米5安卓使用微信X5 Blink内核调试

    千次阅读 2016-08-31 16:05:28
    打开微信调试工具,选择移动调试,安卓设备调试,选择X5 BINK,4.手机用数据线连接电脑,并用微信扫描二维码,打开TBS调试5.退出微信,并重新进入微信,点击开始调试6.然后打开你需要调试的微信web页面7.在设备列表中...
  • 微信web开发工具

    2016-10-02 09:20:06
    移动调试5 Chrome DevTools6 下载地址7 技术支持与反馈 概述 为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者...
  • 这个任务也就交给我了,由于第一次接触开发微信,所以也踩了不少坑,不过园子里文章也很多,也借鉴了不少文章,弯路也是少走了不少,现在将我自己踩的坑或者一些经验留下来,希望能帮助你们,现在移动互联网这么流行...
  • Ionic是一个移动App开发框架,但用浏览器运行出来达不到手机的效果,这时候呢,我们就不用浏览器来调试了,找一个长得像手机的。巧了微信开发者工具刚好就满足这一要求???? 1.下载 进入微信公众平台官网,找到最下面...
  • 一般来说,如果不涉及到后端数据,我们通过微信小成开发工具预览功能是可以直观看到项目的情况的,但是一旦涉及到后端本地服务器数据,预览是无法获取到的,而真机调试得按下面操作才能实现 通过win + r 打开命令行工具,...
  • 作为Web网站或移动应用程序的开发人员,你是否希望将NAT或防火墙后面的本地开发主机暴露到公网上,然后方便地...这是一个的调试开发必备工具,你应该把它放在你的常备工具箱,作为常备利器。 用过一段时间后你会发现...
  • 这个任务也就交给我了,由于第一次接触开发微信,所以也踩了不少坑,不过园子里文章也很多,也借鉴了不少文章,弯路也是少走了不少,现在将我自己踩的坑或者一些经验留下来,希望能帮助你们,现在移动互联网这么流行...
  • 最新微信小程序开发工具。微信web开发者工具是一款...微信web开发者工具采用的是集成Chrome DevTools和基本的移动调试模块,小伙伴们可以借助微信web开发者工具更方便、安全的开发或是针对调试基于微信开发的网页代码。
  • 微信开发前瞻笔记

    2017-09-05 16:00:48
    1、微信公众平台开发是指为微信公众号进行业务开发,为移动应用、PC端网站、公众号第三方平台(为各行各业公众号运营者提供服务)的开发,请前往微信开放平台接入。 2、在申请到认证公众号之前,你可以先通过测试号...
  • 微信 Web 开发者工具的功能:1、使用自己的微信号来调试微信网页授权;2、调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 ...微信 Web 开发者工具 V0.5.0 版更新日志:1、移动调试模块新增 X5 Blink 调试功能...
  • 为帮助开发者更方便、更安全地开发和调试基于微信的...你可以: 使用自己的微信号来调试微信网页授权 调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出 使用基于 weinre 的移动调试功能 ...

空空如也

1 2 3 4 5
收藏数 86
精华内容 34
关键字:

微信开发工具 移动调试