vue-devtools 使用

柔光的暖阳◎ 2022-10-24 01:42 19阅读 0赞

### 文章目录 ###

*  安装
 *  修改配置
 *  错误
 *  谷歌安装

# 安装 #

git clone https://github.com/vuejs/vue-devtools
    cd ./vue-devtools/
    git checkout master
    npm install
    npm run build

建议使用gitee 拷贝

例如:

git clone https://gitee.com/fakerlove/vue-devtools
    cd ./vue-devtools/
    git checkout master
    npm install
    npm run build

# 修改配置 #

"background": { 
        "scripts": [
          "build/background.js"
        ],
        "persistent": true
    },

![image-20210128212542828][]

# 错误 #

# 安装过程可能会出现
    # npm ERR! code ELIFECYCLE
    # npm ERR! errno 1
    # npm ERR! vue-devtools@5.1.1 build: `cd shells/chrome && cross-env NODE_ENV=production webpack -- progress --hide-modules`
    # npm ERR! Exit status 1
    # npm ERR!
    # npm ERR! Failed at the vue-devtools@5.1.1 build script.
    # npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    # npm WARN Local package.json exists, but node_modules missing, did you mean to install?
    # 这是没有生成node_modules这个文件,清空下缓存再重新安装就行

解决方案

npm cache verify

# 谷歌安装 #

![image-20210128211628562][]

点击扩展程序

![image-20210128211708248][]

点击加载已解压的扩展程序

![image-20210128211822161][]

加载完毕

![image-20210128211847169][]

[image-20210128212542828]: /images/20221024/2b56092775054cdab118b0913262f7a4.png
[image-20210128211628562]: /images/20221024/da0b7e45a5d0475fa663d4e6d3e67bf8.png
[image-20210128211708248]: /images/20221024/98e304d84e7b4989809f2a0c27f3b1f4.png
[image-20210128211822161]: /images/20221024/d1d6566f9d1f4e51af0159896cb5ec39.png
[image-20210128211847169]: /images/20221024/e73ffa8ab08242a7960621a4614aa523.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 windows下载安装Vue开发者工具(VueDevtools)，同时支持vue2.0和vue3.0两个版本

前言 vue开发者工具可以帮助我们提高开发效率，如果不安装控制台老是现在这些东西，对我这种强迫症患者来说痛苦至极,下面我就介绍下我的安装步骤 ![在这里插入图片描述][

拼搏现实的明天。/ 2023年09月23日 12:52/ 0 赞/ 156 阅读

相关 vuedevtools插件安装

目前vuedevtools插件安装主要有三种方式，选择适合自己的方式即可 1.在线安装众所周知，国内网络环境比较难按，如果能安的话还是推荐在线安装在线安装地址：[ht

ゝ一纸荒年。/ 2023年01月21日 14:26/ 0 赞/ 325 阅读

相关 SVN使用使用教程

SVN使用使用教程前言本人在公司孤儿式开发，是用不到svn这种工具的，但是怕突然某一天电脑坏掉，代码消失所以还是使用上代码管理工具。之前使用过svn工具，但

迈不过友情╰/ 2023年01月06日 11:55/ 0 赞/ 381 阅读

相关 vscode 使用使用快捷键添加注释（使用KoroFileHeader）

1.安装插件KoroFileHeader ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

痛定思痛。/ 2022年12月01日 03:41/ 0 赞/ 849 阅读

相关 Git使用及使用规范

![Center][] 例如注释有这样的一般情况下，提交 GIT 时的注释可以分成几类，可以用几个动词开始： Added

水深无声/ 2022年07月28日 11:43/ 0 赞/ 412 阅读

相关 idea使用svn(日常使用)

本文记录了svn的日常使用！！！非常详细！！！持续更新… 更新svn的项目到本地（一般是先更新再进行提交） ![在这里插入图片描述][watermark_type_

Dear 丶/ 2022年04月23日 03:46/ 0 赞/ 429 阅读

相关 VC中使用richtextbox使用

VC如果使用richedit控件，无法启动 \--------------------------------------------------------

太过爱你忘了你带给我的痛/ 2022年01月22日 03:57/ 0 赞/ 555 阅读

相关 Spring使用Rabbitmq (简单使用)

1、pom.xml jar包引用 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 1 <depende

我不是女神ヾ/ 2022年01月07日 08:11/ 0 赞/ 523 阅读

相关使用ContentPresenter，不使用ContentControl

参考： https://wpf.2000things.com/2017/04/06/1204-using-a-datatrigger-to-change-content-in-

女爷i/ 2021年12月01日 23:08/ 0 赞/ 547 阅读

相关 RxJava使用（一）基本使用

[https://blog.csdn.net/tangxl2008008/article/details/51334122][https_blog.csdn.net_tangx

红太狼/ 2021年09月16日 01:46/ 0 赞/ 718 阅读