移动端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开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
6月前
|
弹性计算
阿里云免费云服务器在哪申请链接?免费云主机申请有限制条件吗?
阿里云提供免费云服务器,新用户可在免费中心申请。ECS享300-660元额度(个人/企业),用3个月;轻量应用服务器免费1个月。需实名认证且未购买过云服务器。
929 2
|
前端开发
CSS——@layer规则
CSS——@layer规则
379 2
CSS——@layer规则
|
JavaScript 前端开发
JavaScript 数字精度丢失问题
【10月更文挑战第24天】解决 JavaScript 数字精度丢失的问题需要综合考虑多种因素,并根据具体情况选择合适的方法。通过合理的处理和预防,可以在一定程度上减少精度误差的影响,确保计算结果的准确性。
|
前端开发
使用 Promise.all 处理多个 Promise 同时失败的情况
【10月更文挑战第26天】通过以上几种方法,我们可以根据具体的需求和环境选择合适的方式来处理多个 `Promise` 同时失败的情况,从而更好地进行错误处理和程序的稳定性保障。
1264 2
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
11692 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
移动开发 测试技术
H5调试之vconsole
H5调试之vconsole
371 0
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
4587 1