附件：http://www.lvpaiqingdao.com/upfile/2021/07/20210722160032_786.zip

本文主要介紹 vue的調(diào)試工具 vue-devtools 的安裝和使用

工欲善其事, 必先利其器, 快快一起來用vue-devtools來調(diào)試開發(fā)你的vue項目吧

安裝: 

1.到github下載：（！下載一定要記得是master主分支的代碼，默認克隆后進入的是dev分支，執(zhí)行npm run build會報錯，執(zhí)行g(shù)it checkout master切換到master主分支）

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

2.在vue-devtools目錄下安裝依賴包

3.依賴包下載完后執(zhí)行npm run build,編譯打包成功后會在shells下生成chrome文件夾。此文件夾就是用來放入chrome的擴展程序。

npm run build

4.擴展Chrome插件

打開Chrome瀏覽器 >選擇更多工具>擴展程序   >打開開發(fā)者模式

點擊加載已解壓的擴展程序, 找到剛才生成的chrome文件夾，選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖

 6. vue-devtools使用

vue項目, 打開f12, 選擇vue就可以使用了.

vue是數(shù)據(jù)驅(qū)動的, 這樣就能看到對應(yīng)數(shù)據(jù)了, 方便我們進行調(diào)試

溫馨提示：

推薦一個超級方便的下載vue-devtools插件的地址吧，再不用這么麻煩https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521，

下載拖拽到谷歌瀏覽器就行了

1. 下載插件

到收藏貓插件下載插件

https://chrome.pictureknow.com

并在瀏覽器提示中選擇【保留】

2. 打開瀏覽器擴展安裝頁面

點擊瀏覽器右上角?>更多工具> 點擊擴展程序

3. 安裝插件

在擴展中心打開右上角的【開發(fā)者模式】按鈕，然后【刷新】頁面，把下載好的 .crx 文件拖入擴展中心

是不是更簡單啦；裝成功了，可以來點個推薦哦