移动端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 iOS开发
精选11款炫酷的前端动画特效分享(附在线演示)
分享11款非常不错炫酷的前端特效源码 其中包含css动画特效、js原生特效、svg特效等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源
|
对象存储
关于uniapp解决单/多文件上传的解决思路
关于uniapp解决单/多文件上传的解决思路
1123 0
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
5月前
|
弹性计算
阿里云免费云服务器在哪申请链接?免费云主机申请有限制条件吗?
阿里云提供免费云服务器,新用户可在免费中心申请。ECS享300-660元额度(个人/企业),用3个月;轻量应用服务器免费1个月。需实名认证且未购买过云服务器。
862 2
|
前端开发
CSS——@layer规则
CSS——@layer规则
361 2
CSS——@layer规则
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
11364 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
776 3
|
移动开发 测试技术
H5调试之vconsole
H5调试之vconsole
354 0
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
8749 0