Vue.js - 调试工具 vue-devtools 的安装与使用
vue-devtools 是一款基于 chrome 游览器的插件,用于调试 vue 应用。使用它可以极大地提高我们程序的开发、调试效率。下面介绍如何安装以及使用这个插件。




1,插件的安装
(1)打开 chrome 浏览器商店,地址:https://chrome.google.com/webstore
(2)使用关键字 vue devtools 进行搜索,并安装。

(3)安装完毕后浏览器的右上角会出现一个 V 字的插件图标(如果当前访问的是 Vue 项目页面,该图标会变成绿色)

2,使用说明
(1)vue-devtools 扩展程序添加完毕后。当我们打开 vue 应用页面时,在 chrome 开发者工具(F12)中会看一个 vue 栏目。点击后默认显示的第一个选项卡中,显示的是当前页面中组件、vue 对象等相关信息。

(2)由于 vue 是数据驱动的。我们可以直接修改调试面板中的数据值,修改的结果会实时地反应到界面上。

(3)而第二个选项卡则可以看到 Vuex 中存储的所有数据。

(4)在第三个选项卡中我们可以看到所有的事件(event)信息,包括是谁触发了它,以及一些其他额外的信息。
