移动端开发调式插件-VConsole
简单使用
移动端开发最蛋疼的是什么？
当然是调试了，在真机测试阶段，console输出看不了，只能alert，alert又不是能查看对象这种复杂的东西，请求信息也没法看，总之就是有点难受。
为什么手机就不能像电脑那样f12出来个控制台呢？
于是乎，vConsole 出现了，他是一款移动端的前端开发者调试面板，可以查看console、网络请求、页面元素、cookie、localStorage、SessionStorage、手打js代码并运行，基本就是一个小控制台了，满足了日常开发调试所需。
这个插件是由腾讯开发的，应该是为了微信小程序顺便开发的，github地址在此：vConsole
使用方法也很简单，如果是传统静态html页面，我们script引入vconsole.min.js文件，然后new出vConsole 对象即可。
<script src="/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>建议如果要使用这个，请在最开始就使用这段代码
nuxt 使用
nuxt使用也可以按照上面的方法，但是有点蛋疼，我们有npm包可以选择，所以，可以改用插件的方式使用。
yarn add vconsole --dev安装我们我们在plugins目录创建一个vConsole.js文件
vConsole.js：
import VConsole from 'vconsole'
const vConsole = process.env.NODE_ENV === 'development' ? new VConsole() : ''
export default vConsole一般来说，开发模式下使用VConsole，正式打包就不要了，具体判断可以根据自己的项目需求来。
插件创建完毕后，我们还要去配置激活。
打开nuxt.config.js文件
export default {
plugins: [
{ src: '@/plugins/vConsole', mode: 'client' },
]
}mode我自己设置的是client，表示这个插件只有在客户端才调用。
当我这样配置的时候，我可以通过window对象的属性来控制VConsole是否开启（插件那要对应修改），相对来说，会方便一些，正式环境可以配置一下，就能查看这个了。
比如：window.debug = true
那么插件那可以这样：
import VConsole from 'vconsole'
const vConsole = window.debug ? new VConsole() : ''
export default vConsole预览图
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 3
祥子
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10祥子
Google Chrome Windows 10