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

左手的ㄟ右手 2022-12-23 07:26 135阅读 0赞

--------------------

# 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green #

# 贡献主题：https://github.com/xitu/juejin-markdown-themes #

## theme: juejin   highlight: ##

> 作者：Damian Mullins,  
> 译者：前端小智  
> 来源：damimullins

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

在开发环境中，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`:

![5a6c012a4c10d2c5bde12bc6423790e4.png][]

## 使用`$0`命令 ##

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

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

![a042aa62f9ba0434e46ba0170fc950ad.png][]

## 使用document.querySelector方法 ##

我们还可以使用任何DOM查找方法（例如`querySelector`或`getElementById`等）来选择元素。这里我们将使用`document.querySelector`来查看 Vue 实例：

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

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

![fca0ccea3e2f46e84eef08d4833bc06e.png][]

## 锁定 prop 值 ##

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

![c05f129f43f045f0bfe9780c5097f6d0.png][]

仔细看，在中间看到`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/inspecting-a-vue-applicaon-in-production/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[5a6c012a4c10d2c5bde12bc6423790e4.png]: /images/20221120/ca2e3389818a49a7a52deae7efa8f540.png
[a042aa62f9ba0434e46ba0170fc950ad.png]: /images/20221120/2378379f691e4a64913a146875219525.png
[fca0ccea3e2f46e84eef08d4833bc06e.png]: /images/20221120/946a33ac197641e9a3482e404ef4f642.png
[c05f129f43f045f0bfe9780c5097f6d0.png]: /images/20221120/0a17b7565af74dddab766d9da61bd20f.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi