移动端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文档

目录
相关文章
|
2月前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
本文介绍了一个使用JavaScript和HTML5 Canvas API实现的贪吃蛇游戏的升级版本,该版本支持PC端和移动端,提供了丝滑的转向效果,并允许玩家通过键盘或触摸屏控制蛇的移动。代码中包含了详细的注释,解释了游戏逻辑、食物生成、得分机制以及如何响应不同的输入设备。
57 1
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
|
3月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
341 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
3月前
uniApp——调整uniApp插件市场上的echarts插件
uniApp——调整uniApp插件市场上的echarts插件
132 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
44 0
|
JavaScript 前端开发 开发者
利用f12开发者工具在线调试网站js
利用f12开发者工具在线调试网站js
801 0
利用f12开发者工具在线调试网站js
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
251 0
|
小程序 JavaScript 开发工具
uni-app微信小程序开发之引入腾讯视频小程序播放插件
uni-app微信小程序开发之引入腾讯视频小程序播放插件
901 0
uni-app微信小程序开发之引入腾讯视频小程序播放插件
|
数据采集 编解码 移动开发
Puppeteer + Nodejs 通用全屏网页截图方案(二)常用参数实现
学习如何对网页截图程序设计基本参数功能。
|
数据采集 JavaScript
Puppeteer + Nodejs 通用全屏网页截图方案(一)基本功能
学习一个网页截图程序的实现基本功能。
|
JavaScript iOS开发
js 实现倒计时功能,兼容ios,类似京东
js 实现倒计时功能,兼容ios,类似京东
193 0
js 实现倒计时功能,兼容ios,类似京东