Simplified Chinese | English
๐จ A development and debugging tool for H5 mobile terminal, which supports handling exceptions, performance, behavior, routing, cache, environment, device information, version, log, gesture unlocking, etc. (only 20kb in size)
When you are working on the H5 activity page, every time you test the real machine, you have a headache when you switch between various environments? There is an error and cannot debug frequent alerts? Want data reporting without a unified module encapsulation? A large number of cached Storage cannot quickly locate the key? Troubled by not being able to obtain key data on page performance? Then you can try this tool. I believe you will like it! ๐
Compare the advantages of vConsole debugging tool
- โก Fast (only 20kb after rollup is compressed)
- ๐ Pure (js native, no production dependencies)
- ๐ฝ DIY (supports various configurations)
- ๐ Beauty (Morandi theme color matching UI brand new upgrade)
- ๐ Full (small function complete)
Functional level
- โ๏ธ Support environment switching
- โก performance monitoring
- ๐ Exception catch
- ๐ Behavior Monitoring
- ๐ Data report
- ๐ Cache monitoring (localStorage, sessionStorage, cookies)
-
โ๏ธ Route monitoring - ๐ One touch gesture unlock
- ๐ Support arbitrary drag and drop
- ๐ฒ webview to get device information (latitude and longitude, network status, screen, phone model, etc.)
- ๐ซ console log debugging
- ๐ ajax request interception
- ๐ Check if the version is updated
- ๐ Added native ui components
- ๐ Clear cache with one click
- ๐ Implement toolbar (one-click copy, trash, filter)
Current issues and future directions
- Some business requirements often scan codes to obtain data, so a scan code function module needs to be added to the webview!
- Toolbar added 1. Filter corresponding data
- Routing needs to determine the source of the entry, such as webview, H5, WeChat applet, PC
- Subsequent support for cicd automated deployment
Scan the code to download the teaching video
Online link [http://run.www.cclibs.cn:7000]
github address [https://github.com/ccj-007/miniH5-devTools]
(If you feel good ๐, give a star โญ, your approval is my biggest motivation!)
method 1
npm i mini-h5-tools //Install dependencies
//Introduced in main.js
import h5tools from 'mini-h5-tools'
h5tools.start()
// h5tools.gesture() gesture unlockMethod 2
npm i mini-h5-tools //Install dependenciesCopy the bundle.build.js file directly in the dist folder of the project root directory and import it in html
โโโ dist # package file
โ โโโ bundle.build.js # Compressed production environment sdk
โ โโโ bundle.dev.js # Uncompressed development environment sdk
โโโ examples # example file
โโโ node_modules # Dependency files
โโโ src
โ โโโ modules # core file
โ โ โโโ components # components
โ โ โโโ style # style
โ โ โโโ svg # svg icon
โ โ โโโ devTools # devtools core file
โ โ โโโ touch # gesture library
โ โ โโโ utils # js tools
โ โโโ .babelrc # babelrc configuration
โ โโโ main # entry file
โโโ .gitgnore # git ignore files
โโโ .npmignore # npm ignore files
โโโ index.html # index local debugging
โโโ package.json # npm package configuration
โโโ package.lock.json # npm lock version cache file
โโโ README.md # Documentation
โโโ rollup.config.build.js # rollup production environment configuration
โโโ rollup.config.dev.js # rollup development environment configuration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- After the introduction, you can get the ip, area code, city of the device -->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>
<!-- A dom element with an id of app is required, which can also be configured through options -->
<div id="app">
</div>
<script src="./dist/bundle.dev.js"> //Note the import path
</script>
<script>
//Unlock by gesture (please distinguish environment variables when using)
h5tools.gesture()
</script>
</body>
</html>//configure
let options = {
insertDOM: insertDOM, //The container of the inserted envTools
wait: 1000, //waiting time
needSleep: false, //Whether to delay loading
envBoxIdName: 'envBox', //The DOM is not expanded, it must be an id selector
envBoxExpandIdName: 'envBox-expand', //The expanded DOM must be an id selector
envList: ['test', 'dev', 'prebrand'], //environment list
watchEnv: true, //whether to monitor the environment
watchPerformance: true, //Whether to monitor performance
watchError: true, //whether to monitor performance
watchRoutes: true, //Whether to monitor performance
watchActions: true, //Whether to monitor actions
watchStorage: true, //whether to monitor storage
watchSystem: true, //Whether to monitor mobile phone system data
watchConsole: true, //Whether to monitor console.log log
watchHttp: true, //whether to monitor ajax requests
isNewStorage: true, //The first 5 updated storages are displayed by default, false will display all
watchActionDOMList: [{ eventType: 'click', domId: '.test1', eventId: '001' }], //Monitor the DOM in the array
sendOptions: {
commonInfo: {
pid: '', //project id
mid: '', //module id
uid: '', //user id
did: '', //device id
},
method: 'gif', //whether to send buried point data through sendBeacon 'beacon' | 'gif'
baseURL: 'http://localhost:8000' //The root path of the request
},
version: '1.0.0', //version information
maxLimit: 5, //Maximum cache limit
asyncTime: 5000, //default delay time
endTime: 10000, //Monitor gesture end time
}
//Unlock by gesture, the first parameter is the dom range, and the second parameter is Z-shaped gesture unlock (currently only supports Z)
h5tools.gesture(document.documentElement, 'z', options)
// open directly
h5tools.start(options)
//Manual data reporting, obj reporting data object, type can be passed in 'err' | 'pv', myMethods (report data through web beacon or gif scheme) can be passed in 'beacon' | 'gif'
h5tools.send(obj, type, myMthods)-
**After the environment variable is switched, if use? **
By default, the property with the key of global_env will be stored in localStorage after the switch. You only need to obtain the corresponding val to modify the domain name of the http request.
-
**Why can't I display it after I import it, or the ui component is covered? **
In some cases, there may be problems with the DOM of your inserted container after modification. It is best to insert it in document.body by default. Some frameworks such as uniapp's navigation bar will cover the popup component. Because the z-index has been adjusted to the maximum, please lower the value yourself