经常遇到h5上面网页不好调试的问题，推荐一个腾讯爸爸的开源项目vconsole,alloylever
使用AlloyLever来搞定开发调试发布，错误监控上报，用户问题定位
https://www.cnblogs.com/CyLee/p/6970914.html
Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现
http://www.cnblogs.com/liyinSakura/p/9883777.html
官方文档 AlloyLever https://github.com/AlloyTeam/AlloyLever
官方文档 vConsole https://github.com/WechatFE/vConsole
//不加载vConsole脚本
//加载并显示log面板
//加载但不显示log面板
自己改良版 支持alloylever的本地存储查看
app.vue
<template>
<div id="app">
<span id="entry" class="vc-tigger">召唤神龙</span>
</div>
</template>
<script>
import alloylever from '../config/alloy-lever.js';
export default {
name: "App",
components: {
},
data() {
return {
};
},
mounted() {
alloylever.entry('#entry');
},
destroyed() {
}
};
</script>
<style>
/* 移动端调试s */
.vc-tigger{
position: fixed;
bottom: 0;
left: 0;
width: 20px;
height: 20px;
z-index: 10000001;
opacity: 0;
}
/* 移动端调试e */
</style>
alloy-lever.js
/*!
* AlloyLever v1.0.4 By dntzhang
* Github: https://github.com/AlloyTeam/AlloyLever
* MIT Licensed.
*/
var exportAlloyLever;
(function (root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory()
else if(typeof define === 'function' && define.amd)
define([], factory)
else if(typeof exports === 'object')
exports["AlloyLever"] = factory()
else
root["AlloyLever"] = factory()
})(this, function() {
var AlloyLever = {
}
AlloyLever.settings = {
// cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',
cdn:'//cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js',
reportUrl: null,
reportPrefix: '',
reportKey: 'msg',
otherReport: null,
entry: null
}
AlloyLever.store = []
// 使用alloyLever 还是 vconsole.min.js的打印 开启会造成电脑调试被覆盖
// var methodList = ['log', 'info', 'warn', 'debug', 'error'];
// methodList.forEach(function(item) {
// var method = console[item];
// console[item] = function() {
// AlloyLever.store.push({
// logType: item,
// logs: arguments
// });
// method.apply(console, arguments);
// }
// });
AlloyLever.logs = []
AlloyLever.config = function(config){
for(var i in config){
if(config.hasOwnProperty(i)){
AlloyLever.settings[i] = config[i]
}
}
if(config.entry){
window.addEventListener('load', function() {
AlloyLever.entry(config.entry)
})
}
var parameter = getParameter('vconsole')
if(parameter) {
if (parameter === 'show') {
AlloyLever.vConsole(true)
} else {
AlloyLever.vConsole(false)
}
}
}
AlloyLever.vConsole = function(show){
loadScript(AlloyLever.settings.cdn, function() {
//support vconsole3.0
if (typeof vConsole === 'undefined') {
window.vConsole = new VConsole({
defaultPlugins: ['system', 'network', 'element', 'storage'],
maxLogNumber: 5000
})
}
var i = 0,
len = AlloyLever.store.length
for (; i < len; i++) {
var item = AlloyLever.store[i]
//console[item.type].apply(console, item.logs)
//prevent twice log
item.noOrigin = true
window.vConsole.pluginList.default.printLog(item)
}
if(show) {
try {
window.vConsole.show()
} catch (e) {
}
window.addEventListener('load', function () {
window.vConsole.show()
})
}
})
}
var parameter = getParameter('vconsole')
if (parameter) {
if (parameter === 'show') {
AlloyLever.vConsole(true)
} else {
AlloyLever.vConsole(false)
}
}
AlloyLever.entry = function(selector) {
var count = 0,
entry = document.querySelector(selector)
if(entry) {
entry.addEventListener('click', function () {
count++
if (count > 5) {
count = -10000
AlloyLever.vConsole(true)
}
})
}
}
window.onerror = function(msg, url, line, col, error) {
var newMsg = msg
if (error && error.stack) {
newMsg = processStackMsg(error)
}
if (isOBJByType(newMsg, "Event")) {
newMsg += newMsg.type ?
("--" + newMsg.type + "--" + (newMsg.target ?
(newMsg.target.tagName + "::" + newMsg.target.src) : "")) : ""
}
newMsg = (newMsg + "" || "").substr(0,500)
AlloyLever.logs.push({
msg: newMsg,
target: url,
rowNum: line,
colNum: col
})
if (msg.toLowerCase().indexOf('script error') > -1) {
console.error('Script Error: See Browser Console for Detail')
} else {
console.error(newMsg)
}
var ss = AlloyLever.settings
if(ss.reportUrl) {
var src = ss.reportUrl + (ss.reportUrl.indexOf('?')>-1?'&':'?') + ss.reportKey + '='+( ss.reportPrefix?('[' + ss.reportPrefix +']'):'')+ newMsg+'&t='+new Date().getTime()
if(ss.otherReport) {
for (var i in ss.otherReport) {
if (ss.otherReport.hasOwnProperty(i)) {
src += '&' + i + '=' + ss.otherReport[i]
}
}
}
new Image().src = src
}
}
function loadScript(src, callback){
var s,
r,
t
r = false
s = document.createElement('script')
s.type = 'text/javascript'
s.src = src
s.onload = s.onreadystatechange = function() {
//console.log( this.readyState ); //uncomment this line to see which ready states are called.
if ( !r && (!this.readyState || this.readyState == 'complete') )
{
r = true
callback()
}
}
t = document.getElementsByTagName('script')[0]
t.parentNode.insertBefore(s, t)
}
function getParameter(n) {
var m = window.location.hash.match(new RegExp('(?:#|&)' + n + '=([^&]*)(&|$)')),
result = !m ? '' : decodeURIComponent(m[1])
return result ||getParameterByName(n)
}
function getParameterByName(name, url) {
if (!url) url = window.location.href
name = name.replace(/[\[\]]/g, "\\$&")
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url)
if (!results) return null
if (!results[2]) return ''
return decodeURIComponent(results[2].replace(/\+/g, " "))
}
function isOBJByType(o, type) {
return Object.prototype.toString.call(o) === "[object " + (type || "Object") + "]"
}
function processStackMsg (error) {
var stack = error.stack
.replace(/\n/gi, "")
.split(/\bat\b/)
.slice(0, 9)
.join("@")
.replace(/\?[^:]+/gi, "")
var msg = error.toString()
if (stack.indexOf(msg) < 0) {
stack = msg + "@" + stack
}
return stack
}
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)")
if(arr=document.cookie.match(reg))
return unescape(arr[2])
else
return null
}
AlloyLever.getCookie = getCookie
AlloyLever.getParameter= getParameter
AlloyLever.loadScript = loadScript
// return AlloyLever
exportAlloyLever = AlloyLever;
});
export default exportAlloyLever;