插件1、vConsole:一個輕量、可拓展、針對手機網頁的前端開發者調試面板。
特性：
查看 console 日誌
查看網絡請求
查看頁面 element 結構
查看 Cookies 和 localStorage
手動執行 JS 命令行
自定義插件
安裝使用：
執行npm install vconsole
<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
插件2、AlloyLever:開發調試發佈，錯誤監控上報，用戶問題定位
安裝使用：
執行npm install alloylever
項目index.html頁面中配置
AlloyLever.config({
cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js', //vconsole的CDN地址
reportUrl: "//a.qq.com", //錯誤上報地址
reportPrefix: 'qun', //錯誤上報msg前綴，一般用於標識業務類型
reportKey: 'msg', //錯誤上報msg前綴的key，用戶上報系統接收存儲msg
otherReport: { //需要上報的其他信息
uin: 491862102
},
entry:"#entry" //請點擊這個DOM元素6次召喚vConsole。//你可以通過AlloyLever.entry('#entry2')設置多個機關入口召喚神龍
})
AlloyLever會監聽window.onerror並把錯誤信息保存下來，並且上報到reportUrl，你也可以召喚到vConsole並顯示出來錯誤和相關日誌。 或者使用這個CDN也可以://pub.idqqimg.com/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js
其他使用：拼接url喚起調試工具
//加載並顯示log面板
//加載但不顯示log面板
//不加載vConsole腳本
以上兩款工具均爲騰訊出品，此博客是個人學習、記錄下的使用心得。兩個調試工具都是調試，個人偏向使用前者，引用方便，調試方便，主要運用在移動端，能夠查看Network、Application等內容。
上述插件，運用範圍廣，不光只提供前端調試，可以接入ionic、微信小程序、Electron等項目中，在跨終端進行調試。