乐趣区

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

jiezi

作者：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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版