手把手教你如何在生产环境检查 Vue 应用程序

做者：Damian Mullins,
译者：前端小智
来源：damimullins

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

在开发环境中，Vue devtools 是颇有用。 可是，一旦部署到生产环境，它就再也不能够访问咱们所编写的代码。 那么发布到生产环境时，咱们要怎么检查应用程序呢？ 在这篇文章中，咱们会介绍一些技巧，用来检查和调试咱们的代码。

触发 Prop 值并更新

除了弄清楚如何检查Vue内部变量外，咱们还尝试更新组件属性值。

假设咱们有一个组件，该组件的prop控制着一个元素的文本，那么咱们如何强制改变该值以触发UI更新呢？

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
};
</script>

找到 Vue 组件实例

首先，咱们须要使用Chrome devtools elements面板找到组件的顶级元素。 在本例中，元素是h1:

使用$0命令

一旦咱们选择了元素，就能够在控制台中输入$0,$0表示最后选择的元素。$1是以前选择的元素,依此类推.它记得最后五个元素$0 – $4.

要查看Vue实例的详细信息，可使用 $0.__vue__。

使用document.querySelector方法

咱们还可使用任何DOM查找方法（例如querySelector或getElementById等）来选择元素。这里咱们将使用document.querySelector来查看 Vue 实例：

document.querySelector('[data-v-763db97b]').__vue__

这里咱们使用经过data 属性查找元素，可是你能够在querySelector中使用任何有效的CSS选择器。

锁定 prop 值

有了Vue组件实例的引用，咱们就能够在控制台中展开它，看看里面有什么内容：

仔细看，在中间看到msg prop，单击三个点，就会看到当前值。

咱们能够在控制台中使用下面命令查看prop值：

// Using $0
$0.__vue__.msg

// Using querySelector
document.querySelector('[data-v-763db97b]').__vue__.msg

更新 prop 值

如今，更新prop值就是将变量从新赋值给它。所以，能够在控制台上这么作：

$0.__vue__.msg = 'Hello from the updated value!'

瞧，UI更新啦！

总结

在本文中，咱们使用了Chrome devtools控制台来定位元素并检查相关的Vue组件实例详细信息，并操纵Vue实例对象以更新prop值。

须要注意的一件事是，更新不只限于字符串值，还能够更新任何其余类型的属性，例如布尔值和数字。

当前这种更新方式也有局限性，例如没法更新计算的、属性，由于它们没有setter。 可是，可以检查分配给生产中组件的值仍然很是有用。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://www.damimullins.com/i...

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。