Vue瀏覽器調試工具VueTools安裝以及使用

vue-devtools是一款基於chrome瀏覽器的插件，用於vue應用的調試，這款vue調試神器能夠極大地提升咱們的調試效率。幫助咱們快速的調試開發vue應用。

直接跳轉小白版本

安裝方法一：

這裏以 chrome 瀏覽器爲例：

一、打開 chrome 網上應用店，搜索 vue.js

注：若是打不開頁面須要 代理

 

 

 選擇第一個，點擊 添加至chrome

 

 

 點擊添加擴展程序

 

 

 安裝完成

 

安裝方法二：

一、打開 網址：https://github.com/vuejs/vue-devtools

點擊克隆或下載：

 

 

 二、下載完成以後解壓到你的本地磁盤

三、使用終端命令 cd 至解壓以後的文件夾

 

 

 四、運行命令 npm install 

 

 

 五、運行 npm run build 

六、修改shells>chrome文件夾下的mainifest.json 中的persistant爲true

 

 

 七、找到瀏覽器擴展程序，勾選開發者模式選項

 

 

 

 

 八、而後咱們將插件文件夾裏的shells>chorme文件夾直接拖到頁面中，完成安裝

 

安裝方法三：小白版本

前面兩個方法要麼須要代理來實現，要麼須要對NodeJs有必定的瞭解，這無疑對某些不喜歡折騰的同窗十分頭疼，有沒有一種很是便捷的方法來實現呢？確定是有的：

能夠經過個人GitHub：https://github.com/chenlaogou111/VueDevTools倉庫來進行下載，源碼已經通過npm處理，對某些配置文件也都進行了配置，下載直接就可使用：

下載完成以後解壓，打開谷歌擴展程序，點擊左上角：加載已解壓的擴展程序，點擊chrome文件夾

 

 就完成安裝了，是否是很是便捷

 

安裝完成以後就可使用了，打開開發者工具，就會發如今選項中多出了一個 Vue 的選項，點擊進去就是當前頁面使用的全部組件以及數據均可以在這裏進行查看和修改