[[353540]]

本已經(jīng)過原作者 Damian Mullins  授權(quán)翻譯。

在開發(fā)環(huán)境中，Vue devtools 是很有用。 但是，一旦部署到生產(chǎn)環(huán)境，它就不再可以訪問我們所編寫的代碼。 那么發(fā)布到生產(chǎn)環(huán)境時(shí)，我們要怎么檢查應(yīng)用程序呢? 在這篇文章中，我們會介紹一些技巧，用來檢查和調(diào)試我們的代碼。

觸發(fā) Prop 值并更新

除了弄清楚如何檢查Vue內(nèi)部變量外，我們還嘗試更新組件屬性值。

假設(shè)我們有一個(gè)組件，該組件的prop控制著一個(gè)元素的文本，那么我們?nèi)绾螐?qiáng)制改變該值以觸發(fā)UI更新呢?

<template> 
  <h1>{{ msg }}</h1> 
</template> 
 
<script> 
export default { 
  props: { 
    msg: { 
      type: String, 
      default: '' 
    } 
  } 
}; 
</script> 

找到 Vue 組件實(shí)例

首先，我們需要使用Chrome devtools elements面板找到組件的頂級元素。在本例中，元素是h1:

使用$0命令

一旦我們選擇了元素，就可以在控制臺中輸入$0,$0表示最后選擇的元素。$1是之前選擇的元素,依此類推.它記得最后五個(gè)元素$0 – $4.

要查看Vue實(shí)例的詳細(xì)信息，可以使用 $0.__vue__。

使用document.querySelector方法

我們還可以使用任何DOM查找方法(例如querySelector或getElementById等)來選擇元素。這里我們將使用document.querySelector來查看 Vue 實(shí)例：

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

這里我們使用通過data 屬性查找元素，但是你可以在querySelector中使用任何有效的CSS選擇器。

鎖定 prop 值

有了Vue組件實(shí)例的引用，我們就可以在控制臺中展開它，看看里面有什么內(nèi)容：

仔細(xì)看，在中間看到msg prop，單擊三個(gè)點(diǎn)，就會看到當(dāng)前值。

我們可以在控制臺中使用下面命令查看prop值：

// Using $0 
$0.__vue__.msg 
 
// Using querySelector 
document.querySelector('[data-v-763db97b]').__vue__.msg 

更新 prop 值

現(xiàn)在，更新prop值就是將變量重新賦值給它。因此，可以在控制臺上這么做：

$0.__vue__.msg = 'Hello from the updated value!' 

瞧，UI更新啦!

總結(jié)

在本文中，我們使用了Chrome devtools控制臺來定位元素并檢查相關(guān)的Vue組件實(shí)例詳細(xì)信息，并操縱Vue實(shí)例對象以更新prop值。

需要注意的一件事是，更新不僅限于字符串值，還可以更新任何其他類型的屬性，例如布爾值和數(shù)字。

當(dāng)前這種更新方式也有局限性，例如無法更新計(jì)算的、屬性，因?yàn)樗鼈儧]有setter。但是，能夠檢查分配給生產(chǎn)中組件的值仍然非常有用。

作者：Damian Mullins, 譯者：前端小智 來源：damimullins

原文：https://www.damimullins.com/inspecting-a-vue-applicaon-in-production/

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。