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

目录
相关文章
|
3月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
352 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
3月前
uniApp——调整uniApp插件市场上的echarts插件
uniApp——调整uniApp插件市场上的echarts插件
144 0
|
前端开发 JavaScript API
前端封装库/工具库的动画之Anime.js
随着互联网时代的到来,Web应用程序中的动画效果变得越来越重要。为了更好地实现这项任务,前端封装库/工具库的出现成为一个非常好的解决方案。其中一款备受关注的动画库是Anime.js。
231 1
|
编解码 监控 前端开发
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件
216 0
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件
|
缓存 前端开发 JavaScript
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件2
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件
135 0
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件2
|
Web App开发 开发工具 git
Google浏览器怎么添加vue-devtools拓展工具
Google浏览器怎么添加vue-devtools拓展工具
175 0
Google浏览器怎么添加vue-devtools拓展工具
|
JavaScript 前端开发 开发者
利用f12开发者工具在线调试网站js
利用f12开发者工具在线调试网站js
802 0
利用f12开发者工具在线调试网站js
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
251 0
|
JavaScript 前端开发 开发者
js 功能-无缝滑动 |学习笔记
快速学习 js 功能-无缝滑动
103 0
|
JavaScript iOS开发
js 实现倒计时功能,兼容ios,类似京东
js 实现倒计时功能,兼容ios,类似京东
194 0
js 实现倒计时功能,兼容ios,类似京东