Vue Devtools
是Vue
官方推出的瀏覽器插件,能夠算是Vue
開發調試神器,它能夠讓你可以在瀏覽器實時的編輯數據並當即看到其反映出來的變化,讓你告別console
大法。很是好用,誰用誰知道,Vue
開發必備,強烈推薦!vue
由於衆所周知的緣由,Google Chrome
商店沒法正常訪問,因此本文提供另外一種谷歌插件安裝的方式。git
1.下載Vue Devtools
插件,請到GitHub
倉庫:https://github.com/Jackyyans/code123
下載,路徑:/normal/libs/Vue.js Devtools_5.3.3.crx
。github
2.谷歌瀏覽器地址欄輸入:chrome://extensions
,點擊右邊的按鈕,打開開發者模式
。 3.將
Vue.js Devtools_5.3.3.crx
拖動到谷歌瀏覽器,安裝。 4.點擊
添加擴展程序
,就能夠看到多了個Vue Devtools
的圖標,安裝成功。
5.打開
Vue
的項目,能夠看到圖標變亮,多了個vue
面板,顯示了當前頁面用到的vue
組件,點擊組件,右邊會展現當前組件的data
、computed
等數據,能夠直接更改或刪除數據進行調試。另外,也能夠比較直觀的看到Vuex
、Vue Router
等信息。 6.
React
也有相似的瀏覽器插件React Developer Tools
,安裝方法跟Vue Devtools
同樣的,請到GitHub
倉庫:https://github.com/Jackyyans/code123
下載,路徑:/normal/libs/React Developer Tools_4.7.0.crx
。web