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

作者:Damian Mullins,
译者:前端小智
来源:damimullins
点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

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

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

触发 Prop 值并更新

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

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



找到 Vue 组件实例

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

手把手教你如何在生产环境检查 Vue 应用程序_第1张图片

使用$0命令

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

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

手把手教你如何在生产环境检查 Vue 应用程序_第2张图片

使用document.querySelector方法

我们还可以使用任何DOM查找方法(例如querySelectorgetElementById等)来选择元素。这里我们将使用document.querySelector来查看 Vue 实例:

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

这里我们使用通过data 属性查找元素,但是你可以在querySelector中使用任何有效的CSS选择器。

手把手教你如何在生产环境检查 Vue 应用程序_第3张图片

锁定 prop 值

有了Vue组件实例的引用,我们就可以在控制台中展开它,看看里面有什么内容:

手把手教你如何在生产环境检查 Vue 应用程序_第4张图片

仔细看,在中间看到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和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

你可能感兴趣的:(javascript,html,vue.js)