1、devtools的官网：

 https://devtools.vuejs.org/getting-started/introduction

2、三种方式安装：

 https://devtools.vuejs.org/getting-started/installation

说明：

Vite Plugin：基于vite的项目，可以试一下内置的模式。

Standalone App ：如果您使用的浏览器不受支持，或者您有其他特定需求(例如您的应用程序在Electron中)，您可以使用独立应用程序。

Chrome Extension: 基于浏览器Chrome的扩展中使用。

3、Vite Plugin：

 https://devtools.vuejs.org/guide/vite-plugin

pnpm add -D vite-plugin-vue-devtools

//  Configuration Vite

import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vueDevTools(),
  ],
})

4、Vite Plugin demo运行：

5、Chrome Extension扩展程序:

开始一直下载的6.6.4，然后6.6.3版本都测试了一下，发现安装到扩展程序中，6.6.4 Vue(Legacy)，6.6.3的版本，Vue面板一片空白。用不起来。项目中Vue是3.x。

当然有好用的版本，6.6.1的版本：

百度网盘：Vue.js devtools 6.6.1.crx 链接:  https://pan.baidu.com/s/1WSfY8tj8_gro4QIfTvtBIw 提取码: c26b

这个版本可以直接安装，地址栏中，输入chrome://extensions，然后将文件crx直接拖到扩展程序里面就行，启用开发模式。

这个版本是直接从网上下载的，并不是自己编译的版本，这个可以用。

6、手工编译最新版7.7.2：

6.1下载

 https://github.com/vuejs/devtools

打不开github的，可以通过下面链接下载：

百度网盘：devtools-7.7.2.zip 链接:  https://pan.baidu.com/s/1kDwV-vhO6lcJrtgGTrwtAg 提取码: bkng

6.2编译

在目录，右键，打终端中打开：

6.2.1安装依赖

pnpm install

6.2.2 build编译生成可以安装的目录

7、安装vue.js devtools 7.7.2

7.1安装

下面是编译成功的目录， 我们将chrome-extension目录，直接拖到chrome 扩展程序中就可以或者点击加载已解压的扩展程序。

这里安装成功了。

7.2设置

勾选 允许访问文件网址 后面的checkbox。

8、devtools的chrome extensions中的效果：

鼠标移到哪里，我们就会看到这里面用的是哪一个component，下面还有结构显示。

9、总结

vue.js devtools能够辅助我们做开发，特别在结构不明确的情况，或者是接手新项目的时候，看整体结构还是挺别的方便。