Vue3 vue-devtools 調試工具下載安裝使用教程

官網下載地址:GitHub – vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

完成後解壓到目錄,解壓後目錄如下:

終端命令行進入到解壓後的Vue-Devtools目錄:

執行命令下載yarn:

npm install -g yarn

安裝好yarn後,通過yarn來安裝相關依賴:

yarn install

依賴安裝完成後,開始打包build。
需要註意,這裡的命令需要帶watch,如果不帶,會出錯:

yarn run build:watch

代碼執行一陣後,沒有其他反應,此時Ctrl+C退出即可。
接下來執行dev:

yarn run dev:chrome

出現下面的界面後就可以Ctrl+C退出終端瞭:

此時,Vue-Devtools目錄下,生成瞭build目錄:

安裝

1、打開Chrome瀏覽器擴展程序

2、加載已解壓的程序

3、擴展欄固定vue-devtools程序

至此,Vue-Devtools插件安裝完成,打開使用vue3的網站,F12打開Chrome調試臺,可以看到Vue-Devtools的界面按鈕:

到此這篇關於Vue3vue-devtools調試工具下載安裝的文章就介紹到這瞭,更多相關vue-devtools調試工具內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: