工具 - vConsole调试工具 在项目中的应用

最近做移动端项目比较多,电脑上开发完了上真机必现问题,但是真机上又看不了代码很捉急啊有没有。

这两天才发现这个腾讯良品vConsole,以前开发小程序见过,但没想到他竟然还能被应用到我们的h5页面中,


废话不多说,先给大佬磕一个。


具体描述介绍啥的见githubhttps://github.com/Tencent/vConsole


我这里先记录下具体开发中是怎么引用的

1、按照官网的步骤,先安装vConsole工具包:

1
npm install vconsole

  

注:我当时在项目中使用,安装命令是 

1
npm i --S vconsole

  


然后项目的入口js中引入并实例化,如下:

1
2
let VConsole = require('../../node_modules/vconsole/dist/vconsole.min');//路径根据项目自己找
let vConsole = new VConsole();

  

。。。

对,就这三句,一个强大的功能就诞生在我都页面了!

比如做些控制台输出信息:

1
2
3
4
5
//这是demo
console.log('我是控制台输出的信息!');
var a;
console.log(a);
console.log(html2canvas);

 



 

 

2019-06-03  17:04:25

vConsole 在安卓中字体过大的问题

1 let u = window.navigator.userAgent,
2     android = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
3 
4 if(android){
5   $('#__vconsole').attr('style','font-size: 26');
6 }

 

因为vconsole是em单位的,把他的父元素根节点的font-size设置小一点,vconsole里边的子元素的字体自然就小了。

 

 

 

posted @   xing.org1^  阅读(5688)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示