vue調(diào)試工具vue-devtools安裝及使用說明
更新時(shí)間：2026年04月25日 11:40:00 作者：AC_meimei
該文章主要介紹了如何安裝和配置Vue Devtools擴(kuò)展,首先需要克onole 克隆工具包代碼并安裝相關(guān)依賴,接著需要修改 persistent 字段的值為 true 幄節(jié)約安裝時(shí)間,然后在 Chrome 瀏覽器中打開擴(kuò)展程序設(shè)置,最后上傳并檢查安裝是否成功,出現(xiàn)相應(yīng)圖標(biāo)即表示安裝完成
一、先克隆工具包代碼
https://gitcode.net/mirrors/vuejs/vue-devtools.git
二、安裝
1、安裝 yarn 和 鏡像
為了節(jié)約安裝時(shí)間：
1?? npm install -g yarn 2?? yarn config set registry https://registry.npm.taobao.org --global 3?? yarn config set disturl https://npm.taobao.org/dist --global 4?? yarn config get registry
2、在vue-devtools目錄下打開cmd
1?? yarn install 2?? yarn run build
3、全局搜索persistent字段
把 "persistent":false 改成 true。
4、打開Chrome瀏覽
打開擴(kuò)展程序(右上角4個(gè)點(diǎn)—>更多工具—>擴(kuò)展程序—>打開開發(fā)者模式開關(guān))。
(1)第一步：
(2)第二步：
(3)第三步：上傳后顯示這個(gè)彈窗,說明安裝成功了，可以正常使用了。
注意：如果沒有出現(xiàn)下面這圖標(biāo)，可以關(guān)閉瀏覽器重新打開就有了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例,左側(cè)菜單欄與右側(cè)內(nèi)容部分聯(lián)動(dòng),當(dāng)點(diǎn)擊左側(cè)的菜單,右側(cè)會(huì)展示對(duì)應(yīng)的tab,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
Element-UI的el-table組件是一個(gè)非常強(qiáng)大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關(guān)于element-ui?el-table表格固定表頭的相關(guān)資料,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue高級(jí)特性概念原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue 開發(fā)之路由配置方法,結(jié)合實(shí)例形式詳細(xì)分析了了vue.js路由原理、配置方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
Vue3的ts報(bào)錯(cuò):類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關(guān)于Vue3的ts報(bào)錯(cuò):類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項(xiàng)目中遇到的一個(gè)問題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下2023-08-08
karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例，這次搭建的測(cè)試環(huán)境和開發(fā)環(huán)境隔離，所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05
vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法
vue3 集成 echarts 最大的坑就是出現(xiàn)了,reactive 的數(shù)據(jù) 刷新了,但圖表缺不會(huì)刷新,所以本文就給大家詳細(xì)的介紹一下vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于vue-cli3跨域配置的簡(jiǎn)單方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-cli3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要給大家介紹了關(guān)于vue自定義表格列的相關(guān)資料,表格組件在開發(fā)中經(jīng)常會(huì)用到,文章通過示例代碼介紹的也很詳細(xì),需要的朋友可以參考下2021-06-06
基于Vue3實(shí)現(xiàn)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm的詳細(xì)過程
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)一個(gè)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm,本項(xiàng)目采用pnpm進(jìn)行Monorepo環(huán)境搭建,因?yàn)槲磥磉@個(gè)項(xiàng)目可能會(huì)加入更多的工具包，需要的朋友可以參考下2022-10-10