vue-devtools

vue-devtools是一款瀏覽器的插件，用于vue應用的調試，這款vue調試神器可以極大提高我們的調試效率。

由于vue是借助數據驅動的，所以在開發調試中查看DOM不能解析出什么，

但是借助vue-devtools插件，就可以很容易的對數據結構進行解析和調試。

安裝

下載地址：

https://github.com/vuejs/vue-devtools#vue-devtools

安裝有多種途徑：

1.通過直接下載谷歌瀏覽器插件（需要翻墻）。

2.下載火狐瀏覽器插件。

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

3.下載后外部引入

https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

官網帶使用說明。

4.自己構建

需要node 6+ 、npm 3+

打開git 命令行，輸入：

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

進入clone下來的vue-devtools文件夾，在此處打開命令行。

輸入：

npm install

或者

cnpm install

(使用淘寶鏡像的話)

?

然后找到目錄下的shells下的chrome下的manifest.json

將persistent:false 改為true

然后再回到目錄下的命令行，輸入：

npm run build

?

谷歌瀏覽器擴展

打開谷歌瀏覽器的擴展程序選項，要勾選開發者模式，才會有加載已解壓的擴展程序，點擊選中shells下的chrome文件夾即可。

chrome文件夾下載：

https://download.csdn.net/download/badao_liumang_qizhi/10735017

使用

運行vue項目，按F12,找到vue。

?

總結

以上是生活随笔為你收集整理的vue-devtools介绍与安装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。