欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目之安裝引入使用vconsole方式(生產(chǎn)環(huán)境不顯示)

 更新時(shí)間：2024年10月17日 10:44:56   作者：SuperYiY  
在Vue2開(kāi)發(fā)中,引入vConsole可以為移動(dòng)端提供類似瀏覽器F12的調(diào)試工具,支持查看日志、網(wǎng)絡(luò)請(qǐng)求等功能,vConsole是一個(gè)輕量、可拓展的前端調(diào)試面板,與框架無(wú)關(guān),適用于多種前端框架,安裝方法包括npm和CDN兩種,可根據(jù)項(xiàng)目環(huán)境配置是否顯示調(diào)試面板

vue2中安裝引入使用vconsole

前言

最近在做公司移動(dòng)端的前端開(kāi)發(fā)的時(shí)候，為了讓測(cè)試人員能夠在手機(jī)、平板上也能看到像瀏覽器f12那樣的調(diào)試工具，便于查看日志數(shù)據(jù)和網(wǎng)絡(luò)請(qǐng)求等，專門(mén)搜了一下，發(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)文章

最新評(píng)論