关于javascript:手把手教你如何在生产环境检查-Vue-应用程序

38次阅读

共计 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 查找办法(例如 querySelectorgetElementById等)来抉择元素。这里咱们将应用 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 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。

正文完
 0