這期內(nèi)容當(dāng)中小編將會給大家?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)站價格咨詢: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ū)動的, 這樣就能看到對應(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)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：如何在vue中安裝devtools調(diào)試工具
網(wǎng)站路徑：http://jinyejixie.com/article6/jjjeig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃、企業(yè)建站、定制開發(fā)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)