mini-h5-tools

1.2.4 • Public • Published

Welcome to miniH5-devTools 👋


前提

简体中文 | English

这是个啥?

🔨 H5移动端的开发调试工具,支持处理异常、性能、行为、路由、缓存、环境、设备信息、版本、日志、手势解锁等。(大小只有20kb)

为啥要做这个,有啥意义么?

你是否在做H5活动页面的时候,每次真机测试时,各种环境切换而头疼的情况?出现报错无法调试频繁alert的情况? 想要数据上报没有统一的模块封装?大量缓存Storage无法快速定位key? 无法获取页面性能关键数据而头疼? 那么你可以试一试这工具。相信你会喜欢的!😏

这玩意有啥优势呢 ?

对比vConsole调试工具优势

  • 快 (rollup打包压缩后只有20kb)
  • 📄 纯 (js原生,无任何生产环境依赖)
  • 👽 DIY (支持多样化配置)
  • 💛 美 (莫兰迪主题配色 UI 全新升级)
  • 🍉 全 (小功能齐全)

功能层面

  • [x] ☀️ 支持环境切换
  • [x] 性能监控
  • [x] 😈 异常捕获
  • [x] 🍜 行为监控
  • [x] 📈 数据上报
  • [x] 📜 缓存监控(localStorage、sessionStorage、cookie)
  • [x] ✈️ 路由监控
  • [x] 👆 一键手势解锁
  • [x] 🌊 支持任意拖拽
  • [x] 📲 webview获取设备信息(经纬度、网络状态、屏幕、手机型号等)
  • [x] 📫 console日志调试
  • [x] 💌 ajax请求拦截
  • [x] 💍 检测版本是否更新
  • [x] 🍏 新增原生ui组件
  • [x] 🛁 一键清除缓存
  • [x] 🛁 实现工具条(一键复制、垃圾桶、筛选)

目前存在问题以及未来方向

  1. 某些业务需求经常会扫码获取数据,那么在webview中需要增加一个scan扫码功能模块 !

体验一把 !!!

扫码下载教学视频

img

线上链接 [http://run.www.cclibs.cn:7000]

github地址 [https://github.com/ccj-007/miniH5-devTools]

(如果觉得不错 👍,给个star 吧,你的认可是我最大的动力 !)

快速开始


方法1

  npm i mini-h5-tools  //安装依赖

  //在main.js中引入
  import h5tools from 'mini-h5-tools'
  
  h5tools.start() 
  //  h5tools.gesture()  手势解锁

方法2

  npm i mini-h5-tools  //安装依赖

直接在项目根目录的dist文件夹内直接复制bundle.build.js文件,在html中引入

目录结构


├── dist                     # 打包文件
│   ├── bundle.build.js      # 压缩后的生产环境sdk
│   ├── bundle.dev.js        # 未压缩开发环境sdk
├── examples                 # 示例文件 
├── node_modules             # 依赖文件 
├── src
│   ├── modules              # 核心文件 
│   │   ├── components       # 组件
│   │   ├── style            # 样式
│   │   ├── svg              # svg图标
│   │   ├── devTools         # devtools核心文件
│   │   ├── touch            # 手势库
│   │   ├── utils            # js 工具
│   ├── .babelrc             # babelrc 配置
│   ├── main                 # 入口文件
├── .gitgnore                # git忽略文件
├── .npmignore               # npm忽略文件
└── index.html               # index本地调试
├── package.json             # npm包配置
├── package.lock.json        # npm锁版本缓存文件
├── README.md                # 文档
├── rollup.config.build.js   # rollup生产环境配置
└── rollup.config.dev.js     # rollup开发环境配置

示例


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入后可获取设备的ip,地区代码,城市 -->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
</head>

<body>
  <!-- 需要一个id为app的dom元素,也可以通过options配置 -->
  <div id="app">  
  </div>
  <script src="./dist/bundle.dev.js">  //注意引入路径
  </script>
  <script>
    //通过手势解锁(注意使用的时候请区分环境变量)
    h5tools.gesture()
  </script>
</body>

</html>

使用细节


//配置
let options = {
  insertDOM: insertDOM, //插入的envTools的容器
  wait: 1000, //等待时间
  needSleep: false, //是否要延迟加载 
  envBoxIdName: 'envBox',  //未展开DOM,必须是id选择器
  envBoxExpandIdName: 'envBox-expand', //延展后的DOM,必须是id选择器
  envList: ['test', 'dev', 'prebrand'],  //环境列表
  watchEnv: true, //是否监听环境
  watchPerformance: true, //是否监听性能
  watchError: true, //是否监听性能
  watchRoutes: true, //是否监听性能
  watchActions: true, //是否监听行为
  watchStorage: true, //是否监听storage
  watchSystem: true, //是否监听手机系统数据
  watchConsole: true, //是否监听console.log日志
  watchHttp: true, //是否监听ajax请求
  isNewStorage: true, //默认展示前5个更新的storage,false将展示所有
  watchActionDOMList: [{ eventType: 'click', domId: '.test1', eventId: '001' }], //监听数组内的DOM
  sendOptions: {
    commonInfo: {
      pid: '', //项目id
      mid: '', //模块id
      uid: '', //用户id
      did: '', //设备id
    },
    method: 'gif', //是否通过sendBeacon发送埋点数据 'beacon' | 'gif' 
    baseURL: 'http://localhost:8000'  //请求的根路径
  },
  version: '1.0.0', //版本信息
  maxLimit: 5,  //最大缓存限制
  asyncTime: 5000, //默认延迟时间
  endTime: 10000, //监听手势结束时间
}
//通过手势解锁,第一个参数dom范围,第二个参数z字形手势解锁(目前只支持Z)
h5tools.gesture(document.documentElement, 'z', options)
//直接打开
h5tools.start(options)
//手动数据上报, obj上报数据对象,type可传入 'err' | 'pv', myMethods(通过网络信标或gif方案上报数据) 可传入 'beacon' | 'gif' 
h5tools.send(obj, type, myMthods)

注意


  1. 环境变量切换后,如果使用?

    默认在切换后会在localStorage存储key为global_env的属性,只需要获取对应的val修改http请求的域名即可

  2. 为什么我导入后展示不出,或者ui组件存在遮盖 ?

    某些情况下你的插入的容器DOM修改后可能会存在问题,默认最好插入在document.body中。某些框架如uniapp的导航栏部分会遮盖弹窗组件。因为z-index已经调整到最大,请自行降低数值

Package Sidebar

Install

npm i mini-h5-tools

Weekly Downloads

0

Version

1.2.4

License

ISC

Unpacked Size

136 kB

Total Files

6

Last publish

Collaborators

  • chencaijun