Vue3?vue-devtools?調(diào)試工具下載安裝使用教程
官網(wǎng)下載地址:GitHub - vuejs/devtools: ?? Browser devtools extension for debugging Vue.js applications.
完成后解壓到目錄,解壓后目錄如下:

終端命令行進(jìn)入到解壓后的Vue-Devtools目錄:

執(zhí)行命令下載yarn:
npm install -g yarn
安裝好yarn后,通過yarn來安裝相關(guān)依賴:
yarn install
依賴安裝完成后,開始打包build。
需要注意,這里的命令需要帶watch,如果不帶,會(huì)出錯(cuò):
yarn run build:watch
代碼執(zhí)行一陣后,沒有其他反應(yīng),此時(shí)Ctrl+C退出即可。
接下來執(zhí)行dev:
yarn run dev:chrome
出現(xiàn)下面的界面后就可以Ctrl+C退出終端了:

此時(shí),Vue-Devtools目錄下,生成了build目錄:

安裝
1、打開Chrome瀏覽器擴(kuò)展程序

2、加載已解壓的程序


3、擴(kuò)展欄固定vue-devtools程序

至此,Vue-Devtools插件安裝完成,打開使用vue3的網(wǎng)站,F(xiàn)12打開Chrome調(diào)試臺(tái),可以看到Vue-Devtools的界面按鈕:

到此這篇關(guān)于Vue3vue-devtools調(diào)試工具下載安裝的文章就介紹到這了,更多相關(guān)vue-devtools調(diào)試工具內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03
簡(jiǎn)單了解vue 插值表達(dá)式Mustache
這篇文章主要介紹了vue 插值表達(dá)式Mustache的相關(guān)資料,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07
vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10
vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined
這篇文章主要介紹了淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09

