安裝
1.進(jìn)入github搜索vue-devtools,點(diǎn)擊clone，下載項(xiàng)目文件
vue-devtools的github地址
附上地址：傳送門(mén)
2.將壓縮包解壓到電腦目錄，進(jìn)入項(xiàng)目文件夾，是不是很熟悉，沒(méi)錯(cuò)這就是npm項(xiàng)目
3,鼠標(biāo)右鍵打開(kāi)power shell命令行，運(yùn)行 npm install ,安裝依賴包,也可使用cnpm安裝
4.運(yùn)行npm run build ,進(jìn)行構(gòu)建
5.打開(kāi)chrome瀏覽器，點(diǎn)擊選項(xiàng)，更多工具，拓展程序，
6.進(jìn)入shell文件夾，將構(gòu)建出的chrome文件夾拖到chrome拓展程序頁(yè)，點(diǎn)擊確認(rèn)，成功添加新的拓展程序。
使用
1.使用之前必須對(duì)vue項(xiàng)目進(jìn)行相關(guān)設(shè)置，在Vue加載之后設(shè)置立即設(shè)置Vue.config.devtools = true，
2.chrome瀏覽器按f12，即可看到vue菜單，
3，點(diǎn)擊vue菜單，即可看到左側(cè)組件嵌套情況，右側(cè)則可選擇查看組件，vuex數(shù)據(jù)倉(cāng)庫(kù),事件派發(fā)情況，vue-router，工具設(shè)置等等
4,點(diǎn)擊某個(gè)組件，還可以看到該組件對(duì)應(yīng)的真實(shí)dom,傳入的props,data等。
