公司開發(fā)的app是使用ionic開發(fā)的卸奉，在手機端開發(fā)調(diào)試的時候一些接口問題調(diào)試需要連接瀏覽器蘋果手機使用safari自帶的開發(fā)調(diào)試安卓手機使用chrome的inspect調(diào)試可都，十分不方便栅盲，因此領(lǐng)導(dǎo)提出有沒有辦法把接口報錯在手機上顯示出來籍胯，以便出問題不用連電腦就能好知道
經(jīng)過調(diào)研于是有兩種方法
1、將接口報錯信息都是用提示框的形式展示出來
優(yōu)點：開發(fā)方便糜芳，直接將錯誤信息輸出即可
缺點：不美觀鲁纠，一旦多個接口報錯彈出多個彈框操作不方便
2、使用vconsle將類似瀏覽器一樣調(diào)試引入到手機中
優(yōu)點：操作方便，錯誤信息看的全
缺點：需要調(diào)研蝗柔，引入插件
權(quán)衡了一下最終選擇了第二種 vconsole
vconsole
一個輕量闻葵、可拓展、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板癣丧。
特性
- 查看 console 日志
- 查看網(wǎng)絡(luò)請求
- 查看頁面 element 結(jié)構(gòu)
- 查看 Cookies槽畔、localStorage 和 SessionStorage
- 手動執(zhí)行 JS 命令行
- 自定義插件
上手
下載 vConsole 的最新版本。（不要直接下載 dev 分支下的 dist/vconsole.min.js）
或者使用 npm 安裝：
npm install vconsole
添加到項目后如何使用
1.引入 vconsole文件中dist下的vconsole.min.js 到項目中
2.初始化VConsole
var VConsole = require('vconsole.min.js文件的路徑一定要引對');
var vConsole = new VConsole();
創(chuàng)建之后就會出現(xiàn)下圖的樣子就成功啦
具體的官方文檔
https://github.com/Tencent/vConsole/blob/v3.3.0/doc/tutorial_CN.md
在成功引入之后領(lǐng)導(dǎo)又要求可以控制這個vconsole的打開和關(guān)閉就是在正式版的時候也加入不過只有打開調(diào)試模式的時候才能看到
于是設(shè)置了變量控制他的顯示和隱藏記錄一下
// 打開或關(guān)閉調(diào)試的vconsole
versionClk() {
let debugOn = localStorage.getItem('debug');
if (debugOn !== '1') {
document.getElementById('__vconsole').style.display = 'block';
localStorage.setItem('debug', '1');
}else{
document.getElementById('__vconsole').style.display = 'none';
localStorage.setItem('debug', '0');
}
}
