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