Mac環境下安裝Vue DevTools（Vue.js的調試神器）

 

為什么要安裝Vue DevTools？它是怎么來的？
做為一個剛起步學習Vue開發的大叔，首先從教程上得知要安裝這個extension，目的為了我們更好的調度Vue代碼！納尼！！這玩意兒怎么調試？從哪里操作？到底怎么玩？我是新人，是小白，我會告訴你我走的路，但對於大神來說，可能存在誤人子弟的情形！！所以希望高手請多多指教（在此跪謝~），和小白一起互鑒！
我們在瀏覽器（Google Chrome）中預覽開發效果時，請按F12鍵，我們選擇“Console”標簽，會出現如下圖所示的界面。

 

 

 

我們可直接點擊提示的Github來獲取最新源碼！
諸多教程會告訴你直接下載源碼，但實事證明，你可能就被欺騙的那個，因為下圖就是最好說服你的理由！！！！！

 

 

 

 

 以為跟着教程准沒錯，但如果按教程來，絕對會讓一個小白會哭爹罵娘的，只怪我們太年輕了~注意了，注意了，注意了，下面是正確的姿勢：

 

 

或是直接用命令行：

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

 

下載完成之后cd到目錄“vue-devtools”，使用以下命令行： 

npm install

 

注意：用cnpm install也可以，具體區別可以度娘~有時候可能沒有權限操作會報錯，請在命令前面加“ sudo”，輸入電腦登入密碼即可繼續；

修改manifest.json文件
->"persistent":false改成true

 

 

 

 

編譯

npm run build

 

編譯成功后

 

 

 

 設置extension

->瀏覽器右上角 -> 更多工具L ->擴展程序（E）;
->瀏覽器輸入地址：chrome://extensions/ 

或是將文件（vue-devtools-dev -> shells -> chrome）直接拖進去即可。

 

 

 

 

文章來源：https://www.jianshu.com/p/5cd1f9770ff7