移动端H5引入vconsole进行调试

移动端H5引入vconsole进行调试

• • 背景
  • 使用方式
  • 效果

背景

在真机环境下调试移动端H5的时候，无法像浏览器一样打开控制台进行console调试，那么我们可以在前端项目中引入vconsole，便于我们在真机环境下调试移动端H5项目

使用方式

1. 方法一：
   ①安装：

   npm i vconsole -S
   

   ②使用：项目入口文件main.ts中进行引入，通过判断当前环境是否为开发环境，如果为开发环境才使用vconsole

   import VConsole from 'vconsole';
   // 只有在开发环境下才加载vconsole
   process.env.NODE_ENV === 'development' && new VConsole();
   

2. 方法二：
   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文档