Vue项目之安装引入使用vconsole方式(生产环境不显示)

目次

• vue2中安装引入使用vconsole
• 媒介
• vConsole的简介
• 重要功能
• 安装
• 引入
• 使用
• 总结

vue2中安装引入使用vconsole

媒介

迩来在做公司移动端的前端开发的时候，为了让测试人员可以或许在手机、平板上也能看到像浏览器f12那样的调试工具，便于查看日志数据和网络哀求等，专门搜了一下，发现这个vConsole官方的调试工具真的很强盛，十分好用。

vConsole的简介

• 一个轻量、可拓展、针对手机网页移动端的前端开发者调试面板。
• vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。
• 现在 vConsole 是微信小步伐的官方调试工具

重要功能

• 日志(Logs)： [code]console.log|info|error|...[/code]
• 网络(Network)： [code]XMLHttpRequest[/code], [code]Fetch[/code], [code]sendBeacon[/code]
• 节点(Element)： HTML 节点树
• 存储(Storage)： [code]Cookies[/code], [code]LocalStorage[/code], [code]SessionStorage[/code]
• 手动实行 JS 命令行
• 自界说插件

安装

• 方式一：npm:

• 方式二：CDN：

package.json中，我vconsole的版本

引入

在main.js中

1、直接使用

2、实际项目开发中，往往有多个环境。

所以一般做一下判断，生产环境运行就不消显示了

使用

运行项目就直接出现右下角这按钮，点击就能玩了

直接进入调试模式，不分方便，和浏览器f12一样

官网演示：http://wechatfe.github.io/vconsole/demo.html

总结

以上为个人履历，希望能给大家一个参考，也希望大家多多支持脚本之家。