CreatedOct 12, 2021 12:16 PM類型開發人員工具Vue.js套件網址https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd用途debug Vue建構的網頁英文介紹Chrome and Firefox DevTools extension for debugging Vue.js applications.官網https://vuejs.org/待讀文章待讀文章未安裝GitHub待看使用方式Vue 開發工具-Vue.js devtools 安裝與使用1. Components 選項 : 此選項功能顯示目前頁面上所有相關組件及組件的相關參數,可以對組件調整。 目前左邊顯示此頁面用到的組件(有Menu、Home、HelloWorld三個組件),右邊顯示已選取組件的相關參數。 原本選擇App,改為選擇Home組件。 demoText 參數修改為Hello World。 可看到畫面上已經改成輸入的資料,畫面變成Welcome to Hello World!!。 畫面的Menu選項,由menuitems參數傳入,目前有三組數據。 Menu多一個Test的選項。 目前計數器頁面,已經按了三次[加1]按鈕,Vuex紀錄了三次 [加1]按鈕的數據, 目前 filterDemo的頁面,在輸入框輸入數字後,可以將數字轉換 有千分位的字串。 可以看到在輸入數字時,觸發的event 事件有哪些,選取change事件,看到傳遞的值是789043。 在進行Vue.js 開發時,我們經常需要看到組件的參數的變化,之前常使用console的方式進行除錯,現在可以省去 console的時間。另外Vuex 的功能,可以記錄每個mutation呼叫,且點選mutation時,還會顯示當下的數據,亦可回復數據,當需要進行查看資料的變化時,就非常地實用。建議需要除錯Vue頁面時,可以安裝此套件。 2. https://zhuanlan.zhihu.com/p/33771617 3. https://www.hangge.com/blog/cache/detail_2110.htmlhttps://www.tpisoftware.com/tpu/articleDetails/1650