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即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM