移动端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拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
51 1
|
6月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
427 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
8月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
48 0
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
|
9月前
|
JavaScript 前端开发 Android开发
安卓自动化 | autox.js
安卓自动化 | autox.js
573 8
|
8月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
61 0
|
移动开发 JavaScript 前端开发
使用基于Vue.js和Hbuilder的混合模式移动开发打造移动app
使用基于Vue.js和Hbuilder的混合模式移动开发打造移动app
344 0
使用基于Vue.js和Hbuilder的混合模式移动开发打造移动app
|
移动开发 JavaScript 前端开发
使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app
近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本。 Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app
|
JavaScript 前端开发 开发者
利用f12开发者工具在线调试网站js
利用f12开发者工具在线调试网站js
826 0
利用f12开发者工具在线调试网站js
|
JavaScript 前端开发 API
移动端框架zepto.js
移动端框架zepto.js
79 0
|
JavaScript 算法 前端开发
vue 项目如何引入微信sdk,使用微信分享接口
写在前面: 做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.com 安装sdk npm install weixin-js-sdk --save 开始之前大家可以先读一读微信公众号的 接入文档,vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,所以就需要在每个路由地址都引入一遍。 整体步骤: vue引入sdk的话,就是在路由组件
468 0
vue 项目如何引入微信sdk,使用微信分享接口