Vue開(kāi)發(fā)工具之vuejs-devtools安裝教程及常見(jiàn)問(wèn)題解決(最詳細(xì))
這絕對(duì)是最詳細(xì)的Vue開(kāi)發(fā)工具vuejs-devtools安裝教程，相信你只需要5分鐘即可解決所有問(wèn)題
vue-devtools是什么？
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率。
一、vue.js插件下載
- 下載地址：vue.js插件下載；
- 點(diǎn)擊進(jìn)入Vue官網(wǎng)即可下載，共有兩種版本的插件（開(kāi)發(fā)版本：vue.js，生產(chǎn)版本：vue.main.js），建議使用開(kāi)發(fā)版本。開(kāi)發(fā)版本有更多的錯(cuò)誤信息提示和調(diào)試，文件較大，生產(chǎn)辦文件小但是很多提示不全，解決開(kāi)發(fā)中遇到的bug不是很方便。
二、Vue開(kāi)發(fā)工具vuejs-devtools下載
官網(wǎng)下載：Vue開(kāi)發(fā)工具vuejs-devtools下載；
腳本之家下載：vue.js devtools插件下載
官網(wǎng)下載是跳轉(zhuǎn)到github中下載，建議下載master分支中的版本，這個(gè)是最終獲得認(rèn)可的版本，開(kāi)發(fā)分支dev中雖然是最新版本但是不是最終版本。此處默認(rèn)已經(jīng)選擇了開(kāi)發(fā)分支直接下載即可），并且官網(wǎng)下載后你需要通過(guò)npm安裝一些依賴后才能導(dǎo)入谷歌瀏覽器中使用（后續(xù)會(huì)出教程，建議直接使用我準(zhǔn)備好的，畢竟親測(cè)可用）。
可以參考下我已經(jīng)安裝好的依賴包，您可以直接下載后解壓導(dǎo)入到谷歌瀏覽器中使用。
三、Vue開(kāi)發(fā)工具vuejs-devtools安裝+使用
將好男人提供的vuejs-devtools解壓后導(dǎo)入谷歌瀏覽器即可使用。如果是自己下載的前提需要配置manifest.json文件。右擊打開(kāi)manifest.json文件(記事本格式或者其他能打開(kāi)的軟件都行)找到persistent 將狀態(tài)改成true(默認(rèn)false）—好男人已經(jīng)修改過(guò)了，你可以直接使用
根據(jù)下圖打開(kāi)谷歌瀏覽器中的【拓展程序】：
勾選【開(kāi)發(fā)者模式】——點(diǎn)擊【加載已解壓的拓展程序】——選擇剛剛解壓的vuejs-devtools插件整個(gè)文件夾導(dǎo)入即可。導(dǎo)入后即可看到一件導(dǎo)入的vuejs-devtools插件。
用谷歌打開(kāi)文件進(jìn)入調(diào)試模式（按F12即可進(jìn)入），即可在調(diào)試控制臺(tái)看到vue頁(yè)簽。如下圖：
四、常見(jiàn)問(wèn)題解決
安裝好插件后，打開(kāi)文件并打開(kāi)調(diào)試模式后沒(méi)有vue頁(yè)簽，這可很常見(jiàn)，解決方法如下：
方法一：最常見(jiàn)的是我們引入vue插件時(shí)引入了生產(chǎn)版本（vue.main.js）也就是壓縮后的版本，這個(gè)默認(rèn)是關(guān)閉，需要在你的js文件中的創(chuàng)建vue前面寫(xiě)入：Vue.config.devtools = true;即可（不是在vue.main.js寫(xiě)這句話）。
方法二：導(dǎo)入Vue插件是我們選擇開(kāi)發(fā)版本的插件（vue.js）這樣就不存在上訴的問(wèn)題了。
其他方法01：這些方法都是網(wǎng)上流傳的，不過(guò)有人說(shuō)有用，有人說(shuō)沒(méi)用，這個(gè)看大家了，我覺(jué)得按方法一與方法二即可解決大部分問(wèn)題。在擴(kuò)展程序中點(diǎn)擊這個(gè)拓展程序的詳細(xì)信息，開(kāi)啟允許訪問(wèn)文件網(wǎng)址和在無(wú)痕模式下啟用兩項(xiàng)后就可以了。
其他方法02：進(jìn)入調(diào)試模式時(shí)按F5+F12（兩個(gè)同時(shí)按即可），這個(gè)我解決有點(diǎn)扯淡了，但是有人反饋成功過(guò)。也就寫(xiě)一下吧
到此這篇關(guān)于Vue開(kāi)發(fā)工具vuejs-devtools超級(jí)詳細(xì)安裝教程以及常見(jiàn)問(wèn)題解決的文章就介紹到這了,更多相關(guān)vuejs-devtools安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開(kāi)發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫(xiě)法，對(duì)vue?react組件暴露方法相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-11-11
本文主要介紹了使用PM2運(yùn)行Vue項(xiàng)目的具體步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫(xiě)跳轉(zhuǎn)路由,路由組件會(huì)渲染<router-view></router-view>標(biāo)簽,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue.js bootstrap前端實(shí)現(xiàn)分頁(yè)和排序
這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁(yè)和排序效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue-resource安裝過(guò)程及使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)
這篇文章主要介紹了pc端vue 滾動(dòng)到底部翻頁(yè)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
element日期組件實(shí)現(xiàn)只能選擇小時(shí)或分鐘
本文主要介紹了element日期組件實(shí)現(xiàn)只能選擇小時(shí)或分鐘，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue中的依賴注入provide和inject簡(jiǎn)單介紹
這篇文章主要介紹了vue中的依賴注入provide和inject簡(jiǎn)單介紹,provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過(guò)組價(jià)刷新的案列給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue中的計(jì)算屬性和axios基本使用回顧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01