vue-devtools简单安装教程

悠悠 2023-02-09 05:25 9阅读 0赞

## 最简单的方法： ##

*  直接到Google store下载
 *  你也可以去网上找别人已经编译好的vue-devtools文件

**当然你也可以跟我来一步一步编译生成vue-devtools工具**

**第一步：找到vue-devtools的github项目，并将其clone到本地. vue-devtools**

git clone https://github.com/vuejs/vue-devtools.git

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70]  
**第二步：安装项目所需要的npm包  
npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成**

cnpm install

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 1]  
**第三步：编译项目文件**

npm run build

一般有报错：

vue-devtools@5.3.3 build: `cd packages/shell-chrome && cross-env NODE_ENV=production webpack --progress --hi

不要慌，这是默认分支版本太新，一些功能未同步，  
我们去github上下载5.1.1版本即可

https://github.com/vuejs/vue-devtools/tree/v5.1.1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 2]  
下载下来解压，继续

cnpm i

依赖下载完毕，修改以下文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 3]  
然后

npm run build

**第四步：添加至chrome游览器**  
游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 4]

注：如果看不见“加载已解压的扩展程序…”按钮，则需要勾选“开发者模式”。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200422172452780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200422172536586.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200422182831500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200422183055205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200422182454734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ==,size_16,color_FFFFFF,t_70