当然 微信开发者工具主要是让你模拟页面嵌套在微信里面的状态,或者说可以把它想象成一个容器, 你把页面扔到这个容器里 看看协调不协调,美观不美观. 比如这个容器自带导航栏等等.
这些都不是我们接下来要关心的问题, 我们今天要说的是,为啥在其他浏览器就不能调试微信页面呢? (毕竟一方面你后端接口调用的是微信的)
那么你会不会很好奇这是为什么呢? 微信开发者工具都做了什么事情呢?
首先提到一个关键字: 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的办法二：
user Agent Switcher插件。下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/user-agent-switcher/
常见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/
感兴趣的可以去了解下这个东西. 包括浏览器 模拟ipone , 模拟诺基亚n97 ,模拟黑莓手机,模拟windows phone, 模拟IE, 模拟 iPad显示效果 等.
比如我平时就喜欢通过 user-agent 把火狐改成ipad模式. 广告少很多,用起来很流畅,体验超级棒哈
