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

主要有2種方式，

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

第二種、源代碼安裝方法

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

?或者直接復(fù)制下載的鏈接 直接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

一般開(kāi)發(fā)vue都會(huì)用到 node吧，可以忽略。
?3.?安裝cnpm，不用npm，因?yàn)?-慢

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

4.?進(jìn)入devtools目錄--克隆的目錄，安裝依賴? npm install??

5.??構(gòu)建? ? npm run build

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

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

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

?

?

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

請(qǐng)進(jìn)QQ群交流：【IT博客技術(shù)分享群①】：正在跳轉(zhuǎn)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。