评论

「笔记」Web页面使用vConsole

Web页面使用vConsole

前言

这几天在突然想搞(xian)点(de)东(dan)西(teng),于是折腾了下公众号相关的接口,然而发现某个api在模拟器上正常,手机上使用微信浏览器无法始终无法执行,但是H5页面又不像小程序一样可以远程调试,又看不到打印日志,于是想起来了社区大佬之前发过的vConsole。

vConsole 是什么?

或许很多人会觉得很陌生,但是开发过小程序的人来说看到下面这个就很熟悉了。

小程序端和web端的区别?

小程序端:

Web端:

从上面2个截图可以看出基本上功能差不多,用法上也没什么区别,Web端可以查看Network和Storage的信息,至于好不好用,自己试试就知道。

Vue项目使用vConsole

npm install vconsole

在入口文件引入模块

import VConsole from 'vconsole'

let vConsole = new VConsole()
Vue.prototype.$vConsole = vConsole;

扩展功能:隐藏Network面板

因为Network信息有时候比较敏感,所以小程序端至今没有开放这个面板,但是理论上来说应该都是有的,可能是官方特意隐藏了,我们在H5页面上也可能会有这种需求,默认的话是都显示出来的,我们可以针对线上环境单独设置隐藏。

vConsole.removePlugin("network")

仓库地址

https://github.com/Tencent/vConsole

点赞 2
收藏
评论

3 个评论

  • Wang
    Wang
    03-21

    这个还有开源,嗯,不错

    03-21
    赞同
    回复
  • Admin²⁰²⁰
    Admin²⁰²⁰
    03-21

    来一套组合拳:

    收藏,点赞,回复

    03-21
    赞同
    回复
  • Cooper
    Cooper
    03-20

    我们在H5页面上也可能会有这种需求」,这个「我们」是谁呢

    03-20
    赞同
    回复 7
    • 拾忆
      拾忆
      03-20
      你猜
      03-20
      回复
    • Cooper
      Cooper
      03-20回复拾忆
      大佬带我飞~
      03-20
      回复
    • 拾忆
      拾忆
      03-20回复Cooper
      截图那块有什么问题吗?
      03-20
      回复
    • 拾忆
      拾忆
      03-20回复Cooper
      03-20
      回复
    • Cooper
      Cooper
      03-21回复拾忆
      没啥问题,就是感觉隐藏的有点深
      03-21
      回复
    查看更多(2)
登录 后发表内容