Vue.js devtools 背景簡介
我們chrome插件網之前介紹過Vue.js devtools，是基于google chrome瀏覽器的一款調試vue.js應用的開發者瀏覽器擴展，可以在瀏覽器開發者工具下調試代碼。做前端開發的IT工程師應該比較熟悉這款工具，可以邊側邊欄窗格中的頁面，邊檢查代碼。由于vue是數據驅動的，所以這就存在在開發調試中查看DOM結構并不能解析出什么。但是借助vue-devtools插件，我們就可以很容易的對數據結構進行解析和調試。本文重點介紹Vue.js devtools使用方法，提供chrome插件直接安裝和源代碼安裝兩種方法，你還可以在其中找到常見問題即安裝之后“vue.js not detected“的解決辦法。

主要有2種方式，

第一種：能翻墻的，直擊翻墻進入谷歌插件應用市場搜索：vuejs-devtools??
找到后直接添加到拓展程序里面就可以使用了。（土豪專用）

第二種、源代碼安裝方法

1、在github下載devtools源碼，地址:?https://github.com/vuejs/vue-devtools

?或者直接復制下載的鏈接 直接clone

git clone -b add-remote-devtools https://github.com/vuejs/devtools.git

2. 安裝node.js,下載地址如下：

https://npmmirror.com/mirrors/node/v16.14.2/node-v16.14.2-x64.msi

一般開發vue都會用到 node吧，可以忽略。
?3.?安裝cnpm，不用npm，因為--慢

http://npm install -g cnpm --registry=https://registry.npm.taobao.org

4.?進入devtools目錄--克隆的目錄，安裝依賴? npm install??

5.??構建? ? npm run build

6.?修改manifest.json,文件--將"persistent": false，改為true

7.在google瀏覽器加入插件程序

選擇的插件目錄是devtools\shells\chrome，chrome這個文件夾，非最外層的dev-tools

?

?

?最后為了方便大家的溝通與交流請加QQ群：?625787746

請進QQ群交流：【IT博客技術分享群①】：正在跳轉

總結

以上是生活随笔為你收集整理的google浏览器安装vuejs-devtools插件2022年安装记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。