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

最新推荐文章于 2024-05-15 10:54:59 发布

刺心疯

最新推荐文章于 2024-05-15 10:54:59 发布

阅读量2.7k

点赞数 1

分类专栏：前端 HTML5 vue

本文链接：https://blog.csdn.net/qq_42363090/article/details/100879681

版权

HTML5 同时被 3 个专栏收录

201 篇文章 10 订阅

订阅专栏

前端

38 篇文章 1 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

简单介绍下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）

使用方法二：在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代码可以直接在浏览器运行查看）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
        <title></title>
        <script src="dist/vconsole.min.js"></script>
        <script>
            var vConsole = new VConsole();
        </script>
    </head>
    <body>
        你好，我是测试vconsole的页面
    </body>
</html>

刺心疯

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用vconsole 调试查看LOG VUE在手机上调试手机查看h5的日志详解

简单介绍下vConsole：vConsole是一个由微信公众平台前端团队研发的web前端开发者面板，可用于展示console日志，方便开发、调试。使用场景1，在vue-cli 构建的项目中使用：通过npm安装和使用:npm install vconsole --save在main.js文件里面引入：import VConsole from 'vconsole'Vue.p...
复制链接

扫一扫