Vue DevTools調(diào)試工具的使用

發(fā)布時間：2020-10-21 16:20:25 來源：腳本之家閱讀：167 作者：gavid0124 欄目：web開發(fā)

因為工作要求，目前主要在用Vue.js技術(shù)棧做開發(fā)，調(diào)試是必不可少的，這里會用的Vue DevTools的調(diào)試工具，問題就出在這里，當(dāng)用Vue DevTools做調(diào)試時，很多時候都不能用，提示沒有監(jiān)測到Vue，這讓工作效率瞬間拉低了。

安裝:

1.到github下載：

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

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

cd vue-devtools

cnpm install

修正Vue DevTools

好了，開始正題，下面來說一下修正的方法。

先從官網(wǎng)把Vue DevTools下載下來（https: //github.com/vuejs/vue-devtools）。

Vue DevTools調(diào)試工具的使用

關(guān)鍵步驟一.修改persistent

找到文件vue-devtools/shells/chrome/manifest.json，修改persistent為true。

Vue DevTools調(diào)試工具的使用

保存后，編譯一下：

Vue DevTools調(diào)試工具的使用

關(guān)鍵步驟二.勾選允許訪問文件網(wǎng)址

上一步已經(jīng)把Vue DevTools寫好了，接下來是安裝這個擴(kuò)展。

打開Chrome，在地址欄輸入chrome://extensions/，直接進(jìn)入Chrome的擴(kuò)展。

勾選最上方的開發(fā)者模式，再點擊“加載已解壓的擴(kuò)展程序…”，路徑為：vue-devtools-master/shells/chrome

Vue DevTools調(diào)試工具的使用

勾選允許訪問文件網(wǎng)址

Vue DevTools調(diào)試工具的使用關(guān)鍵步驟三.加入Vue文件中加入Vue.config.devtools

Vue.config.devtools = true; //這步很重要
new Vue({
 el: '#app',
 data: {
  a: 123,
 }
});

搞定！

效果

Vue DevTools調(diào)試工具的使用

下載已修正版的Vue DevTools下載：vueDevTools(可監(jiān)測修正版).zip

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

Vue DevTools調(diào)試工具的使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽