如何调试微信内网页？

之前写过一篇利用 Chrome 调试手机端网页的文章， 虽然可以方便的调试手机端网页，可Chrome是无法连接微信的，微信(安卓)中的网页要如何调试呢？

其实微信中的webview使用的是腾讯的x5内核，x5内核有两种调试方法

1、使用微信开发者工具

绑定公众号开发者以后可以使用微信开发者工具打开要调试的网页进行调试。 不过开发都工具不能模拟支付等这些接口。

2、直接在微信中打开vConsole

1. 在微信中访问 http://debugx5.qq.com/
2. 点击信息
3. 勾选打开vConsole调试功能
4. 勾选打开TBS内核Inspector功能(在下面使用TBS调试时会用到)
5. 生效后在微信中打开的所有网页都会出现一个绿色的vConsole悬浮窗

3、使用TBS Studio调试

1. 下载安装TBS Studio
2. 手机连接电脑并打开USB调试
3. 打开微信
4. 点击TBS Studio的启动检测按钮
5. TBS Studio会提示到当前App为: 微信，确认进行调试？
6. 点击确定
7. 点击启动调试，会弹出一个和Chrome DevTool页面一样的页面
8. 到这一步后调试方法就和使用Chrome一样了

4、使用VConsole插件

上面的方法中，1不能调试支付等接口， 2，3都不支持ios。 其实腾讯官方有一个可以在ios中调试的js插件vConsole

把下面的代码添加到项目中，就可以和x5内核的vConsole一样调试了

<!-- 下面的js地址可用，也可自行更换成自己的地址 -->
<script src="//iamhefang.github.io/statics/libs/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>