在开发环境中，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 querySelectordocument.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...