在[vue3快速入门]中，我们尽快把vue的基本用法学习了一遍，但是实际工作中经常遇到这样那样的需求，用vue最基本的功能可能难以实现。在[vue3]进阶中，我们一方面把vue中更高级的内容介绍给大家，另一方面把有些功能进入更深入的学习，现在我们就开始吧。

vue-devtools是一个Chrome浏览器的插件，它是官方提供的一个vue开发者工具，方便我们在开发vue项目时调试，在开发和debug时都很有用，就想我们平时使用Chrome的开发者工具一样。

1.vue-devtools的安装

1）先到github上去下载devtools这个库，克隆也可以

2）安装依赖

下载或克隆完成后，在devtools这个库的文件夹里安装依赖

yarn

3）打包项目

yarn run build

这里注意一下，我本来用的是npm安装项目和依赖，但是老是报错，如果你使用npm也不行，可以使用试试yarn，使用yarn安装和打包

4）在Chrome中安装这个插件

在Chrome中打开扩展程序

chrome://extensions/

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

选择刚才下载的devtools代码的文件夹目录下的/packages/shell-chrome文件夹

devtools代码的文件夹/packages/shells-chrome

显示出来这个插件的内容，说明安装正确了，
重启Chrome浏览器，然后打开一个已经启动的vue项目，
打开开发者工具，在开发者工具中就会出现一个新的tab，叫vue

如果没有的话就刷新一下页面

2.devtools使用简介

打开vue这个里面大概长这个样子

这里点击inspector，可以查看我们vue项目的信息

选择components查看我们的组件结构

比如说我这个项目组件树就是下面这个结构，点击组件还可以查看组件的data、props等信息，非常方便

选择routes以后，可以查看整个项目的路由数据
左侧是所有路由的列表，点击后在右侧查看路由的具体数据

选择vuex后，可以查看所有vuex里储存的数据，这里左侧显示的是vuex的所有模块，点击一个模块，右侧显示这个模块里存放的数据

选择timeline，可以查看整个项目的时间轴，在项目运行中发生的一些事件

这节课就是这些了，devtools对我们的开发调试很有帮助，大家一定要安装一下。