這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何在vue中安裝devtools調(diào)試工具，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),朝天網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:朝天等地區(qū)。朝天做網(wǎng)站價(jià)格咨詢:18980820575

安裝:

1.到github下載：

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

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

cd vue-devtools
cnpm install

3.修改manifest.json文件

把"persistent":false改成true

 4.編譯代碼

npm run build

5.擴(kuò)展Chrome插件

Chrome瀏覽器 >  更多程序 > 拓展程序

點(diǎn)擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖

6. vue-devtools使用

vue項(xiàng)目, 打開f12, 選擇vue就可以使用了.

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

 怎么樣, 是不是感覺工作效率提高了呢

溫情提示:

1.vue必須引入開發(fā)版, 使用min壓縮版是不能使用devtools進(jìn)行調(diào)試的

2.安裝后, 需要關(guān)閉瀏覽器, 再重新打開, 才能使用

下面在單獨(dú)給大家介紹下vue調(diào)試神器devtools的 安裝

vue  devtools 安裝

1. 下載完成后，在文件夾下 npm install

2. 然后npm run build

3. 完成之后，打開…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的manifest.json修改"persistent": false —> "persistent": true

4. 完成之后，打開…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的webpack.config.js修改為 process.env.NODE_ENV !== 'development'

5. 在chrome://extensions/中打開開發(fā)者模式，將vue-devtools-dev\vue-devtools-dev\shells\chrome 文件夾拉入

上述就是小編為大家分享的如何在vue中安裝devtools調(diào)試工具了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。