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

Vue項目之安裝引入使用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ù)項目環(huán)境配置是否顯示調(diào)試面板

vue2中安裝引入使用vconsole

前言

最近在做公司移動端的前端開發(fā)的時候，為了讓測試人員能夠在手機、平板上也能看到像瀏覽器f12那樣的調(diào)試工具，便于查看日志數(shù)據(jù)和網(wǎng)絡(luò)請求等，專門搜了一下，發(fā)現(xiàn)這個vConsole官方的調(diào)試工具真的很強大，十分好用。

vConsole的簡介

  • 一個輕量、可拓展、針對手機網(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é)點(Element)： HTML 節(jié)點樹
  • 存儲(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、實際項目開發(fā)中，往往有多個環(huán)境。

所以一般做一下判斷，生產(chǎn)環(huán)境運行就不用顯示了

import VConsole from 'vconsole'
const isProd = process.env.NODE_ENV === 'production'
if (!isProd) {
  const vConsole = new VConsole()
  Vue.use(vConsole)
}

使用

運行項目就直接出現(xiàn)右下角這按鈕，點擊就能玩了

直接進入調(diào)試模式，不分方便，和瀏覽器f12一樣

官網(wǎng)演示：http://wechatfe.github.io/vconsole/demo.html

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論