1. 程式人生 > >vue-devtools是vue瀏覽器調試工具

vue-devtools是vue瀏覽器調試工具

系統 下載安裝 div vue ani 一點 jpg head 分享圖片

開vue官網在vue-生態系統-工具可以看到vue-devtools這個工具:

vue-devtools是一款基於chrome遊覽器的插件,用於調試vue應用,這可以極大地提高我們的調試效率。接下來我們就介紹一下vue-devtools的安裝。

vuet調試工具兩種安裝方式

chrome商店直接安裝

在谷歌chrome商店直接下載安裝,非常簡單。不過要註意的一點就是,需要FQ才能下載。也可以下載谷歌訪問助手,可以使用chrome擴展程序。


手動安裝

直接找到vue生態系統-工具-vue-devtools,登錄到github地址,

git clone https://github.com/vuejs/vue-devtools.git

安裝項目所需要的npm包

npm install

編譯項目文件

cd vue-devtools
npm run build

修改manifest.json文件

"persistent":false改成true

添加至chrome瀏覽器

瀏覽器輸入地址chrome://extensions/打開擴展程序,點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入

技術分享圖片

打開可以看到安裝成功了。

技術分享圖片

使用

技術分享圖片

vue-devtools是vue瀏覽器調試工具