【同微信小程序一样的移动端调试工具】移动端调试工具VConsole

亦凉 2024-04-19 08:29 105阅读 0赞

### 简单介绍下vConsole： ###

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

**可以扫码查看下奥：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

### 使用方法一： ###

**通过npm安装和使用:**

npm install vconsole --save

**在main.js文件里面引入：**

import VConsole from 'vconsole'
    if (process.env.NODE_ENV === 'production') {
      console.log('production环境');
    }else{
      let vConsole = new VConsole()
      console.log('development环境');
    }

**然后在手机上运行查看**：[手机上运行PC端的vue项目][PC_vue]

### 效果图如下：（右下角会出现绿色的vConsole） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 2][]

### 使用方法二： ###

### 引入vconsole.min.js文件 ###

【vconsole.min.js:

下载方式1-----github上下载：[https://github.com/Tencent/vConsole/releases/tag/v3.3.4][https_github.com_Tencent_vConsole_releases_tag_v3.3.4]

下载方式2-----链接[https://download.csdn.net/download/miss\_liangrm/11748848][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>

### 结果展示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 4][]

以上就是VConsole使用引入的两种方法，自己根据项目需要选择方法即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6d5499df7ed34228827dcbcdbae54e1d.png
[PC_vue]: https://blog.csdn.net/Miss_liangrm/article/details/99702247
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190915225407350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/631cf54fd0114cb6a42bdb1a5853fdd3.png
[https_github.com_Tencent_vConsole_releases_tag_v3.3.4]: https://github.com/Tencent/vConsole/releases/tag/v3.3.4
[https_download.csdn.net_download_miss_liangrm_11748848]: https://download.csdn.net/download/miss_liangrm/11748848
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190915231650288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/90a4c0aed30a45be95f2367843eda15f.png