下載vue-devtools

下載chrome插件vue-devtools代碼，下載地址https://github.com/vuejs/vue-devtools

代碼下載頁面

可以直接使用git下載

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

也可以直接下載zip文件。

vue-devtools版本有很多，可以根據(jù)自己的環(huán)境來下載需要的版本。

安裝依賴

下載之后，進(jìn)入下載的文件夾，安裝依賴

npm install

編譯

編譯文件

npm run build

編譯

編譯之后，會(huì)生成shells文件夾

編譯之后

上傳擴(kuò)展文件

1、打開Chrome的擴(kuò)展程序頁面

擴(kuò)展程序

2、打開‘開發(fā)者模式’

開發(fā)者模式

3、點(diǎn)擊‘加載已解壓的擴(kuò)展程序’按鈕，按照提示，選中shells->chrome上傳擴(kuò)展程序

上傳擴(kuò)展程序

4、上傳成功后刷新當(dāng)前頁面就會(huì)出現(xiàn)上圖所示的devtools圖標(biāo)。

安裝成功

打開任意一個(gè)使用vue開的項(xiàng)目運(yùn)行，打開調(diào)試頁面，最右側(cè)會(huì)出現(xiàn)vue選項(xiàng)，點(diǎn)擊會(huì)出現(xiàn)下圖頁面

使用

至此，vue-devtools調(diào)試工具安裝成功。