為什么要安裝Vue DevTools？它是怎么來的？
做為一個剛起步學習Vue開發(fā)的大叔，首先從教程上得知要安裝這個extension，目的為了我們更好的調(diào)度Vue代碼！納尼??！這玩意兒怎么調(diào)試？從哪里操作？到底怎么玩？我是新人，是小白，我會告訴你我走的路，但對于大神來說，可能存在誤人子弟的情形??！所以希望高手請多多指教（在此跪謝~），和小白一起互鑒！
我們在瀏覽器（Google Chrome）中預覽開發(fā)效果時，請按F12鍵，我們選擇“Console”標簽，會出現(xiàn)如下圖所示的界面。
企業(yè)微信截圖_c19ff2fd-ace2-4baa-9047-b7f486cfca57.png
我們可直接點擊提示的Github來獲取最新源碼！
諸多教程會告訴你直接下載源碼，但實事證明，你可能就被欺騙的那個，因為下圖就是最好說服你的理由?。。。?！
cbda8f8b-a942-4cf9-93fc-3043b31b5257.png
678525c7-d4f6-4141-a787-26d08cebbbe6.png
以為跟著教程準沒錯，但如果按教程來，絕對會讓一個小白會哭爹罵娘的，只怪我們太年輕了~注意了，注意了，注意了，下面是正確的姿勢：
7fa6a4c1-1eb8-4d19-87d7-885528491c14.png
或是直接用命令行：
git clone -b add-remote-devtools https://github.com/vuejs/vue-devtools
下載完成之后cd到目錄“vue-devtools”，使用以下命令行：
npm install
注意：用cnpm install也可以，具體區(qū)別可以度娘~有時候可能沒有權(quán)限操作會報錯，請在命令前面加“ sudo”，輸入電腦登入密碼即可繼續(xù)；
修改manifest.json文件
->"persistent":false改成true
8403eb1b-6535-42c2-86e7-6810688667c0.png
51878fa9-220b-4cd5-b344-ed3b52219069.png
編譯
npm run build
編譯成功后
9e819f56-aacb-4231-bb5f-5b2b0def0452.png
設置extension
->瀏覽器右上角 -> 更多工具L ->擴展程序（E）;
->瀏覽器輸入地址：chrome://extensions/
或是將文件（vue-devtools-dev -> shells -> chrome）直接拖進去即可。
0bcf21b1-9349-4842-a732-f7471d2b309a.png
搞定?。。。ň唧w調(diào)試的操作后面補上，嘿嘿~）
e5db8740-de08-4ddb-9efb-f47df1335666.png
