vconsole

DoINsiSt 发布于2019-06-25 12:30 / 627人阅读

摘要：实例化后才能使用。在不用添加前缀基于得到第一个相应元素。对象基于得到所有的相应元素。未来用途设置触发事件。这个事件的执行函数可由开发者任意写。

vconsole

为移动端开发的前端开发工具。

function

查看console日志。

查看network请求。

查看文档元素。

查看cookie/localstorage.

执行手写的js命令。

自定义插件。

install

npm i vconsole

usage

// 非AMD/CMD
let vConsole = new VConsole()
// AMD/CMD
let VConsole = require("vconsole/path/vc.js")
let vConsole = new VConsole()
// 与vue结合使用时若严格使用eslint准备会报“只加载未使用的problem” // 我也不会解决这个问题。

实例化后才能使用。
直接使用。与console.log无区别。
console.log("system", value) // 会把value输出支system.

api

名称	说明	参数	result
属性
vConsole.version	得到vConsole.的版本号	只读，string
vConsole.option	得到配置项	object	{defaultPlugins: ["systom", "network", "element", "storage"], onReady: fn, onClearLog: fn, maxLogNumber: Number, disableLogScrolling: Boolean}
vConsole.activeTab	设置当前处于激活态的tab的plugin id	只读，String
vConsole.tabList	得到已安装的tab的plugin id	中读，string
vConsole.$dom	得到html（dom对象）
vConsole.set
方法
vConsole.setOption(object/key:[,value])	设置配置项		-
vConsole.destroy()	在页面中移除vConsole
vConsole.addPlugin(pluginId)	添加一个插件		vConsole.option得到的对象中的defaultPlugins里，vConsole把他们每一项叫做一个插件。如：需要添加systom插件，则vConsole.addPlugin("systom")
vConsole.removePlugin(pluginId)	卸载一个插件
vConsole.showTab(pluginId)	激活指定的plugin	String	执行此方法时触发激活态tab的hide事件，再触发指定plugin的show事件
vConsole.show()	显示vConsole	-	触发showConsole
vConsole.hide()	隐藏vConsole	-	触发hideConsole
vConsole.showSwitch()	显示vConsole的开关按钮	-
vConsole.hideSwitch()	隐藏vConsole的开关按钮	-
辅助函数
vConsole.tool.isString(value)
vConsole.tool.isArray(value)
vConsole.tool.isBoolean(value)
vConsole.tool.isElement(value)
vConsole.tool.isFunction(value)
vConsole.tool.isNull(value)
vConsole.tool.isNumber(value)
vConsole.tool.isObject(value)
vConsole.tool.isSymbol(value)
vConsole.tool.isUndefined(value)
vConsole.tool.htmlEncode(String)	把string里的符号使用转义符号
vConsole.tool.setStorage(key, value)	把数据存到localStorage里。key会被添加上vConsole_前缀。
vConsole.tool.getStorage(key)	在localStorage中取出key对应的数据。（在keyk 不用添加vConsole_前缀）
vConsole.$.one(selectors, baseElement)	基于baseElement得到第一个相应元素。	selectors:String, 多种选择方式时使用空格做做分隔。baseElement默认为document.可省略。	dom对象
vConsole.$.all(selectors, baseElement)	基于baseElement得到所有的相应元素。	同上	dom对象
vConsole.log()
vConsole.$.addClass(elements, className)	给指定元素添加class
vConsole.$.removeClass(elements, className)	把指定元素的class属性中移除指定的className
vConsole.$.hasClass(element, className)	判断一个dom元素是否有className
vConsole.$.bind(elements, eventType, fn, useCapture)	为一组dom对象添加指定事件类型对应的函数，是否冒泡（默认false）。
vConsole.$.delegate(element, eventType, selectors, fn)	为一个指定的元素的符合selectors的子元素绑定eventType事件执行fn函数
vConsole.$.render(templateString, data, toString)	使用有templateString把data编译成dom对象(toString: false)/html字符串（toString:true）

编写插件

实例化插件

绑定插件事件

将插件添加到vConsole

1. 实例化插件

let pluginName = new VConsole.VConsolePlugin(id, name)

2. 绑定插件事件

为些插件绑定（vConsole已经预设的）事件类型对应的函数。
可以绑定很多事件

pluginName.on(eventType, fn(){})

3. 将插件添加到vConsole

let vConsole = new VConsole()
let pluginName = new VConsole.VConsolePlugin(PluginId, nameOfShowAtTab)
// 为插件绑定事件
vConsole.addPlugin(pluginName)

插件的事件类型

事件类型	说明	执行函数的参数
init	插件被初始化时触发
renderTab	渲染tab时触发。如果不需要添加新tab请不要绑定此事件	fn(html)
addTopBar	当添加头部按钮时触发	带有按钮配置信息（obj）的数组[{name:"", data: obj, className: "", onClick: fn(){}}]
addTool	添加tool按钮时触发	callback需要的参数是一个包含按钮配置信息的数组[{name: 按钮上的文字, global: Boolean是否是全局可见, onClick: fn点击按钮时触发的函数}]
ready	成功安装插件后触发	-
remove	当前插件被卸载时触发	-
show	当前tab被显示时触发	-
hide	当前tab被隐藏时触发	-
showConsole	vConsole显示时触发	-
hideConsole	vConsole隐藏时触发	-
updateOption	当执行setOption()时触发	-

PluginName.on("eventType", callback)

事件顺序图

限制

这是一个使用vConsole的例子。

在实例化vConsole之前使用console.log("")输出内容可以找到输出来源、行号。实例化后都是由vConsole输出的。看不到输出来源、行号。

开发时使用vConsole不容易定位输出代码。

思考

为自定义的插件绑定事件时触发函数的参数都是callback。这个函数中生成callback函数需要的参数，然后执行callback。可能vconsole的开发者在这个里使用了高阶函数。我在学习这块内容时想了半天才得到这个答案。
学习笔记来自git上的官方文档。作者写的很好。

未来用途

设置addTool触发事件。这个事件的执行函数可由开发者任意写。
些插件不仅有显示输入的功能，还有操作dom的功能。

2018/12/08 by stone

私有云云服务器 vconsole vconsole cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14594.html

vconsole

摘要：实例化后才能使用。在不用添加前缀基于得到第一个相应元素。对象基于得到所有的相应元素。未来用途设置触发事件。这个事件的执行函数可由开发者任意写。 vconsole 为移动端开发的前端开发工具。 function 查看console日志。查看network请求。查看文档元素。查看cookie/localstorage. 执行手写的js命令。自定义插件。 install npm ...

B0B0 2019-08-23 13:58 评论0 收藏0
vconsole

摘要：实例化后才能使用。在不用添加前缀基于得到第一个相应元素。对象基于得到所有的相应元素。未来用途设置触发事件。这个事件的执行函数可由开发者任意写。 vconsole 为移动端开发的前端开发工具。 function 查看console日志。查看network请求。查看文档元素。查看cookie/localstorage. 执行手写的js命令。自定义插件。 install npm ...

raoyi 2019-06-25 17:03 评论0 收藏0
使用vconsole进行移动端调试

摘要：可使用进行安装地址在项目的根文件的标签中引入也可使用免安装地址同样需要放在项目根文件的标签中可使用npm进行安装 GitHub地址：https://github.com/Tencent/vC... npm install vconsole 在项目的根html文件的标签中引入dist/vconsole.min.js // init vConsole var vCon...

RobinTang 2019-08-23 15:39 评论0 收藏0
github 上有趣又实用的前端项目（持续更新，欢迎补充）

摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架一个专门用来做 HTML 幻灯片的框架，支持 HTM...

zzzmh 2019-08-23 12:09 评论0 收藏0
github 上有趣又实用的前端项目（持续更新，欢迎补充）

摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架一个专门用来做 HTML 幻灯片的框架，支持 HTM...

morgan 2019-08-30 15:54 评论0 收藏0