vue 除錯工具 vue devtools

2021-09-12 07:42:50 字數 560 閱讀 7666

工欲善其事, 必先利其器。

解壓並進入 vue-devtools 目錄下,安裝依賴包

cd vue-devtools

cnpm install

修改 vue-devtools/shells/chrome/manifest.json 檔案,將 persistent 改為 true

(這一步不改也沒啥影響)

在谷歌瀏覽器中輸入 chrome://extensions/ 或者 「更多程式 > 擴充套件程式」。

選擇 vue-devtools > shells > chrome

安裝完畢之後,就可以檢視 vue 的結構了

vue的除錯工具

上圖蠻有意思。vuejs用了很久了,大部分時候看下報錯資訊,結合vue.js devtools檢視下各個元件的資料其實就可以了,但是有時候還是有必要使用debugger的。話分兩頭,本文主要講兩個東西 vue.js devtools開發工具的使用 使用debugger和sourcemap除錯vue元...

Vue除錯工具 vue devtools

vue除錯工具 vue devtools vue devtools是一款基於chrome遊覽器的外掛程式,用於除錯vue應用,這可以極大地提高我們的除錯效率。接下來我們就介紹一下vue devtools的安裝。1.找到 vue devtools的github專案,將其clone到本地 git clo...

Vue除錯工具 vue devtools

vue devtools是一款基於chrome瀏覽器的外掛程式,可以幫我們快速除錯vue專案 vue devtools手動安裝 第一步 找到vue devtools的github專案 並將其clone到本地 第二步 安裝專案所需要的npm包 第三步 編譯專案檔案 npm run build 第四步 ...