作者：DamianMullins，译者：FrontendXiaozhi没有大厂背景，但有积极心态的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...在开发环境中，Vuedevtools非常好用。但是，一旦部署到生产环境，它就无法再访问我们编写的代码。那么我们如何在应用发布到生产环境时进行检查呢？在本文中，我们将介绍一些检查和调试代码的技巧。触发Prop值和更新除了弄清楚如何检查Vue内部变量外，我们还尝试更新组件prop值。假设我们有一个组件，其prop控制元素的文本，我们如何强制该值触发UI更新？{{msg}}
找到Vue组件示例首先，我们需要使用Chromedevtools元素面板找到组件的顶级元素。在这种情况下，元素是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组件实例的引用，我们可以在控制台中展开它，看看里面有什么：仔细看，看到中间的msgprop，点击三个点，你会看到当前值。我们可以使用如下命令在控制台查看prop值：//Using$0$0.__vue__.msg//UsingquerySelectordocument.querySelector('[data-v-763db97b]').__vue__.msg现在更新prop值,更新prop值只需将变量重新分配给它即可。所以，你可以在控制台上这样做：$0.__vue__.msg='Hellofromtheupdatedvalue!'瞧，UI已更新！总结在本文中，我们使用Chromedevtools控制台定位元素并检查相关的Vue组件实例详细信息，并操作Vue实例对象以更新prop值。需要注意的一件事是，更新不仅限于字符串值，还可以更新任何其他类型的属性，例如布尔值和数字。当前的更新方式也有局限性，例如无法更新计算属性，因为它们没有设置器。但是，能够检查生产中分配给组件的值仍然非常有用。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://www.damimullins.com/i...每周更新交流文章。可以微信搜索“达米穆林斯世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。
