调试工具 - vConsole

简介: 最近做移动端项目比较多,电脑上开发完了上真机必现问题,但是真机上又看不了代码很捉急啊有没有。这两天才发现这个腾讯良品vConsole,以前开发小程序见过,但没想到他竟然还能被应用到我们的h5页面中,废话不多说,先给大佬磕一个。

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

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


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


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


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

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

npm install vconsole

  

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

npm i --S vconsole

  


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

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

  

。。。

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

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

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

 



目录
相关文章
|
8月前
|
移动开发 前端开发 CDN
移动端H5引入vconsole进行调试
移动端H5引入vconsole进行调试
360 0
|
5月前
|
Web App开发 JavaScript 前端开发
IDEA——使用JavaScript Debugger调试代码
IDEA——使用JavaScript Debugger调试代码
40 0
|
5月前
|
Web App开发 资源调度 JavaScript
Chrome 安装 Vue Devtools 调试工具
Chrome 安装 Vue Devtools 调试工具
49 0
|
Web App开发 JavaScript 前端开发
Vue系列教程(04)- VsCode断点调试(Debugger for Chrome)
Vue系列教程(04)- VsCode断点调试(Debugger for Chrome)
408 0
|
移动开发 测试技术
H5调试之vconsole
H5调试之vconsole
122 0
|
移动开发 前端开发
uniapp真机调试,添加vconsole
uniapp真机调试,添加vconsole
345 0
|
Web App开发 JavaScript 前端开发
两个相见恨晚的 Chrome devtool 开发技巧(二)
前言 上篇文章介绍了 源代码面板中的 workspaces 功能, 可以让我们“面向浏览器编程”, 在浏览器中实时的修改样式和html。 自动热更新到文件中进行修改, 大大简化了我们的开发流程, 今天讲讲 控制台面板 以及 一部分的源代码 面板的内容, 绝对干货满满。
228 0
|
Web App开发 前端开发
两个相见恨晚的 Chrome devtool 开发技巧(一)(1)
前言 前段时间给公司分享前端技术, 因为部门中不光是前端,还有后端、数据。 所以选择了分享 浏览器 相关的, 这个不光前端每天在用,研发人员日常也都离不开使用浏览器。 在准备过程中,学习到了两个让我很惊喜的开发技巧,顿感多年前端白干,相见恨晚, 今天先分享浏览器的 workspaces 功能, 完成一个面向浏览器编程, 无限修改浏览器中的样式,即可修改本地代码中样式的功能
131 0
|
Web App开发 缓存 前端开发
两个相见恨晚的 Chrome devtool 开发技巧(一)(2)
这时,我们再去元素审查,修改样式代码, 发现样式改了, 浏览器文件系统中的样式代码改了, 编辑器中的样式代码也改了, 我们的需求到现在基本完成了, 但是如果再次修改,我们会发现右下角的文件系统里的样式文件出现了问号,说明现在是socket不通的状态, 并且编辑器中的代码是没有再次进行更改的。 其实这个问题是浏览器本身不支持这样多次更改, 产生 css 缓存后, 就不再进行热更新了, 禁掉缓存后也没有用, 但是我们尝试每次修改后, 强制刷新页面,在进行修改,发现是可以保证每次修改都生效的。
104 0