如何突破限制,在PC上调试微信页面 电脑调试手机页面

假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开。而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试。这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不要拿去干坏事)
????1、方便调试的浏览器。个人喜欢Chrome,本文基于Chrome 43.0. (正式版本) m (32 位)环境;
2、抓包工具,推荐fiddler4,当然你比较喜欢Wireshark的话也可以,反正只要是能抓到cookies就都可以;
3、能编辑cookies的浏览器插件。Chrome下我推荐EditThisCookie,Firefox的话试用Firebug自带的编辑功能即可????。
这里针对常见的三种限制方法做了分类(不过我感觉应该也没有第四类了),其绕过方法难度也是逐渐递增的。下文将从确认限制方法以及绕过限制两个角度一一分析。
未做明显限制
这种页面最多,基本上就是相当于啥也没做。
手机里其他浏览器也可以打开页面并正常进行页面浏览这种页面在PC上调试只需要开Chrome的模拟器即可。
1、Ctrl+Shift+I打开chrome的开发者中心
2、点击开发者中心工具条右上角的手机小图标,如图:
3、如果发现不能模拟触屏,则是因为设置里没开,点击开发者中心工具条右上角的箭头小图标,然后Emulation&Sensors&Emulate touch screen&,将该选项勾上即可。如图所示:
轻松过关。
检查UA来限制
例子:由于这个站点游戏需要登录,所以放个公共号测试用,勿滥用。
user:duopaotestdada
pwd:duopaotest
手机浏览器打开后会跳转到开发者自己的其余页面,或者有弹窗提示,但是不会跳到open.weixin.qq.com域名去。
看着这种就可以肯定十有八九是基于UA(UserAgent)检测了。所以破解方法很简单,模拟UA就好。chrome内置了这个功能。
1、开启浏览器的模拟器(方法见上)
2、在模拟器右上角的UA处将以下UA贴进去并重新进入原页面(不直接刷新是因为有些页面会根据UA做跳转)
Mozilla/5.0&(L&U;&Android&4.1.2;&zh-&Chitanda/Akari)&AppleWebKit/534.30&(KHTML,&like&Gecko)&Version/4.0&Mobile&Safari/534.30&MicroMessenger/6.0.0.58_r&NetType/WIFI
以上是安卓手机微信的UA,另附一个iOS下的UA:
Mozilla/5.0&(iP&CPU&iPhone&OS&8_0&like&Mac&OS&X)&AppleWebKit/600.1.4&(KHTML,&like&Gecko)&Mobile/12A365&&&MicroMessenger/5.4.1&NetType/WIFI
一般情况下这两个用处都一样,没啥区别,实际上根据大部分前端的习惯,哪怕UA里只填一个MicroMessenger字段都是可以绕过去的。
3、上面的方法虽然可以绕过限制了,但是终究不方便,每次都要手动改一次UA。实际上较新版的Chrome浏览器是可以自定义Device的。点击开发者中心右上角的齿轮图标,然后Devices&Add custom device,即可自行添加一个带微信UA的模拟器,然后之后在模拟器界面的Device里切换即可。如图:
利用微信oauth做限制
例子:由于上面的游戏链接已经失效,所以换个页面,类型一致,可供各位测试用:幸运大转盘&上面两种都是比较常见而且简单就能绕过限制的,而有些对用户身份验证要求比较高的页面,则会利用微信的OAUTH来拉取openid做验证,这种就不仅仅是改UA这么容易绕过去了。好在也不是无解。因为身份验证一般都是存在cookies里的,所以我们可以直接给PC模拟器伪造cookies来让页面误以为我们是在微信内做的验证。
PS:这里是通用方法,不过目前针对微信内的页面,微信官方有提供调试支持,可以查看更新的内容。
手机浏览器打开后会跳转到open.weixin.qq.com域名,且页面提示请在微信客户端打开链接。如图:
将浏览器UA改为微信的,然后刷新页面,会发现这个时候不再提示请在微信客户端打开链接了,但是整个页面一片空白。
打开fiddler,并设置手机wifi连接,确保手机数据都经过了fiddler。
fiddler的配置可以参考,https的两个配置必须要做,不然抓不了微信的包,另外如果确定手机连上了fiddler了但是微信的数据包都没被抓到,可以先把微信app强行关闭,然后重新开一下即可
在微信里点击页面链接,使其正常进入页面,然后fiddler上注意相关域名的记录,找到Tunnel to open.weixin.qq.com后面那条记录。会发现这时候原来的链接带上了oauth参数。复制这时候的链接如图:
在浏览器中打开前面复制的链接,会发现还是白屏,然后右键页面,选择EditThisCookies,会发现这个页面下有两条cookies了。
也可以在开发者工具的Resources&cookies&wxoauth.wucai.com里查看当前页面拥有的cookies数量。之所以前面不自己直接创建cookies就是因为cookies除了Value这个属性外,还有Domain、Path、Expires/Max-Age等等其余属性需要设置,而这些属性自己是摸不出来的,只能先依靠页面服务器创建,然后直接更改Value即可。
回到fiddler,还是刚刚选择的链接,右边窗口选择Headers,然后会看到下面有两条cookies,以及对应的数值。选中一条,然后右键Copy Value only,将值复制到前面浏览器里打开的EditThisCookies页面中去。如图:
需要的注意的是,这里复制出来的是cookies名称+cookies值的方式,而EditThisCookies里只需要填cookies值即可,所以复制进去后记得将cookies Name =这一部分删掉。如下图所示,绿框里的PHPSESSID=是不需要的,删掉即可。如图:
重复第五步,将全部cookies值都改完之后,回到之前的浏览器页面,输入最初的主页链接,成功。
在微信里的话,认证页面完成后一般是有跳转的,不过由于这里是手动更改的,所以没办法触发跳转,需要我们手动模拟一次。而前面的cookies在的缘故,页面服务器也会当我们已经认证过,所以就直接跳过了。最后成功的截图:
完成,看起来很复杂,其实也很简单。个人感觉这个过程最麻烦的地方其实在于第2步:手机连fiddler需要先断开之前的无线,手动输一次代理设置到wifi,然后再连接下。所以我觉得现在最需要一个安卓下可以存储wifi代理链接设置的工具= =
更新于,针对第三种要openid验证的页面:除了原先上文提到的抓包取cookies方法外,现在其实还有更简单的办法,利用微信官方的tbs调试。最简单的办法就是安装QQ浏览器最新版,然后利用内置的,可以省掉很多麻烦。具体步骤省略。
不喜欢用QQ浏览器的话,可以利用官方的tbs插件加上本地inspect的办法,可以参考此文:不过这个方法我个人并没有尝试过,因为感觉配置过程过于麻烦。
进去后有部分功能无法正常使用
有时候会发现即使页面正常进去了,也有些功能不能触发,比如上传图片之类的,但是浏览器也没有报错。这种情况下一般多是由于对方使用了微信的jssdk内置方法(wx.xx之类的)。因为微信内置的方法不是纯webview可以完成的,很多功能都需要微信客户端的配合,因此达不到预期的效果也是很正常的。可以看微信jssdk的,你会发现基本上没一个可以在PC上用。
其他的,想到再补充吧。
阅读(...) 评论()微信开发者工具——移动调试的简单使用 - 简书
微信开发者工具——移动调试的简单使用
目前主要是做PC端项目,但是偶尔也会有移动端需求提来,有在原生APP中的,也有在微信和浏览器中的,目前也就接触过这三个场景,对于移动端的坑入得也不深,本文介绍也是偏应用,如有不足请见谅。一、开发移动端页面的工具①移动端浏览器页面
这里开发静态页面的做法和普通的PC页面开发一样,使用chrome浏览器进行开发和调试,但是不一样的地方是把PC端的开发模式切换到手机开发模式(PC调试模式切换到移动端,点亮图中 ②即可,图中①处可以模拟不同移动端设备,同时可以自己添加设备),效果如下:
该方式可以直接调试②嵌入APP中的移动端页面
对于某些经常举办针对用户活动的APP对于嵌入H5页面的需求是比较多的。因为这样会节省开发的成本、减少原生APP的迭代速度、对用户友好。
开发嵌入原生APP的方式和第一种方式基本一致,唯一和第一种方式有些差别的是:如果h5页面和原生APP存在一些交互(js需要获取原生APP放回的数据),这种方式是没法做到的,因为上述方式是放在浏览器这个APP下的,而不是某个特定的原生APP。解决方法:
先和原生APP开发的同事商议好接口,使用方式一进行静态页面开发(这里面要写好正常的逻辑),然后与后台同事联调好接口,发不到测试,最后与原生开发的同事进行测试环境联调。过程看起来复杂,如果原生接口没问题,一般很快搞定。缺点就是和原生联调的时候,如果有问题,不好排查。(不知各位有什么好的方法,请指教!)③开发微信端页面
其实这个不应该拎出来说的,因为微信页面和在普通浏览器页面“一样”,可以认为微信中浏览网页就是在用QQ浏览器浏览。所以不再赘述。总结:移动端开发,还是f12“大法”,然后切换移动调试就行了。二、微信开发者工具之移动调试的使用
对于f12开发小型的页面是没问题的,但是如果是基于微信的项目就有些力不从心了。所以大部分针对微信开发的项目基本上都可以使用。
针对微信的开发者工具,真的是极大的方便了开发微信项目的效率。
下面是一个应用于本地的个税计算器(其实控制台操作和浏览器f12基本一致,所以这个东西前端的同事一般立马上手):
但是,这个开发者工具虽然是微信官方开发工具,但是毕竟是模拟器,现实情况的复杂会导致有些样式不兼容。例如vivo的微信客户端,显示总是错乱的(测试的同事发现的问题,她的手机可以还原场景,但是我的手机端是正常的)。所以,我们需要有针对性的在这款手机真机上调试,如何做呢?下面简要介绍如何利用微信开发者工具进行真机调试。
相对于iOS移动端调试,Android移动端调试更丰富一点,所以以安卓为例,ios调试方式同Android调试中的“普通调试”。①普通调试普通调试的步骤如下:
步骤解释:第一步:选择无线网卡地址,默认即可,工具会自动查询你的无线网卡ip v4地址第二步:意思就是你的手机连接的网络要和第一步得到的ip v4在同一个网段内(什么是网段?看这里)。简单的做法就是把手机的网络和电脑的网络设置为同一个源(连接到同一个无线网上)第三步:这个步骤很清楚了,还有一个快捷的方式就是“下拉工具栏——长按无线连接图标”然后就可以直接进入到无线列表在做后续操作了。iOS操作如下:iOS: 设置 - 无线局域网 - 选中网络 - HTTP代理手动第四步:设置好上面步骤以后,重启微信,这可能是让微信重新检测目前的网络情况,然后打开你想调试的页面(注意,要先打开要调试的页面才可以开始调试)第五步:这个不在上面的说明里,但是需要说明下,打开调试的网页以后,在点击下面的开始调试按钮!如果你的操作正确,弹出框会是这样的:
开始调试成功的话,会有浅绿色提示当前调试的页面地址
如果你当前没有在微信打开调试页面或打开的本地页面地址错误,则会失败:
提示你这并没有找到你要调试的页面
请注意,如果你想调试本地开发的页面,需要你开启web服务,使用http://host&:port&的方式来访问,如果只是一个本地页面,是无法打开调试的,形如webstrom里面快捷打开的页面地址:http://localhost:63342/17-app-calculate/index.html 这个是无法调试的。需要你搭建WEB服务,使用类似于http://192.168.0.108:8090/17-app-calculate/ 这种url。(http://127.0.0.1:8090/17-app-calculate/ 这种写法也是无法调试的,因为微信根本打不开)。调试模式开启以后,我们就可以直接在手机上查看调试的结果或者修改东西:我选中这里,手机就会有类似于PC端选中的状态一样被选中
选中了手机页面中的dom
手机端选中效果
好了,可以直接看着手机调页面了,对于一些手机端的兼容性处理更有针对性,而且可以在network那里看网络请求,十分方便。②X5 blink内核调试X5 blink调试步骤如下:
首先开发者工具要验证你的手机是不是支持该调试功能,所以,首先选择验证,然后在按下面的步骤做:
很清晰,照做即可
上面三步结束以后,直接点击开始调试按钮,工具会给出一个弹框,检测出你的手机信息,但是其他什么都没有,像这样
只给了手机信息,无法调试
那是因为——微信还没有打开能调试的页面!!!同样,打开一个能调试的页面,这个“白板”就变了样子了,
现在是页面检测成功的样子
注意:过程中会提示“是否允许USB调试”,选择同意即可然后点击箭头指向的“inspect”,熟悉的画面再次出现!!!
X5 blink方式调试的画面
好啦,这样就可以愉快的去调试真机界面了!本文以应用为主,说的不深,不足之处还请见谅!
心如繁星,是美还是罪?
文理结合部,小小工程师
用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料? 从这篇文章中你能获得这些料: 知道setContentView()之后发生了什么? ... Android 获取 View 宽高的常用正确方式,避免为零 - 掘金相信有很多朋友...
用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你能获得这些料: 知道setContentView()之后发生了什么? ... Android 获取 View 宽高的常用正确方式,避免为零 - 掘金 相信有很多...
用到的组件1、通过CocoaPods安装项目名称项目信息AFNetworking网络请求组件FMDB本地数据库组件SDWebImage多个缩略图缓存组件UICKeyChainStore存放用户账号密码组件Reachability监测网络状态DateTools友好化时间MBP...
Swift版本点击这里欢迎加入QQ群交流:
最新更新日期:17-11-01 About A curated list of iOS objective-C ecosystem. How to Use Simply presscommand+F+&xxx...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
从以下几点训练流利性阅读 加强自然拼读的学习。模仿原音阅读和提供指导是最合适的。在没有老师的情况下,有声书是最好的训练素材。要求学生为了特定目的多次阅读文本 - 提高准确性,增加阅读率,改善表现力,发展理解能力或娱乐性。鼓励学生以电子方式记录他们的朗读,然后听准录音,并重新...
springmvc的controller很多都用来提供restful服务,成为多功能action同一个接口既能够提供给web端,也可以提供给ios以及安卓@RequestBody 可以把接收到的json字符串自动转换为所对应的对象 json对应的client 如果不写@Re...
每一期修改3页PPT,每周四出一期。 第一张幻灯片说的是一份融资演示PPT的结构。 这页幻灯片比较明显的问题就是颜色不正,绿色有些淡有些脏,内容上左侧的PPT结构文字放置于箭头形状里显得有些挤,另外斜着的文字也不容易看得清。 树状图、结构图等是我们表述该类内容最容易想到的方...
记得小时候在农村老家,经常会看到在墙体上的宣传语“义务教育从娃娃抓起”。那个时候对这句话的理解,也仅仅只是字面的理解。如今不惑之年,在自己孩子身上,才真正理解到这句话的深刻含义。 5月19日,我有幸参与儿子幼儿园参观消防队活动的家长志愿者。主要职责是在孩子们参观行走的...
我们的喜好是情绪管理,是大脑支配,但是我发现有事会发现自己会骗自己,明明很喜欢的人,身体的反应不像你的大脑那么迷恋,有的人你的大脑告诉你我没有那么爱,可是身体却身不由己的释放相信,是谁在骗谁,谁才是你最本真的想法,不欺骗,不虚伪,不矫情,追寻真实的自己……他的最新文章
他的热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)社会化媒体
了解更多>>
桂ICP备 号
阅读下一篇
自媒体运营攻略
行业经验交流
Hi,在你登录以后,就可以永久免费的收藏任何您感兴趣的内容,关注感兴趣的作者!
手机注册或邮箱注册
点击按钮进行验证
请输入正确的邮箱
已有帐号请点击
帐号创建成功!
我们刚刚给你发送了一封验证邮件
请在48小时内查收邮件,并按照提示验证邮箱
感谢你对微口网的信任与支持
你输入的邮箱还未注册
还没有帐号请点击
点击按钮进行验证
你输入的邮箱还未注册
又想起来了?
你已成功重置密码,请妥善保管,以后使用新密码登录
邮件发送成功!
我们刚刚给你发送了一封邮件
请在5分钟内查收邮件,并按照提示重置密码
感谢你对微口网的信任与支持
对不起,你的帐号尚未验证
如果你没有收到邮件,请留意垃圾箱 或
意见与建议
请留下您的联系方式
* 留下您正确的联系方式,以便工作人员尽快与你取得联系
转藏至我的藏点

我要回帖

更多关于 微信页面 电脑调试 的文章

 

随机推荐