vue調(diào)試工具vue-devtools的安裝全過(guò)程
先導(dǎo)
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。
幫助我們快速的調(diào)試開(kāi)發(fā)vue應(yīng)用。
第一步
我們可以先從github上找到vue-devtools的項(xiàng)目，下載到本地。下載vue-devtools鏈接。
克隆方法：git clone https://github.com/vuejs/vue-devtools.git
第二步
解壓下載好的文件，進(jìn)入到vue-devtools目錄，安裝項(xiàng)目所需要的依賴(lài)包。
安裝方法：npm install 或者 cnpm install （注：cnpm命令是國(guó)內(nèi)的鏡像，速度會(huì)快一些）
第三步
編譯項(xiàng)目文件。
編譯方法：npm run build
第四步
修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。
persistent參數(shù)改為true，訪問(wèn)協(xié)議是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;這三種情況
第五步
添加至瀏覽器：
添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進(jìn)入擴(kuò)展程序頁(yè)面，然后點(diǎn)擊“加載已解壓的擴(kuò)展程序...”按鈕；選擇vue-devtools>shells目錄下的Chrome文件夾；還需允許文件地址是否訪問(wèn)。
如果看不到“加載已解壓的擴(kuò)展程序...”按鈕，先勾選“開(kāi)發(fā)者模式”。
如下圖：
第六步
使用：
打開(kāi)我們的vue應(yīng)用，打開(kāi)調(diào)試，點(diǎn)擊vue擴(kuò)展圖標(biāo)，就可以使用了。
如下圖：
注：如果點(diǎn)擊vue擴(kuò)展圖標(biāo)還是提示：
Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以檢查下你是否使用的是壓縮版本的vue.min.js，使用vue.min.js默認(rèn)為生產(chǎn)環(huán)境的，需要改為vue.js.結(jié)束。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
虛擬DOM的概念是通過(guò)狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹(shù)，然后使用虛擬節(jié)點(diǎn)樹(shù)進(jìn)行渲染。在渲染之前，會(huì)使用新生成的虛擬節(jié)點(diǎn)和上一次生成的虛擬節(jié)點(diǎn)進(jìn)行對(duì)比，只渲染不同的部分2022-08-08
vue3中各種類(lèi)型文件進(jìn)行預(yù)覽功能實(shí)例
在vue移動(dòng)端項(xiàng)目中經(jīng)常遇到這樣的需求,對(duì)一些上傳的附件可以點(diǎn)擊之后在線(xiàn)預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類(lèi)型文件進(jìn)行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2021-09-09
有不少的前端需求都需要使用到富文本編輯器,所以這篇文章主要來(lái)和大家介紹一下如何在Vue3項(xiàng)目中使用富文本編輯器,感興趣的可以了解下2024-04-04
Axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶(hù)端,本質(zhì)上也是對(duì)原生XHR的封裝,只不過(guò)它是Promise的實(shí)現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑的解決方法
本文給大家介紹vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2023-04-04
本篇文章主要介紹了Vue鍵盤(pán)事件用法總結(jié)，詳細(xì)的介紹了各種鍵盤(pán)事件的用法，有興趣的可以了解一下2017-04-04
Vue3中provide和inject數(shù)據(jù)修改規(guī)則
在Vue3中,通過(guò)inject接收到的數(shù)據(jù)是否可以直接修改,取決于provide提供的值的類(lèi)型和響應(yīng)式處理方式,本文給大家介紹Vue3中provide和inject數(shù)據(jù)修改規(guī)則,感興趣的朋友一起看看吧2025-04-04
這篇文章主要為大家詳細(xì)介紹了vue.js初學(xué)入門(mén)教程第二篇,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11