共计 1676 个字符,预计需要花费 5 分钟才能阅读完成。
作者: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 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。