对移动端网页/微信网页进行调试方案

作为 Web 开发者，在 PC 端可以借助 Chrome Devtools 很方便的进行调试，而移动端调试相对来说就麻烦一些，并没有统一的调试工具。这里罗列几个我在移动端开发中接触到的不错方案。

vConsole

地址： https://github.com/Tencent/vConsole/open in new window

vConsole 是一个轻量、可拓展、针对手机网页的前端开发者调试面板。也是我们比较常见的移动端调试工具，毕竟是微信小程序的官方调试工具。

官方提供了通过 NPM 和 CDN 接入的步骤，我们这里以 CDN 方式举例：

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole()
</script>

挂载后就可以在页面中看到一个绿色的 vConsole 按钮了，能够在里面看到元素、网络请求、缓存等，也可以自己实现插件扩展功能。

Vue-vConsole-devtools

地址： https://github.com/Zippowxk/vue-vconsole-devtoolsopen in new window

Vue-vConsole-devtools 就是一款 vConsole 插件，该插件把 Vue.js 官方调试工具 vue-devtools 移植到移动端，可以直接在移动端查看调试 Vue.js 应用。同样，也可以通过 NPM 和 CDN 方案引入，文件较大，建议判断一下，在需要进行调试的情况通过 CDN 方案引入。

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue_plugin.js"></script>
<script>
  var vConsole = new window.VConsole()
  const Devtools = window.vueVconsoleDevtools
  Devtools.initPlugin(vConsole)
</script>

mdebug

地址：https://github.com/ihtml5/mdebugopen in new window

基于 React 开发的移动 web 调试工具。类 Chrome devtools, 内嵌 React 开发者工具, 支持日志, 网络, 元素, 代理, 存储, 性能等, 具有更好的网络捕获能力和丰富的日志展现形式

基本上和 vConsole 差不多，亮点是内嵌 React 开发者工具。如果 Vue-vConsole-devtools 能帮助调试 vue 项目，那么 react 项目就建议采用这个调试工具。具体使用可参考文档，通过 CDN 安装步骤如下：

;(function () {
  var scp = document.createElement('script')
  // 加载最新的mdebug版本
  scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js'
  scp.async = true
  scp.charset = 'utf-8'
  // 加载成功并初始化
  scp.onload = function () {
    mdebug.init()
  }
  // 加载状态切换回调
  scp.onreadystate = function () {}
  // 加载失败回调
  scp.onerror = function () {}
  document.getElementsByTagName('head')[0].appendChild(scp)
})()

Chrome 真机调试

上面提到的步骤都依赖提前预埋代码，而且毕竟是在手机上操作体验没那么好，如果有 httpOnly 的 cookie 也无法被捕获。此时，我们可以尝试 Chrome 的真机调试，Edge 也适用。

操作步骤如下：

通过数据线连接电脑
手机打开 USB 调试（根据自己型号查询如何打开）
在手机自带浏览器打开需要调试的网页
chrome 打开 chrome://inspect/#devices
点击 chrome 里的 inspect 直接调试

真机调试微信内网页

通过上面的步骤，是不能直接调试微信内的网页的，我们还需要进行一些额外的操作，如果想调试微信内网页操作步骤如下，相比较普通浏览器多了第 3 步。

通过数据线连接电脑
手机打开 USB 调试（根据自己型号查询如何打开）
手机微信内点击 http://debugxweb.qq.com/?inspector=true （只要跳转过微信首页就是开启了调试）
在微信内打开需要调试的网页
chrome 打开 chrome://inspect/#devices
会看到 com. tencent. mm 下是我们打开的网址，点击 chrome 里的 inspect 直接调试

WebViewPP

地址：https://github.com/WankkoRee/WebViewPPopen in new window

这是一个 xposed 插件，启用 WebView 调试并添加 vConsole，支持 WebView、TBS X5、UC U4、Crosswalk (XWalk)、XWeb。

由于我目前不再使用 xposed，因此未做测试。如果你没有使用过 xposed，也不建议继续了解，请忽略该方案。

对移动端网页/微信网页进行调试方案

# vConsole

# Vue-vConsole-devtools

# mdebug

# Chrome 真机调试

# 真机调试微信内网页

# WebViewPP