1.3.2 Vue开发者调试工具

vue-devtools是基于Google Chrome浏览器的一个用于调试Vue应用的开发者浏览器扩展，可以在Vue开发者调试工具下调试代码。vue-devtools可以向开发者实时显示页面的组件构成，以及每个组件内的数据状态，能极大地帮助开发者提高程序的调试效率。本节将介绍如何安装Vue开发者调试工具vue-devtools。

vue-devtools的安装方式有3种：第1种是在Chrome应用商店中安装；第2种是在国内插件网站中下载插件后安装；第3种是下载源码后安装。本节讲解第3种安装方式，这也是笔者推荐的安装方式（官方商店不能直接访问，国内网站后期可能无法访问），安装步骤如下所示。

（1）到GitHub上下载源码，也可以在GitHub首页中搜索vue-devtools，vue-devtools页面如图1-6所示。

图1-6 GitHub中的vue-devtools页面

（2）下载压缩包，如图1-7所示。

图1-7 下载压缩包

（3）解压缩后进入命令提示符窗口，输入命令npm install，下载第三方依赖并安装。

（4）安装完毕后，输入命令npm run build，编译源程序。

（5）打开Google Chrome浏览器，点击浏览器地址栏右上角的图标，在弹出的下拉列表中选择“更多工具”→“扩展程序”选项，如图1-8所示。

（6）执行完上面的步骤后，确保“开发者模式”处于打开状态，如图1-9所示。

图1-8 选择“扩展程序”选项

图1-9 开发者模式

（7）点击“加载已解压的扩展程序”链接，此时会弹出选择框，选择vue-devtools下的“shells\chrome”。

（8）配置完成后，在Google Chrome浏览器右上角会出现Vue的图标，如图1-10所示。

图1-10 Vue的图标

值得一提的是，当通过浏览器浏览使用Vue写的项目时，右上角的Vue图标就会变亮。