精准调试-vue 调试工具 vue-devtools 安装及完整使用教程

[wwwwzf]

*这是 Zoomla!逐浪 CMS 开发团队的作品，用于集成 zoomla studio 系列开发工具笔记。 * 本文主要介绍 vue 的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快快一起来用 vue-devtools 来调试开发你的 vue 项目吧

如果你能连上 googlg Chrome 应用商店，那么一切好说，你只要输访问下面网址： https://chrome.google.com/webstore/category/extensions?h1=zh

然后输入：vue devtools，就能搜索到应用，然后下载了，如下图所示：

囿于国内环境无法连接国际版 google.com 服务，那么只好亲自动手来处理了。

#手动部署 Vue DevTools 项目的官方主页位于 GitHub 上。你可以找到安装说明，帮助解决一些问题等等。目前该扩展在 Chrome 和 Firefox 中得到支持，同样 Safari 也得到了支持。如果你想从安装扩展开始，请不要忘了重新加载你的网页。

** 第一步：到 github 下载：** git clone https://github.com/vuejs/vue-devtools

** 第二步：在 vue-devtools 目录下安装依赖包 **

		cd vue-devtools
		cnpm install
		

** 第三步：修改 manifest.json 文件 **

把"persistent":false 改成 true

** 第四步：编译代码 **

运行 npm 命令编译:

		npm run build

** 第五步：安装扩展 Chrome 插件 ** 进入扩展 Chrome 插件 Chrome 浏览器 > 更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

** 第六步：vue-devtools 使用 **

vue 项目, 打开 f12, 选择 vue 就可以使用了.

vue 是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

温情提示: 1.vue 必须引入开发版, 使用 min 压缩版是不能使用 devtools 进行调试的 2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

调试工具使用指引

从一个应用说起

让我从一个超级简单的 Vue 应用程序开始带大家去熟悉 Vue 的 DevTools。

正如你所看到的，我有一个输入字段绑定到一个叫做 name 的模型，然后是一个列表，它遍历一个 cat 数组。首先你可能会注意到你的开发工具是“宣布”自己的扩展类型 - 以防你忘了注意右边的标签。

点击 Vue 选项卡将显示特定于 Vue 的选项。首先是组件。在我的应用程序中，我只有一个 Root 应用程序，当您单击它时，它会右侧显示可用的数据。

这是“live”，所以如果我输入字段，它会立即反映在 dev tools 视图中。更好的是，您可以直接在 devtools 中进行编辑。将鼠标悬停在项目上将使您可以编辑控件：

DevTools 扩展到数组-有完全移除或添加 items 的选项。要添加 item，您需要输入有效的 JSON，扩展名将在您输入时提供实时反馈。

DevTools 扩展也可以处理 computed 属性：

我在代码上在 computed 属性添加 oldcats 函数，将 cats 的数据遍历输出一个 age>10 的结果，DevTools 扩展会将这个结果显示出来。

你不能编辑这些值（因为这是 computed 的！），但是如果你在数据数组中编辑一个比 10 更大的值，它将立即显示在下面的 computed 列表中。

Nice ！可能在 computed 中查看相关函数的数据还没令你感到兴奋的话，那么远程数据源呢？

我使用 Star Wars API 作为我的数据源。项目一旦运行，我可以看到 devtools 扩展中的远程数据，甚至可以编辑它。

自定义组件（ Components ）

那么自定义组件呢？这里是我定义了一个 cat 组件的脚本。坦白地说，Vue 并没有在默认情况下使用它，这是一个严重的错误。

现在看看 devtools 如何认识新的组件：

注意它是如何拾取发送给它的属性的。现在我要跳过 Vuex 选项卡，直接进入 Events。GitHub 仓库中的自述文件不会告诉您一点是“Events”选项卡仅适用于组件所定制的自定义事件。所以当我使用了一个简单的 @ click =“doSomethingYo”测试，它并没有呈现，一开始我认为它在渲染的时候被破坏了其实并不是的。在上面的代码示例中，您可以看到我有一个 click 事件，但是点击它没有发生任何事情。我不得不修改代码来触发出新的事件。

有了这个，你现在可以看到记录的 events。有趣的是，devtools 扩展会让你知道哪一个事件被解雇了：

点击标签，然后 event 让你检查是什么触发了它和其他额外的信息。

使用 Vuex

现在让我们看看 Vuex。2017 年 12 月，Raymond Camden 的博客上发布了一个示例应用程序，它利用 Vuex 构建了一个简单的股票游戏。这就是 Vue DevTools 的真正意义所在。您可以深入了解存储中的数据以及运行的突变列表。

左边的是“live”，在股票应用中非常酷，因为它有一个“心跳”，每隔几秒就会发生一次突变。点击它们可以提供有关特定突变的详细信息。

更酷的是你可以通过一个特定的突变来拒绝或回滚你的存储状态。

您还可以使用导出 /导入命令来保存 /恢复您的 Vuex 状态。这对于调试问题是非常有用的。

[noreplay]

这个还能写这么多，怎么有一种来到简书的感觉。

[GodMotherLao]

看完全文了，弱弱问一句，机器翻译的吗？看到后面，如此生硬。也没有声明来源

[xiaoyouqiang]

不错

[hyy1995]

看到写了这么长，我还特意确定了一下是不是我用的那个调试工具。。。

[iMusic]

前半部分换成教大家怎么 FQ 比较简单

[wwwwzf]

@GodMotherLao 后面部份没写好，有引用第三方源，以后改正，请海涵，感谢指导。

[wolfan]

edge 怎么就是用不上呐。。。。