(This blog is written in Chinese as it’s about WeChat and its intended readers are mostly Chinese. Please feel free to use Google Translate if you don’t understand Chinese.)
有时我们会想要调试一个微信公众号网页项目（例如，用户在微信中打开了某网页，授权登入完成后，能以已登入状态看到一些信息；我们想打开DevTools来调试这个登入后的网页）。
官方给出的调试方法是：微信开发者工具。这个工具其实不错，可以在电脑端模拟微信浏览器的环境，微信授权登入接口也有自己的实现。唯一的问题是，如果你想调试一个别人开发的网页，这个工具会报错：
无法获取用户身份 登录的微信号未绑定为公众号 (…） 的网页开发者，无法使用 Oauth 授权登录获取用户身 份，请查看文档并完成绑定
文档写道：
出于以下两点原因，我们要求调试微信网页授权，必须开发者微信号与公众号建立绑定关系:
- …
- 避免被有心人士利用开发者工具作为自动化工具对任意的公众号网页 “薅羊毛”
那我们真的没有办法了吗？实际上不是的。本文介绍一种调试微信网页的方法：手机设置代理服务器到电脑 → 使用CharlesProxy做中间人攻击 → 注入Vorlon.JS。
安装CharlesProxy
CharlesProxy 是一款老牌"Web Debugging Proxy"。
它是收费的，但我推荐使用它，如果不想付费，也有不少其它不用付费的方案。
我们用CharlesProxy的目的是为了做"中间人攻击"，修改网页内容，来让我们注入调试相关代码变得可能。
CharlesProxy可以简单地给手机安装CA证书，然后解密、篡改SSL保护的网页内容。
CharlesProxy有Rewrite功能，可以自动做内容篡改。
总结：CharlesProxy很方便可靠，这是我推荐CharlesProxy的原因。
手机设置代理服务器到电脑
在手机上设置代理服务器到电脑，这样手机上的所有流量都会经过电脑。
设置方法不再赘述，不同操作系统手机设置方式不一样。
把代理设置到电脑IP的8888端口（CharlesProxy的默认端口）。
手机安装CA证书
现在要调试的网页大多是https的，有SSL保护，Charles无法直接解密/篡改其内容，所以我们需要安装CharlesProxy的CA证书到手机上。
信任了CA证书之后，就可以完成对SSL的解密和篡改，俗称中间人攻击了。
在CharlesProxy中，Enable SSL Proxying
CharlesProxy并不是对所有SSL网页都默认开启中间人攻击，默认是关闭的，意味着CharlesProxy会走CONNECT请求，让客户端和对面SSL服务器建立透明的TCP连接。
我们在CharlesProxy的请求列表里，找到要调试的网站域名，右键，选择"Enable SSL Proxying"。在手机端刷新网页，就能够看见，CharlesProxy可以解密网页内容了。
运行Vorlon.JS
Vorlon.JS是一个很有意思的项目，它是一个Client-Server结构的DevTools远程调试工具。你可以在你的电脑上运行Vorlon.JS server，复制它给出的JavaScript代码，然后在任意网页上运行这段代码，就可以在你的电脑上看到这个网页的DevTools了。（前提是，运行网页的机器，在网络上跟Vorlon.JS的Server联通）
如果听起来有点复杂，这边还推荐vConsole和eruda。它们能直接在被调试网页上添加一个Popover，点击Popover后直接显示DevTools（在手机上画了一个类似DevTools的界面出来），这样就不用Client-Server结构了。
使用CharlesProxy的Rewrite注入代码
打开CharlesProxy的Rewrite设置，在Location中添加对应域名。我一般只把Protocol改成https，并填写正确的Host。Port留空，Path和Query都写通配符*。
添加一个Type为Body的Rewrite，Where里，去掉Request只留Response。
Match的Value写</head>，Replace的Value写
<script src="http://192.168.1...:1337/vorlon.js"></script></head>
选中Replace first。
这样，当CharlesProxy收到对应域名的网页内容时，就会把</head>替换成上面的代码。即，会自动注入Vorlon.JS。
验证
手机上刷新网页，在CharlesProxy里找到这次新的请求，确认response的<head>里，确实有注入的代码。
然后在电脑上打开Vorlon.JS的前端（http://127.0.0.1:1337），就可以看到手机成功连接上了。
然后，就可以像是在调试本地网页一样，调试手机上的网页了。