何喜阳博客

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

作为 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 也适用。

操作步骤如下:

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

真机调试微信内网页

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

  1. 通过数据线连接电脑
  2. 手机打开 USB 调试(根据自己型号查询如何打开)
  3. 手机微信内点击 http://debugxweb.qq.com/?inspector=true (只要跳转过微信首页就是开启了调试)
  4. 在微信内打开需要调试的网页
  5. chrome 打开 chrome://inspect/#devices
  6. 会看到 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,也不建议继续了解,请忽略该方案。

以上就是全部内容了。如果你觉得内容有帮助,可以扫码打赏,请我吃一顿饭。

微信支付宝

当前页面地址:https://hexiyang.cn/article/debug-web-pages-on-mobile.html

内容基于 《自由转载-非商用-非衍生-保持署名》 协议发布,允许非商用转载,需要保留作者姓名和当前页面链接。