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


vue-devtools是一款基於chrome瀏覽器的插件,用於vue應用的調試,這款vue調試神器可以極大地提高我們的調試效率。幫助我們快速的調試開發vue應用。

直接跳轉小白版本

安裝方法一:

這里以 chrome 瀏覽器為例:

1、打開 chrome 網上應用店,搜索 vue.js

注:如果打不開頁面需要 代理

 

 

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

 

 

 點擊添加擴展程序

 

 

 安裝完成

 

安裝方法二:

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

點擊克隆或下載:

 

 

 2、下載完成之后解壓到你的本地磁盤

3、使用終端命令 cd 至解壓之后的文件夾

 

 

 4、運行命令 npm install 

 

 

 5、運行 npm run build 

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

 

 

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

 

 

 

 

 8、然后我們將插件文件夾里的shells>chorme文件夾直接拖到頁面中,完成安裝

 

安裝方法三:小白版本

前面兩個方法要么需要代理來實現,要么需要對NodeJs有一定的了解,這無疑對某些不喜歡折騰的同學十分頭疼,有沒有一種非常便捷的方法來實現呢?肯定是有的:

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

下載完成之后解壓,打開谷歌擴展程序,點擊左上角:加載已解壓的擴展程序,點擊chrome文件夾

 

 就完成安裝了,是不是非常便捷

 

安裝完成之后就可以使用了,打開開發者工具,就會發現在選項中多出了一個 Vue 的選項,點擊進去就是當前頁面使用的所有組件以及數據都可以在這里進行查看和修改

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM