移动端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 前端开发 API
好用的轮子之强大的原生引导js库---Driver.js
好用的轮子之强大的原生引导js库---Driver.js
好用的轮子之强大的原生引导js库---Driver.js
|
7月前
|
JavaScript 安全 数据安全/隐私保护
新版某乎Js逆向分析
新版某乎Js逆向分析
62 0
|
8月前
|
JavaScript 前端开发 Android开发
uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面
uniapp+vue+uview适配安卓4.4项目实现简单登录和操作页面
177 0
|
Web App开发 JavaScript
Chrome控制台引入js库jQuery为例
Chrome控制台引入js库jQuery为例
415 0
|
Web App开发 开发工具 git
Google浏览器怎么添加vue-devtools拓展工具
Google浏览器怎么添加vue-devtools拓展工具
134 0
Google浏览器怎么添加vue-devtools拓展工具
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
219 0
|
JavaScript 前端开发 开发者
利用f12开发者工具在线调试网站js
利用f12开发者工具在线调试网站js
741 0
利用f12开发者工具在线调试网站js
|
数据采集 JavaScript
Puppeteer + Nodejs 通用全屏网页截图方案(一)基本功能
学习一个网页截图程序的实现基本功能。
|
JavaScript
chrome23-集成vue插件
chrome23-集成vue插件
74 0
chrome23-集成vue插件
|
JavaScript 算法 前端开发
vue 项目如何引入微信sdk,使用微信分享接口
写在前面: 做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.com 安装sdk npm install weixin-js-sdk --save 开始之前大家可以先读一读微信公众号的 接入文档,vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,所以就需要在每个路由地址都引入一遍。 整体步骤: vue引入sdk的话,就是在路由组件
379 0
vue 项目如何引入微信sdk,使用微信分享接口