vue調(diào)試工具vue-devtools的安裝全過程
先導(dǎo)
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。
幫助我們快速的調(diào)試開發(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)目所需要的依賴包。
安裝方法：npm install 或者 cnpm install （注：cnpm命令是國內(nèi)的鏡像，速度會(huì)快一些）
第三步
編譯項(xiàng)目文件。
編譯方法：npm run build
第四步
修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。
persistent參數(shù)改為true，訪問協(xié)議是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;這三種情況
第五步
添加至瀏覽器：
添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進(jìn)入擴(kuò)展程序頁面，然后點(diǎn)擊“加載已解壓的擴(kuò)展程序...”按鈕；選擇vue-devtools>shells目錄下的Chrome文件夾；還需允許文件地址是否訪問。
如果看不到“加載已解壓的擴(kuò)展程序...”按鈕，先勾選“開發(fā)者模式”。
如下圖：
第六步
使用：
打開我們的vue應(yīng)用，打開調(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.use的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過WebSocket即時(shí)通訊更新
這篇文章主要介紹了Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過WebSocket即時(shí)通訊更新方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了使用vue-cli編寫vue插件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
我們知道ref可以用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),而toRef也可以創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue3中ref與toRef區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-06-06
去除Element-Plus下拉菜單邊框的實(shí)現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進(jìn)行開發(fā)時(shí),我們可能會(huì)遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例
這篇文章主要介紹了Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue3中require報(bào)錯(cuò)require is not defined問題及解決
這篇文章主要介紹了vue3中require報(bào)錯(cuò)require is not defined問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue中實(shí)時(shí)監(jiān)聽div元素盒子的寬高方法
這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時(shí)監(jiān)聽div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計(jì)算屬性和偵聽器來動(dòng)態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下2023-09-09
Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式的相關(guān)資料,前段獲取生成的是base64圖片,需要轉(zhuǎn)化為jpg,png,需要的朋友可以參考下2023-09-09