翼度科技»论坛 编程开发 JavaScript 查看内容

神器vConsole!快速定位移动端问题,加快开发效率

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
大家好,我是程序视点的小二哥!
今天小二哥碰到一新来的实习生在使用 alert 调试H5页面,仿佛看到小二哥年少时羞涩的样子...
趁这个机会,就给大家分享一个针对手机网页的前端开发者调试面板工具:vConsole

简介

vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。
现在 vConsole 是微信小程序的官方调试工具


功能特性

查看日志(Logs): console.log|info|error|...

查看网络请求(Network): 请求、响应的详情

查看节点结构(Element): HTML 节点树

管理存储(Storage): 添加、编辑、删除、复制 Cookies / LocalStorage / SessionStorage

手动执行 JS 命令行: 这就和在 Chrome devtools 的console面版中执行命令一样。
使用方法

将 vConsole 添加到项目中主要有以下方式:
方法一:使用 npm(推荐)
  1. $ npm install vconsole
复制代码
Import 并初始化后,即可使用 console.log 功能。
  1. import VConsole from 'vconsole';
  2. const vConsole = new VConsole();
  3. // 或者使用配置参数来初始化,详情见文档
  4. const vConsole = new VConsole({ theme: 'dark' });
  5. // 接下来即可照常使用 `console` 等方法
  6. console.log('Hello world');
  7. // 结束调试后,可移除掉
  8. vConsole.destroy();
复制代码
方法二:使用 CDN 直接插入到 HTML
  1. [/code]可用的 CDN:
  2. [code]https://unpkg.com/vconsole@latest/dist/vconsole.min.js
  3. https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js
复制代码
使用示例和建议

引入 vConsole 模块后,页面前端将会在右下角出现 vConsole 的悬停按钮,可展开/收起面板。
支持 4 种不同类型的日志,会以不同的颜色输出到前端面板:

支持打印 Object 对象,会以 JSON 字符串格式输出:

vConsole 面板中的使用几乎如同 Chrome devtools 一样。
重点注意:请不要在生产环境中引入 vConsole 模块。
vConsole 还提供了公共属性、方法和配置项,以及插件的使用。这些详细的使用就留待大家去查阅啦。
vConsole地址https://gitee.com/Tencent/vConsole

来源:https://www.cnblogs.com/tanggoahead/p/17445325.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具