木灵鱼儿

木灵鱼儿

阅读：2542

最后更新：2021/04/14/ 10:23:58

移动端开发调式插件-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

预览图

文章分类 nuxt
文章标签 nuxt移动端VConsole控制台
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 2542

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 2542

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目