js,vue 如何在手机上看到调试信息?vConsole.js前端开发者调试面板
作者:互联网
官方说明:一个轻量、可拓展、针对手机网页的前端开发者调试面板。
特性
- 查看 console 日志
- 查看网络请求
- 查看页面 element 结构
- 查看 Cookies、localStorage 和 SessionStorage
- 手动执行 JS 命令行
- 自定义插件
一、CDN使用方法。
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
// VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole();
</script>
最好是把文件下载下来使用,因为不确定对方的服务器什么时候会不会停止。
二、使用 npm。
import VConsole from 'vconsole';
const vConsole = new VConsole();
// 或者使用 options 选项初始化
const vConsole = new VConsole({ maxLogNumber: 1000 });
// 接下来即可照常使用 `console` 等方法
console.log('Hello world');
// 结束调试后,可移除掉
vConsole.destroy();
三、vue项目使用时,可以判断一下当前的环境,如果是开发环境,那么就显示打印;如果是开发环境,就不打印。
index.html
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
main.js
if (process.env.NODE_ENV !== 'production') {
// 开发环境
var vConsole = new window.VConsole();
} else {
//生产环境
}
四、效果图。
标签:vue,console,vConsole,js,VConsole,window,调试信息,new 来源: https://blog.csdn.net/qq_42740797/article/details/120969385