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

这篇具有很好参考价值的文章主要介绍了神器vConsole!快速定位移动端问题,加快开发效率。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好,我是程序视点的小二哥!

今天小二哥碰到一新来的实习生在使用 alert 调试H5页面,仿佛看到小二哥年少时羞涩的样子...

趁这个机会,就给大家分享一个针对手机网页的前端开发者调试面板工具:vConsole

请在此添加图片描述

简介

vConsole 是框架无关的,可以在 VueReact 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具

请在此添加图片描述

请在此添加图片描述

功能特性

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

请在此添加图片描述

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

请在此添加图片描述

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

请在此添加图片描述

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

请在此添加图片描述

手动执行 JS 命令行: 这就和在 Chrome devtoolsconsole面版中执行命令一样。

使用方法

vConsole 添加到项目中主要有以下方式:

方法一:使用 npm(推荐)

$ npm install vconsole

Import 并初始化后,即可使用 console.log 功能。

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化,详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后,可移除掉
vConsole.destroy();

方法二:使用 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

可用的 CDN:

https://unpkg.com/vconsole@latest/dist/vconsole.min.js
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.toymoban.com/news/detail-465505.html

到了这里,关于神器vConsole!快速定位移动端问题,加快开发效率的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【AI编程工具合集】42 款 AI 代码助手工具大盘点!开发效率神器!

    未来百科(https://nav.6aiq.com),是一个知名的AI产品导航网站 —— 为发现全球优质AI工具而生 。目前已 聚集全球3000+优质AI工具产品 ,旨在帮助用户发现全球最好的AI工具,同时为研发AI垂直应用的创业公司提供展示窗口,迎接未来的AI时代。未来百科,每天带你了解好玩儿的A

    2024年02月12日
    浏览(57)
  • Aidex 移动端快速开发框架# RuoYi-Uniapp项目,uniapp vue app项目跨域问题

     参考地址: manifest.json官方配置文档:manifest.json 应用配置 | uni-app官网 Chrome 调试跨域问题解决方案之插件篇: uni-app H5跨域问题解决方案(CORS、Cross-Origin) - DCloud问答 其实uni-app官方有解决跨域的办法,官方推荐使用HBuilderX中内置的浏览器去预览,在内置的浏览器中不会存

    2024年02月11日
    浏览(33)
  • H5移动端调试方案全解(iOS&Android&Chrome&vConsole)

    在移动端盛行的今天,大家在日常中经常会接触到H5的移动端网页,不仅仅是在浏览器中,在各种的APP中也有存在着许多的H5页面,所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求,本文旨在一文带领大家了解iOS、Android等平台的调试以及模

    2024年02月05日
    浏览(49)
  • uni-app 可视化创建的项目 移动端安装调试插件vconsole

     可视化创建的项目,在插件市场找不到vconsole插件了。 又不好npm install vconsole 换个思路,先创建一个cli脚手架脚手架的uni-app项目,然后再此项目上安装vconsole cli脚手架创建uni-app项目 安装插件 项目Terminal运行命令:npm install vconsole   安装完成之后,插件在node_modules/vconsol

    2024年02月10日
    浏览(43)
  • 移动端和PC端对比【组件库+调试vconsole +构建vite/webpack+可视化echarts/antv】

    目录 移动端 antv f2 版本问题 jsx 经典配置 自动配置 vue 使用 bar  radar PC端 antv antv G6 Vue2 scss Echarts Vue3 radar React 原生echarts+TS ListChart(列表切换echarts图表,同类数据为x轴的bar) ListChart.tsx ListChart.css ListChartUtil.tsx Recharts​​​​​​​ D3 体量:Echarts支持 按需引用 灵活度:EC

    2024年02月11日
    浏览(51)
  • openGauss学习笔记-198 openGauss 数据库运维-常见故障定位案例-分析查询效率异常降低的问题

    198.1 分析查询效率异常降低的问题 198.1.1 问题现象 通常在几十毫秒内完成的查询,有时会突然需要几秒的时间完成;而通常需要几秒完成的查询,有时需要半小时才能完成。 198.1.2 处理办法 通过下列的操作步骤,分析查询效率异常降低的原因。 使用analyze命令分析数据库。

    2024年01月16日
    浏览(60)
  • 用Arthas快速定位线上JVM问题!

           对于FullGC那一定不会陌生,一般来说会采用横切FullGC前置拦截(-XX:+HeapDumpBeforeFullGC)和后置拦截(-XX:+HeapDumpAfterFullGC),导出FullGC发生前后的heap dump文件,以便于我们进行FullGC原因的分析和定位。        我们如果希望可以观测到相关的GC回收次数以及相关的时间,

    2024年02月16日
    浏览(38)
  • 提升办公效率用微服务快速开发平台怎么样?

    如果想实现高效率的办公,采用专业的微服务快速开发平台可以达到事半功倍的效果。什么是微服务快速开发平台?又有哪些优势和特点?可以用在哪些领域?流辰信息是专业的低代码技术平台服务商,具有丰富的研发经验,可以提供一整套系统开发、数据治理、数据分析各

    2024年02月01日
    浏览(50)
  • 我借助 AI 神器,快速学习《阿里的 Java 开发手册》,比量子力学还夸张

    我平时经常要看 PDF,但是我看书贼慢,一个 PDF 差不多几十上百页,看一遍要花挺长时间。 我记性还不好,看完之后,过些日子就记不清 PDF 是讲什么的了。为了找到 PDF 里的某些信息,又得再花时间。 不过,现在这些问题都不是问题了。 因为我最近发现了一个神器,1 分钟

    2024年02月08日
    浏览(34)
  • IDEA中快速定位源代码问题(Debug调试)

    视频讲解参考:https://www.bilibili.com/video/BV1EQ4y1y74Y?vd_source=67ae2f0684b162aef8c3f8826109285e 进入debug界面后,以上五个图标功能: 1.回到当前断点所在界面 2.从当前断点处逐行执行(碰到自己写的方法不会进入) 3.逐行执行(碰到自己写的方法会进入) 4.回退 5.运行到光标处

    2024年03月19日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包