這絕對是最詳細(xì)的Vue開發(fā)工具vuejs-devtools安裝教程，相信你只需要5分鐘即可解決所有問題

vue-devtools是什么？

vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率。

一、vue.js插件下載

• 下載地址：vue.js插件下載；
• 點(diǎn)擊進(jìn)入Vue官網(wǎng)即可下載，共有兩種版本的插件（開發(fā)版本：vue.js，生產(chǎn)版本：vue.main.js），建議使用開發(fā)版本。開發(fā)版本有更多的錯(cuò)誤信息提示和調(diào)試，文件較大，生產(chǎn)辦文件小但是很多提示不全，解決開發(fā)中遇到的bug不是很方便。

二、Vue開發(fā)工具vuejs-devtools下載

官網(wǎng)下載：Vue開發(fā)工具vuejs-devtools下載；

腳本之家下載：vue.js devtools插件下載

官網(wǎng)下載是跳轉(zhuǎn)到github中下載，建議下載master分支中的版本，這個(gè)是最終獲得認(rèn)可的版本，開發(fā)分支dev中雖然是最新版本但是不是最終版本。此處默認(rèn)已經(jīng)選擇了開發(fā)分支直接下載即可），并且官網(wǎng)下載后你需要通過npm安裝一些依賴后才能導(dǎo)入谷歌瀏覽器中使用（后續(xù)會(huì)出教程，建議直接使用我準(zhǔn)備好的，畢竟親測可用）。

可以參考下我已經(jīng)安裝好的依賴包，您可以直接下載后解壓導(dǎo)入到谷歌瀏覽器中使用。

三、Vue開發(fā)工具vuejs-devtools安裝+使用

將好男人提供的vuejs-devtools解壓后導(dǎo)入谷歌瀏覽器即可使用。如果是自己下載的前提需要配置manifest.json文件。右擊打開manifest.json文件(記事本格式或者其他能打開的軟件都行)找到persistent 將狀態(tài)改成true(默認(rèn)false）—好男人已經(jīng)修改過了，你可以直接使用

根據(jù)下圖打開谷歌瀏覽器中的【拓展程序】：

勾選【開發(fā)者模式】——點(diǎn)擊【加載已解壓的拓展程序】——選擇剛剛解壓的vuejs-devtools插件整個(gè)文件夾導(dǎo)入即可。導(dǎo)入后即可看到一件導(dǎo)入的vuejs-devtools插件。

用谷歌打開文件進(jìn)入調(diào)試模式（按F12即可進(jìn)入），即可在調(diào)試控制臺(tái)看到vue頁簽。如下圖：

四、常見問題解決

安裝好插件后，打開文件并打開調(diào)試模式后沒有vue頁簽，這可很常見，解決方法如下：

方法一：最常見的是我們引入vue插件時(shí)引入了生產(chǎn)版本（vue.main.js）也就是壓縮后的版本，這個(gè)默認(rèn)是關(guān)閉，需要在你的js文件中的創(chuàng)建vue前面寫入：Vue.config.devtools = true;即可（不是在vue.main.js寫這句話）。

方法二：導(dǎo)入Vue插件是我們選擇開發(fā)版本的插件（vue.js）這樣就不存在上訴的問題了。

其他方法01：這些方法都是網(wǎng)上流傳的，不過有人說有用，有人說沒用，這個(gè)看大家了，我覺得按方法一與方法二即可解決大部分問題。在擴(kuò)展程序中點(diǎn)擊這個(gè)拓展程序的詳細(xì)信息，開啟允許訪問文件網(wǎng)址和在無痕模式下啟用兩項(xiàng)后就可以了。

其他方法02：進(jìn)入調(diào)試模式時(shí)按F5+F12（兩個(gè)同時(shí)按即可），這個(gè)我解決有點(diǎn)扯淡了，但是有人反饋成功過。也就寫一下吧

到此這篇關(guān)于Vue開發(fā)工具vuejs-devtools超級詳細(xì)安裝教程以及常見問題解決的文章就介紹到這了,更多相關(guān)vuejs-devtools安裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論