建站
咨詢
售后
建站咨詢
新聞中心
本已經(jīng)過原作者 Damian Mullins 授權(quán)翻譯。
在開發(fā)環(huán)境中，Vue devtools 是很有用。 但是，一旦部署到生產(chǎn)環(huán)境，它就不再可以訪問我們所編寫的代碼。 那么發(fā)布到生產(chǎn)環(huán)境時(shí)，我們要怎么檢查應(yīng)用程序呢? 在這篇文章中，我們會(huì)介紹一些技巧，用來檢查和調(diào)試我們的代碼。
觸發(fā) Prop 值并更新
除了弄清楚如何檢查Vue內(nèi)部變量外，我們還嘗試更新組件屬性值。
假設(shè)我們有一個(gè)組件，該組件的prop控制著一個(gè)元素的文本，那么我們?nèi)绾螐?qiáng)制改變該值以觸發(fā)UI更新呢?
{{ msg }}
找到 Vue 組件實(shí)例
首先，我們需要使用Chrome devtools elements面板找到組件的頂級(jí)元素。在本例中，元素是h1:
使用$0命令
一旦我們選擇了元素，就可以在控制臺(tái)中輸入$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í)例的引用，我們就可以在控制臺(tái)中展開它，看看里面有什么內(nèi)容：
仔細(xì)看，在中間看到msg prop，單擊三個(gè)點(diǎn)，就會(huì)看到當(dāng)前值。
我們可以在控制臺(tái)中使用下面命令查看prop值：
- // Using $0
- $0.__vue__.msg
- // Using querySelector
- document.querySelector('[data-v-763db97b]').__vue__.msg
更新 prop 值
現(xiàn)在，更新prop值就是將變量重新賦值給它。因此，可以在控制臺(tái)上這么做：
- $0.__vue__.msg = 'Hello from the updated value!'
瞧，UI更新啦!
總結(jié)
在本文中，我們使用了Chrome devtools控制臺(tái)來定位元素并檢查相關(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)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號(hào)。
網(wǎng)頁題目：手把手教你如何在生產(chǎn)環(huán)境檢查Vue應(yīng)用程序
瀏覽路徑：http://www.dlmjj.cn/article/cdipiip.html
