使用vconsole 调试 查看LOG VUE在手机上调试 手机查看h5的日志详解

简单介绍下vConsole:
vConsole是一个由微信公众平台前端团队研发的web前端开发者面板,可用于展示console日志,方便开发、调试。

使用场景1,在vue-cli 构建的项目中使用:

通过npm安装和使用:

npm install vconsole --save

在main.js文件里面引入:

import VConsole from 'vconsole'
Vue.prototype.$vconsole = VConsole;

在App.vue 中开启调试,初始化(可以由后端提供一个接口判断是否要打开调试)

new this.$vconsole();

然后在手机上运行查看:手机上运行PC端的vue项目

效果图如下:(右下角会出现绿色的vConsole)

使用vconsole 调试 查看LOG VUE在手机上调试 手机查看h5的日志详解_第1张图片

使用方法二: 在HTML中使用调试插件
引入vconsole.min.js文件

下载方式1-----github上下载:https://github.com/Tencent/vConsole/releases/tag/v3.3.4

下载方式2----- https://download.csdn.net/download/miss_liangrm/11748848

index.html代码如下(引入vconsole.min.js代码可以直接在浏览器运行查看)
 



    
        
        
        
        
        
    
    
        你好,我是测试vconsole的页面
    

 

你可能感兴趣的:(前端,HTML5,vue)