搞点新意思！用小程序定制版vconsole，解锁手机真机上的网络面板

玩转手机真机，vconsole 带你解锁网络面板

厌倦了模拟器？想要在手机真机上体验 vconsole 的强大功能吗？

跟着本教程，轻松定制你的小程序版本 vconsole，在手机真机上畅享网络面板、埋点信息、扫码/输入 URL、页面路由等实用功能。

一键开启网络面板，洞察数据流向

还在为真机调试而烦恼？有了网络面板，一切变得如此简单！

• 一键开启网络面板，实时查看网络请求数据。
• 支持多种筛选条件，快速定位问题请求。
• 详细展示请求头、请求体、响应头、响应体等信息。

代码示例：

wx.request({
  url: 'https://example.com',
  success(res) {
    // do something with response
  }
});

格式化埋点信息，一目了然

埋点信息是开发中的重要数据，但格式化后的埋点信息更易读懂。

• 格式化后的埋点信息，一目了然，方便分析。
• 支持多种格式化方式，满足不同需求。
• 轻松定位埋点问题，提高开发效率。

代码示例：

// 导入 vconsole-miniprogram
import vconsole from 'vconsole-miniprogram';

// 初始化 vconsole
vconsole.init();

// 自定义埋点信息格式化
vconsole.info({
  label: '埋点信息',
  data: {
    event: 'event_name',
    data: {
      param1: 'value1',
      param2: 'value2'
    }
  }
});

扫码/输入 URL，畅游 H5 世界

想在小程序中打开任意 H5 页面？so easy！

• 支持扫码/输入 URL，轻松打开任意 H5 页面。
• 在小程序中体验 H5 页面的便捷和丰富。
• 拓展小程序的应用场景，带来更多可能性。

代码示例：

// 打开 H5 页面
wx.navigateTo({
  url: '/pages/h5/index?url=https://example.com'
});

页面路由信息，尽在掌握

想知道小程序的页面路由信息吗？vconsole 统统告诉你！

• 实时显示当前页面路由信息，方便调试。
• 支持查看页面栈，了解页面跳转历史。
• 轻松定位页面路由问题，提升开发效率。

代码示例：

// 获取当前页面路由信息
wx.getCurrentPages()[0].route;

// 获取页面栈
wx.getTabBar()[0].getCurrentPage().pageHistory.stack;

赶快行动，定制你的 vconsole 吧！

还在等什么？赶快行动，定制你的小程序版本 vconsole，在手机真机上体验这些实用功能吧！

立刻下载 vconsole，开启你的小程序真机调试新篇章！

常见问题解答

Q1：如何安装 vconsole？

A： npm 安装 vconsole-miniprogram 并引入到项目中。

Q2：网络面板支持哪些筛选条件？

A： URL、HTTP 方法、状态码等。

Q3：埋点信息可以格式化为哪些方式？

A： JSON、XML、HTML 等。

Q4：扫码打开的 H5 页面支持哪些功能？

A： H5 页面所有的功能，如 DOM 操作、AJAX 请求等。

Q5：页面路由信息可以通过哪些方式获取？

A： wx.getCurrentPages()、wx.getTabBar() 等小程序 API。