使用vue Devtools

第一步： 在谷歌應用商店中查找 vue Devtools 並安裝。安裝以後，即便咱們打開了vue項目發現vue標識是灰色的，說明並無成功啓動vue。

第二步： 默認安裝的狀況下，找到C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\3.1.2_0下的manifest.json。

用sublime打開，而後將其中的第二行代碼裏的persistent選項修改成true。 

 "background": {
      "persistent": true,
      "scripts": [ "build/background.js" ]
   },

 

第三步： 在使用vue-cli腳手架構建的項目中，若是使用 npm run dev， 打開瀏覽器後就能夠發現 標識 變綠，這時就能夠使用了，以下所示：

這時，咱們就能夠很好地管理咱們的項目了。

 

 

 

 

 

 

 

 

 

結合使用debugger來調試代碼就行了。  這樣能夠檢測代碼在運行中的狀態， 尤爲是對於打包後的代碼，若是不用debugger，那麼代碼就會被打包，很亂，看不到事情的真相，而使用debugger拿到的就是原本的代碼。