历史 微信开发者工具_不用微信开发者工具也能调试微信页面

一般调试微信页面的时候,我们都会按照微信开发的官网教程,让你去安装微信开发者工具,然后在微信开发者工具上调试, 这样有时候会不会感觉很麻烦? 而且这个工具还经常卡死.

1515737321133.jpg

当然 微信开发者工具主要是让你模拟页面嵌套在微信里面的状态,或者说可以把它想象成一个容器, 你把页面扔到这个容器里 看看协调不协调,美观不美观. 比如这个容器自带导航栏等等.

这些都不是我们接下来要关心的问题, 我们今天要说的是,为啥在其他浏览器就不能调试微信页面呢? (毕竟一方面你后端接口调用的是微信的)

那么你会不会很好奇这是为什么呢? 微信开发者工具都做了什么事情呢?

首先提到一个关键字: user-agent

User Agent中文名为[用户代理] ,简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的[操作系统]及版本、CPU 类型、[浏览器](及版本、浏览器渲染引擎、浏览器语言、[浏览器插件]等。

想了解浏览器的前世今生的话,可以去看下这个:浏览器野史:

https://mkblog.cn/889/

想当初3Q大战那会. QQ空间在 360浏览器上无法使用一样, 全都是通过 user-agent 搞的鬼.

我之前是做移动端的, 当发现这个玩意的时候,就像发现了新大陆一样, 自嗨了半天, 最后突发奇想,试了下能不能在火狐上调试微信页面.

然后百度了下,还真有这样的帖子, 但是细节不够详细.

我就在微信开发者工具上 用开发者模式,抓取到了 user-agent.

看到后面跟了这么几个参数, 然后恍然大悟,

AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.01.1712150 MicroMessenger/6.5.7 Language/zh_CN webview/15157367222261342 webdebugger port/9974

细节点: wechatdevtools webdebugger 等关键词

这肯定是在网络请求的时候,他们通过请求头拿到user-agent 这些信息,做了相应的判断和拦截.

然后,替换到火狐浏览器的user-gent, 完美的解决了普通浏览器无法调试微信页面的问题.

哦对了 火狐浏览器的user-gent原本是 FireFox 这个标识.火狐浏览器替换user-agent 的教程也附上:

火狐浏览器修改userAgent的办法一：

在火狐浏览器地址栏输入“about:config”，按下回车进入设置菜单。

找到“general.useragent.override”，如果没有这一项，则点右键“新建”->“字符串”，输入这个字符串。

将其值设为自己想要的UserAgent(下面附有常见UA)

火狐浏览器修改userAgent的办法二：

常见UA:

Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.8.1.6) Gecko/20070914 Firefox/2.0.0.7

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Mozilla/5.0 (Windows; U; Windows NT 6.0; en) AppleWebKit/522.15.5 (KHTML, like Gecko) Version/3.0.3 Safari/522.15.5

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/103u (KHTML, like Gecko) safari/100

Opera/9.23 (X11; Linux x86_64; U; en)

Opera/9.23 (Windows NT 5.1; U; en)

Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)

Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0)

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

查看user-agent信息的网页(具体用法就是在对应的浏览器下打开这个网址):

http://tool.mkblog.cn/ua/

1515738894024.jpg

感兴趣的可以去了解下这个东西. 包括浏览器 模拟ipone , 模拟诺基亚n97 ,模拟黑莓手机,模拟windows phone, 模拟IE, 模拟 iPad显示效果 等.

比如我平时就喜欢通过 user-agent 把火狐改成ipad模式. 广告少很多,用起来很流畅,体验超级棒哈

1531965606190.jpg