foreword
This article mainly introduces how to open the console to view the h5 part on the mobile terminal when using the mixed development of native client + JS-bridge. In the development stage, most of the H5 part is completed on the computer side. After embedding the APP side, if you want to check whether the interface call is normal and whether the code is running abnormally, you need to develop the console. Then, we need to use the vConsolemobile phone front-end development and debugging tool.
vConsole is a lightweight, extensible, front-end developer debugging panel for mobile web pages.
- characteristic:
- View console logs
- View network requests
- View page element structure
- View Cookies, localStorage and SessionStorage
- Execute the JS command line manually
- custom plugin
Instructions
- Install with NPM (recommended)
$ npm install vconsole
import VConsole from "vconsole";
const vConsole = new VConsole();
// 或者使用配置参数进行初始化
// const vConsole = new VConsole({ theme: 'dark' });
// 调用 console 方法输出日志
console.log("Hello world");
// 完成调试后，可销毁 vConsole
vConsole.destroy();
- CDN use
Native HTML page development
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole 会自动挂载到 `window.VConsole`
var vConsole = new window.VConsole();
</script>
CDN address:
https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js
- Developed in VUE
Introduce CDN or install VConsole dependencies in index.html
let vc: any = null;
const initVconsole = () => {
if (env.currentEnv !== env.ENV_ENUM.PRODUCT) {
vc = new VConsole({
disableLogScrolling: false,
defaultPlugins: ["system", "network"],
log: {
maxLogNumber: 200 },
});
}
};
onMounted(() => {
initVconsole();
});
onUnmounted(() => {
vConsole.destroy();
});
summary
Be self-willed, click to view the specific configuration