[[353540]]

本已經過原作者 Damian Mullins  授權翻譯。

在開發環境中，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。但是，能夠檢查分配給生產中組件的值仍然非常有用。

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

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

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。