vue-devtools

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

由于vue是借助數(shù)據(jù)驅(qū)動(dòng)的，所以在開發(fā)調(diào)試中查看DOM不能解析出什么，

但是借助vue-devtools插件，就可以很容易的對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試。

安裝

下載地址：

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

安裝有多種途徑：

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

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

官網(wǎng)帶使用說(shuō)明。

4.自己構(gòu)建

需要node 6+ 、npm 3+

打開git 命令行，輸入：

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

進(jìn)入clone下來(lái)的vue-devtools文件夾，在此處打開命令行。

輸入：

npm install

或者

cnpm install

(使用淘寶鏡像的話)

?

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

將persistent:false 改為true

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

npm run build

?

谷歌瀏覽器擴(kuò)展

打開谷歌瀏覽器的擴(kuò)展程序選項(xiàng)，要勾選開發(fā)者模式，才會(huì)有加載已解壓的擴(kuò)展程序，點(diǎn)擊選中shells下的chrome文件夾即可。

chrome文件夾下載：

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

使用

運(yùn)行vue項(xiàng)目，按F12,找到vue。

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。