Vue調試神器之Vue.js devTools

Vue項目中使用Vue.js devTools這款調試神器，能夠極大程度的提升咱們的開發效率。

安裝

1、打開Chrome網上應用商店安裝插件（自牆）,直接搜索devTools安裝便可。貴賓傳送陣，請戳這裏→Chrome網上應用商店

2、從github上下載到本地。貴賓傳送陣，請戳這裏→vue-devtools

1)、進入到/vue-devtools目錄下(npm install或者cnpm install)安裝項目所需依賴。

2)、安裝完依賴後(npm run build或者cnpm run build)編譯項目。

3)、編譯完項目後，在/vue-devtools/shell/chrome/manifest.json中修改persistent參數false爲true。

4)、在chrome擴展程序頁面，打開「開發者模式」，點擊「加載已解壓的擴展程序」按鈕，選擇你本地的.../vue-devtools/shell/chrome文件夾, 添加完成後，勾選容許文件地址是否訪問。

安裝完成後devTools的圖標會出如今瀏覽器的菜單欄中。

以上兩種安裝方式告一段落。下面讓咱們在vue項目中體驗一下這款調試神器吧。

使用

運行Vue項目，在Chrome瀏覽器中展現項目（瀏覽器菜單欄中的devTools圖標會亮起），按F12打開開發者工具，在開發者工具的菜單欄最後面會看到Vue，選中它就能夠盡情的使用了。

固然這樣一頓行雲流水的操做下來，有些人會一次成功，而有些人則不會成功，瀏覽器菜單中的devTools圖標亮滴鴨批，可是就是在開發者工具的菜單欄最後面看不到Vue。嗯~~~，怎麼肥事小老弟？

請查看項目的index.html中，對vue.js的引用。你確定使用了壓縮版的vue.min.js，使用vue.min.js默認爲生產環境，會致使devTools不顯示，改成vue.js便可。