共计 1272 个字符，预计需要花费 4 分钟才能阅读完成。
在开发环境中，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…
