Vue項(xiàng)目之安裝引入使用vconsole方式(生產(chǎn)環(huán)境不顯示)
更新時間：2024年10月17日 10:44:56 作者：SuperYiY
在Vue2開發(fā)中,引入vConsole可以為移動端提供類似瀏覽器F12的調(diào)試工具,支持查看日志、網(wǎng)絡(luò)請求等功能,vConsole是一個輕量、可拓展的前端調(diào)試面板,與框架無關(guān),適用于多種前端框架,安裝方法包括npm和CDN兩種,可根據(jù)項(xiàng)目環(huán)境配置是否顯示調(diào)試面板
vue2中安裝引入使用vconsole
前言
最近在做公司移動端的前端開發(fā)的時候，為了讓測試人員能夠在手機(jī)、平板上也能看到像瀏覽器f12那樣的調(diào)試工具，便于查看日志數(shù)據(jù)和網(wǎng)絡(luò)請求等，專門搜了一下，發(fā)現(xiàn)這個vConsole官方的調(diào)試工具真的很強(qiáng)大，十分好用。
vConsole的簡介
- 一個輕量、可拓展、針對手機(jī)網(wǎng)頁移動端的前端開發(fā)者調(diào)試面板。
- vConsole 是框架無關(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)樹
- 存儲(Storage)：
Cookies,LocalStorage,SessionStorage - 手動執(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)目開發(fā)中，往往有多個環(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é)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧2023-11-11
vue router 跳轉(zhuǎn)后回到頂部的實(shí)例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧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中單個DatePicker限定時間輸入范圍操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue項(xiàng)目報錯:parseComponent問題及解決
這篇文章主要介紹了Vue項(xiàng)目報錯:parseComponent問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)數(shù)據(jù)實(shí)時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue.js通過v-on指令和修飾符系統(tǒng)簡化了事件處理,使開發(fā)者能夠編寫更清晰、更可維護(hù)的代碼,本文給大家介紹Vue.js事件處理v-on 修飾符讓你的事件邏輯更清晰,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-11-11
vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11