移动端H5引入vconsole进行调试

简介: 移动端H5引入vconsole进行调试


背景

在真机环境下调试移动端H5的时候,无法像浏览器一样打开控制台进行console调试,那么我们可以在前端项目中引入vconsole,便于我们在真机环境下调试移动端H5项目

使用方式

  1. 方法一:
    ①安装:
npm i vconsole -S
  1. ②使用:项目入口文件main.ts中进行引入,通过判断当前环境是否为开发环境,如果为开发环境才使用vconsole
import VConsole from 'vconsole';
// 只有在开发环境下才加载vconsole
process.env.NODE_ENV === 'development' && new VConsole();
  1. 方法二:
    index.html中通过CDN的方式引入
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
</script>

效果

效果如下:

详细可参考vconsole文档

目录
相关文章
|
JavaScript 前端开发 API
好用的轮子之强大的原生引导js库---Driver.js
好用的轮子之强大的原生引导js库---Driver.js
好用的轮子之强大的原生引导js库---Driver.js
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
44 4
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
31 5
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的生活小助手附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的生活小助手附带文章和源代码部署视频讲解等
37 4
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高质量升学分析系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的高质量升学分析系统附带文章和源代码部署视频讲解等
39 3
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的云端学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的云端学习系统附带文章和源代码部署视频讲解等
36 4
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
25 0
|
2月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
188 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的实验室设备管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的实验室设备管理系统附带文章和源代码部署视频讲解等
41 9
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的穿戴搭配系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的穿戴搭配系统附带文章和源代码部署视频讲解等
29 4