Vue項(xiàng)目之安裝引入使用vconsole方式(生產(chǎn)環(huán)境不顯示)
vue2中安裝引入使用vconsole
前言
最近在做公司移動(dòng)端的前端開(kāi)發(fā)的時(shí)候，為了讓測(cè)試人員能夠在手機(jī)、平板上也能看到像瀏覽器f12那樣的調(diào)試工具，便于查看日志數(shù)據(jù)和網(wǎng)絡(luò)請(qǐng)求等，專門搜了一下，發(fā)現(xiàn)這個(gè)vConsole官方的調(diào)試工具真的很強(qiáng)大，十分好用。
vConsole的簡(jiǎn)介
- 一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)移動(dòng)端的前端開(kāi)發(fā)者調(diào)試面板。
- vConsole 是框架無(wú)關(guān)的，可以在 Vue、React 或其他任何框架中使用。
- 現(xiàn)在 vConsole 是微信小程序的官方調(diào)試工具
主要功能
- 日志(Logs)：
console.log|info|error|... - 網(wǎng)絡(luò)(Network)：
XMLHttpRequest,Fetch,sendBeacon - 節(jié)點(diǎn)(Element)： HTML 節(jié)點(diǎn)樹(shù)
- 存儲(chǔ)(Storage)：
Cookies,LocalStorage,SessionStorage - 手動(dòng)執(zhí)行 JS 命令行
- 自定義插件
安裝
- 方式一：npm:
npm install vconsole -D
- 方式二：CDN：
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script> var vConsole = new window.VConsole(); </script>
package.json中，我vconsole的版本
引入
在main.js中
1、直接使用
import VConsole from 'vconsole' Vue.use(vConsole)
2、實(shí)際項(xiàng)目開(kāi)發(fā)中，往往有多個(gè)環(huán)境。
所以一般做一下判斷，生產(chǎn)環(huán)境運(yùn)行就不用顯示了
import VConsole from 'vconsole'
const isProd = process.env.NODE_ENV === 'production'
if (!isProd) {
const vConsole = new VConsole()
Vue.use(vConsole)
}使用
運(yùn)行項(xiàng)目就直接出現(xiàn)右下角這按鈕，點(diǎn)擊就能玩了
直接進(jìn)入調(diào)試模式，不分方便，和瀏覽器f12一樣
官網(wǎng)演示：http://wechatfe.github.io/vconsole/demo.html
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問(wèn)題,通過(guò)使用:key="Math.random()" 可解決樣式錯(cuò)亂問(wèn)題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes,依次來(lái)提升頁(yè)面渲染性能,感興趣的朋友一起看看吧2023-11-11
vue router 跳轉(zhuǎn)后回到頂部的實(shí)例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Element-ui設(shè)置el-table表頭全選框隱藏或禁用
這篇文章主要給大家介紹了關(guān)于Element-ui設(shè)置el-table表頭全選框隱藏或禁用的相關(guān)資料,文中手把手教你實(shí)現(xiàn)el-table實(shí)現(xiàn)跨表格禁用選項(xiàng),需要的朋友可以參考下2023-07-07
Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作
這篇文章主要介紹了Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue項(xiàng)目報(bào)錯(cuò):parseComponent問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目報(bào)錯(cuò):parseComponent問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)從上到下刷新瀑布圖效果(類似QT的),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue.js通過(guò)v-on指令和修飾符系統(tǒng)簡(jiǎn)化了事件處理,使開(kāi)發(fā)者能夠編寫更清晰、更可維護(hù)的代碼,本文給大家介紹Vue.js事件處理v-on 修飾符讓你的事件邏輯更清晰,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-11-11
vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11