背景
在真机环境下调试移动端H5的时候,无法像浏览器一样打开控制台进行console调试,那么我们可以在前端项目中引入vconsole,便于我们在真机环境下调试移动端H5项目
使用方式
- 方法一:
①安装:
npm i vconsole -S
- ②使用:项目入口文件main.ts中进行引入,通过判断当前环境是否为开发环境,如果为开发环境才使用vconsole
import VConsole from 'vconsole'; // 只有在开发环境下才加载vconsole process.env.NODE_ENV === 'development' && new VConsole();
- 方法二:
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文档