vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。
git地址:https://github.com/Tencent/vConsole
演示案例:http://wechatfe.github.io/vconsole/demo.html
特性
- 查看 console 日志
- 查看网络请求
- 查看页面 element 结构
- 查看 Cookies、localStorage 和 SessionStorage
- 手动执行 JS 命令行
- 自定义插件
使用
在html页面中引入,若是多页面需要在每个页面中引入
1、cdn:
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
console.log("hello world");
</script>
2、npm:
npm install vconsole
Import dist/vconsole.min.js
to your project(node_modules中的位置是vconsole下的dist目录)
<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
For TypeScript users:
import 'path/to/vconsole.min.d.ts';
3、模块化方式引入import / require等
import VConsole from 'vconsole'
const vConsole = new VConsole()
4、webpack plugin
npm install vconsole-webpack-plugin --save-dev
在webpack配置文件中配置:
// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin');
module.exports = {
...
plugins: [
new vConsolePlugin({
filter: [], // 需要过滤的入口文件
enable: true // 发布代码前记得改回 false,开发模式下设置true
}),
...
]
...
}
注意:调试模式用户会看到面板,只适用于开发环境,生产环境中不要引入 vConsole 模块。
支持 5 种不同类型的日志,会以不同的颜色输出到前端面板:
console.log("hello world"); //白底黑字
console.info("hello world"); //白底紫字
console.debug("hello world"); //白底黄字
console.warn("hello world"); //黄底黄字
console.error("hello world"); //红底红字
引入 vConsole 模块后,页面前端将会在右下角出现 vConsole 的悬停按钮,可展开/收起面板:
展开面板如下:
公共属性及方法
//当前 vConsole 的版本号。
vConsole.version
//显示 vConsole 主面板
vConsole.show()
//隐藏 vConsole 主面板
vConsole.hide()
//析构一个 vConsole 对象实例,并将 vConsole 面板从页面中移除。
var vConsole = new VConsole();
vConsole.destroy();
//显示 vConsole 的开关按钮。
vConsole.showSwitch()
//隐藏 vConsole 的开关按钮
vConsole.hideSwitch()