vue-devtools 是一款基于 chrome 游覽器的插件崔拥，用于調(diào)試 vue 應(yīng)用，這可以極大地提高我們的調(diào)試效率凤覆。
vue-devtools 可以從 chrome 商店直接下載安裝链瓦，非常簡單，不過對于國內(nèi)程序員而言盯桦，通過這種方式安裝并不太現(xiàn)實(shí)慈俯。因此，大多都是通過源碼編譯拥峦，手動安裝贴膘。
vue-devtools 的安裝需要 Yarn<small>（進(jìn)行編譯）</small>，因此事镣，在安裝 vue-devtools 前需要先安裝 Yarn 步鉴。
::: warning 注意
你也可以不安裝 yarn 來進(jìn)行編譯 vue-devtools揪胃，直接找老師要一份 shell-chrome 即可璃哟！
:::
Step 0：安裝 Yarn
作為包管理器，NPM 不是沒有競爭對手喊递。Yarn 就是后起之秀随闪。<small>有意思的是，可以通過 NPM 來安裝 Yarn 骚勘。</small>
為了減少初學(xué)時(shí)混用兩個(gè)包管理工具所帶來的混亂铐伴，我們僅在編譯 vue-devtools 時(shí)使用 yarn撮奏，其他場景<small>（雖然可以，但是）</small>我們?nèi)允褂?NPM 当宴。
通過 npm 安裝 yarn：
npm install -g yarn
安裝完畢后畜吊，可直接執(zhí)行 yarn -v 命令查看 yarn 的版本，以驗(yàn)證是否安裝成功户矢。
-
查看 yarn 的中央倉庫網(wǎng)址：
yarn config get registry -
修改 yarn 的中央倉庫網(wǎng)址：
yarn config set registry http://registry.npm.taobao.org/ -
查看 yarn 全局安裝的命令的源碼路徑和二進(jìn)制執(zhí)行文件路徑：
yarn global dir yarn global bin
注意玲献，和 npm 一樣，這兩個(gè)路徑和局部安裝無關(guān)梯浪。
Step 1：下載 vue-devtools
從 github 上下載 vue-devtools 捌年。
git clone https://github.com/vuejs/vue-devtools.git
記住你所下載的 vue-devtools 的本地路徑，接下來你要進(jìn)入到這個(gè)目錄中挂洛，執(zhí)行后續(xù)操作礼预。
Step 2：編譯 vue-devtools
進(jìn)入到 vue-devtools 目錄，執(zhí)行安裝命令：
yarn install
安裝過程會執(zhí)行一段時(shí)間<small>（1+ 分鐘）</small>虏劲，請耐心等待托酸。
install 命令執(zhí)行結(jié)束后，執(zhí)行編譯命令：
yarn run build
編譯結(jié)束后伙单，你的 vue-devtools 目錄下會出現(xiàn)一個(gè)名為 packages 的文件夾获高，在這個(gè)文件夾中，又有一個(gè)名為 shell-chrome 的文件夾吻育。記住這個(gè) shell-chrome 文件夾念秧，未來我們要是用到它。
Step 3：Chrome 安裝 vue-devtools
找到 packages 文件夾布疼，這個(gè)文件夾下會有一個(gè) shell-chrome 文件夾摊趾。
-
打開 Chrome 的『更多工具』下的『擴(kuò)展程序』。
vue-devtools-1 -
查看游两，并確保右上角的『開發(fā)者模式』 是打開的砾层。
vue-devtools-2 -
點(diǎn)擊左側(cè)的『加載已解壓的擴(kuò)展程序』，在彈出的窗口中贱案，選中上述的『shell-chrome』目錄肛炮，點(diǎn)擊確定。安裝結(jié)束宝踪。
vue-devtools-3vue-devtools-4
-
安裝成功后是這樣的：
vue-devtools-5 -
點(diǎn)擊上圖的
詳細(xì)信息進(jìn)入瞅一眼侨糟，確保允許訪問文件網(wǎng)址開關(guān)是打開的。vue-devtools-6 -
在地址欄右側(cè)固定 vue-devtools瘩燥，以方便使用秕重。
vue-devtools-7固定后，是這樣的：vue-devtools-8 -
當(dāng)你打開任意一個(gè)使用了 vue 的頁面時(shí)厉膀，會看到上圖的 vue-devtools 圖標(biāo)亮起來：
vue-devtools-9如果 vue-devtools 圖標(biāo)沒有亮起來溶耘，原因見最后二拐。
-
在你的
更多工具>開發(fā)者工具中，你會發(fā)現(xiàn)多出來一個(gè) vue 選項(xiàng)：vue-devtools-10如果你的
開發(fā)者工具中沒有多出來一個(gè) vue 選項(xiàng)凳兵，原因見最后百新。 -
你將看到 vue-devtools 工具展現(xiàn)的該頁面的 vue 相關(guān)信息：
vue-devtools-11
當(dāng)你打開 vue 頁面時(shí)
- vue-devtools 圖標(biāo)沒有亮起來，或者
- 在
開發(fā)者工具下死活找不到多出來的 vue 選項(xiàng)
你點(diǎn)擊 vue-devtools 圖標(biāo)庐扫，會出現(xiàn)如下圖提示信息：
這是因?yàn)橐魉铮褂?vue-devtools 的前提是，你的頁面所使用的『vue.js 必須是開發(fā)版』聚蝶，而不是生產(chǎn)版杰妓。因?yàn)?vue-devtools 所展示的信息的來源，來源于 vue.js 開發(fā)版『額外』的功能和信息碘勉。
檢查你的頁面上所引入的 vue.js：
<!-- 這引入的是 vue.js 的開發(fā)版本巷挥。用它，用它验靡，用它倍宾。-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 這引入的是 vue.js 的生產(chǎn)版本。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
-->
