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

目录
相关文章
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
33 5
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
29 0
|
3月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
314 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的穿戴搭配系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的穿戴搭配系统附带文章和源代码部署视频讲解等
31 4
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
31 0
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
|
6月前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
1049 1
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
43 0
|
前端开发 JavaScript API
前端封装库/工具库的动画之Anime.js
随着互联网时代的到来,Web应用程序中的动画效果变得越来越重要。为了更好地实现这项任务,前端封装库/工具库的出现成为一个非常好的解决方案。其中一款备受关注的动画库是Anime.js。
229 1
|
JavaScript 前端开发 开发者
利用f12开发者工具在线调试网站js
利用f12开发者工具在线调试网站js
800 0
利用f12开发者工具在线调试网站js
uniapp之adbWIFI调试
前提:电脑已经安装 adb
415 0