0.0.3 • Published 2 years ago

@justwe7/mp-devtool-plugin v0.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

小程序devtool增强工具

解决小程序自带vconsole无法查看网络请求,storage等痛点。避免测试过程需要使用抓包工具或者在开发者工具进行。 20220915_113250.gif

安装

npm i @justwe7/mp-devtool-plugin -D

使用

uniapp

  1. 修改src/pages.json,新增全局自定义组件: "jw-tool": "/wxcomponents/jw-devtool/index"
{
  "pages": [],
  "globalStyle": {
    "usingComponents": {
      "jw-tool": "/wxcomponents/jw-devtool/index"
    }
  }
}
  1. vue.config.js:
const { JwDevtoolPlugin } = require('@justwe7/mp-devtool-plugin');
module.exports = {
  chainWebpack: config => {
    // 禁止在生产环境注入!
    // if (process.env.NODE_ENV !== 'production') { // TODO 增加环境变量标识作为判断条件
    config.module
        .rule('mp-devtool-loader')
        .test(/\.vue$/)
        .use('@justwe7/mp-devtool-plugin')
        .loader('@justwe7/mp-devtool-plugin')
        .options({})

    config.plugin('mp-devtool-plugin').use(JwDevtoolPlugin)
    // }
  }
};

实现思路

  1. 通过plugin注入新的entry,劫持network,与后续引入的组件进行数据通信
  2. 通过loader,将每个页面template下插入自定义组件名称
  3. 通过loader,将自定义组件定义到全局:pages.json->globalStyle->usingComponents (区分uniapp)
  4. 上一步的组件定义需要复制组件源码(考虑平台,看是否需要插件处理。使用者自行处理是否更灵活或者需要接收参数进行配置)

TODO

  • network查看
  • uniapp兼容
  • storage查看
  • 支持小程序path携带指定参数跳转
  • 原生小程序兼容