使用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脚本
https://alloyteam.github.io/AlloyLever///加载并显示log面板
https://alloyteam.github.io/AlloyLever/?vconsole=show//加载但不显示log面板
https://alloyteam.github.io/AlloyLever/?vconsole=hideapp.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;